mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-11 04:38:18 +00:00
1393 lines
42 KiB
CSS
1393 lines
42 KiB
CSS
/* Accordion */
|
|
@layer components {
|
|
.accordion > details {
|
|
@apply not-last:border-b;
|
|
}
|
|
|
|
.accordion > details > summary {
|
|
@apply focus-visible:ring-ring/30 focus-visible:border-ring rounded-none gap-6 py-4 text-left text-sm font-semibold hover:underline focus-visible:ring-2;
|
|
}
|
|
|
|
.accordion > details > summary > svg:last-child {
|
|
@apply text-muted-foreground ms-auto size-3.5;
|
|
}
|
|
|
|
.accordion > details > :not(summary) {
|
|
@apply pt-0 pb-4 text-sm;
|
|
}
|
|
|
|
/* Button */
|
|
.btn {
|
|
@apply rounded-none border border-transparent bg-clip-padding text-xs font-semibold uppercase tracking-widest focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[2px] aria-invalid:border-destructive aria-invalid:ring-[2px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-3.5;
|
|
}
|
|
|
|
.btn:not([data-size]),
|
|
.btn[data-size='default'] {
|
|
@apply h-10 gap-1.5 px-6 has-[[data-icon='inline-end']]:pr-4 has-[[data-icon='inline-start']]:pl-4;
|
|
}
|
|
|
|
.btn[data-size='xs'] {
|
|
@apply h-7 gap-1 px-3 [&_svg:not([class*='size-'])]:size-3 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
|
}
|
|
|
|
.btn[data-size='sm'] {
|
|
@apply h-9 gap-1 px-4 has-[[data-icon='inline-end']]:pr-3 has-[[data-icon='inline-start']]:pl-3;
|
|
}
|
|
|
|
.btn[data-size='lg'] {
|
|
@apply h-11 gap-1.5 px-8 has-[[data-icon='inline-end']]:pr-5 has-[[data-icon='inline-start']]:pl-5;
|
|
}
|
|
|
|
.btn[data-size='icon'] {
|
|
@apply size-10;
|
|
}
|
|
|
|
.btn[data-size='icon-xs'] {
|
|
@apply size-7 [&_svg:not([class*='size-'])]:size-3;
|
|
}
|
|
|
|
.btn[data-size='icon-sm'] {
|
|
@apply size-9;
|
|
}
|
|
|
|
.btn[data-size='icon-lg'] {
|
|
@apply size-11;
|
|
}
|
|
|
|
.btn:not([data-variant]),
|
|
.btn[data-variant='primary'] {
|
|
@apply bg-primary text-primary-foreground hover:bg-primary/80;
|
|
}
|
|
|
|
.btn[data-variant='secondary'] {
|
|
@apply bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
|
|
}
|
|
|
|
.btn[data-variant='outline'] {
|
|
@apply border-border bg-transparent hover:bg-muted hover:text-foreground dark:hover:bg-input/30 aria-expanded:bg-muted aria-expanded:text-foreground;
|
|
}
|
|
|
|
.btn[data-variant='ghost'] {
|
|
@apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
|
|
}
|
|
|
|
.btn[data-variant='link'] {
|
|
@apply text-primary underline underline-offset-4 hover:underline;
|
|
}
|
|
|
|
.btn[data-variant='destructive'] {
|
|
@apply bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
|
|
}
|
|
|
|
/* Button Group */
|
|
.button-group {
|
|
@apply has-[>.button-group]:gap-2;
|
|
|
|
> .input {
|
|
@apply px-4;
|
|
}
|
|
}
|
|
|
|
.button-group:has(> .btn[data-variant='outline']),
|
|
.button-group:has(> .select > button.btn[data-variant='outline']) {
|
|
> .input,
|
|
> .select > button {
|
|
@apply border-border focus-visible:border-ring;
|
|
}
|
|
|
|
> :is(span, label, output) {
|
|
@apply border-border;
|
|
}
|
|
}
|
|
|
|
.button-group:not([data-orientation='vertical']) {
|
|
> :last-child,
|
|
> :is(.dropdown-menu, .popover, .select):last-child > button {
|
|
@apply rounded-e-none!;
|
|
}
|
|
}
|
|
|
|
.button-group[data-orientation='vertical'] {
|
|
> :last-child,
|
|
> :is(.dropdown-menu, .popover, .select):last-child > button {
|
|
@apply rounded-b-none!;
|
|
}
|
|
}
|
|
|
|
.button-group > :is(span, label, output) {
|
|
@apply gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold uppercase [&_svg:not([class*='size-'])]:size-3.5;
|
|
}
|
|
|
|
.button-group > hr[role='separator'] {
|
|
@apply bg-input;
|
|
}
|
|
|
|
|
|
/* Tabs */
|
|
.tabs {
|
|
@apply gap-2;
|
|
}
|
|
|
|
.tabs > [role='tablist'] {
|
|
@apply p-1 h-10;
|
|
}
|
|
|
|
.tabs > [role='tablist']:not([data-variant='line']) {
|
|
@apply bg-muted;
|
|
}
|
|
|
|
.tabs > [role='tablist'][data-variant='line'] {
|
|
@apply gap-1 rounded-none bg-transparent;
|
|
}
|
|
|
|
.tabs > [role='tablist'][aria-orientation='vertical'] {
|
|
@apply h-fit ;
|
|
}
|
|
|
|
.tabs > [role='tablist'] > [role='tab'] {
|
|
@apply text-foreground/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:text-muted-foreground dark:hover:text-foreground gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold uppercase tracking-wider [&_svg:not([class*='size-'])]:size-3.5 focus-visible:ring-[3px] focus-visible:outline-1;
|
|
@apply after:absolute after:bg-foreground after:opacity-0 after:transition-opacity;
|
|
}
|
|
|
|
.tabs > [role='tablist'][aria-orientation='vertical'] > [role='tab'] {
|
|
@apply w-full justify-start px-4 py-2;
|
|
}
|
|
|
|
.tabs > [role='tablist'][data-variant='line'][aria-orientation='horizontal'] > [role='tab'] {
|
|
@apply bg-transparent shadow-none after:inset-x-0 after:bottom-[-5px] after:h-0.5;
|
|
}
|
|
|
|
.tabs > [role='tablist'][data-variant='line'][aria-orientation='vertical'] > [role='tab'] {
|
|
@apply bg-transparent shadow-none after:inset-y-0 after:end-[-4px] after:w-0.5;
|
|
}
|
|
|
|
.tabs > [role='tablist']:not([data-variant='line']) > [role='tab'][aria-selected='true'] {
|
|
@apply bg-background text-foreground dark:border-input dark:bg-input/30 dark:text-foreground shadow-sm;
|
|
}
|
|
|
|
.tabs > [role='tablist'][data-variant='line'] > [role='tab'][aria-selected='true'] {
|
|
@apply bg-transparent text-foreground shadow-none dark:border-transparent dark:bg-transparent dark:text-foreground after:opacity-100;
|
|
}
|
|
|
|
.tabs > [role='tablist'] > [role='tab']:has(> svg:first-child) {
|
|
@apply ps-2.5;
|
|
}
|
|
|
|
.tabs > [role='tablist'] > [role='tab']:has(> svg:last-child) {
|
|
@apply pe-2.5;
|
|
}
|
|
|
|
.tabs > [role='tabpanel'] {
|
|
@apply text-sm;
|
|
}
|
|
|
|
/* Textarea */
|
|
.field > textarea,
|
|
.textarea {
|
|
@apply border-transparent border-b-input bg-transparent focus-visible:border-b-ring aria-invalid:border-b-destructive dark:aria-invalid:border-b-destructive/50 resize-none rounded-none border px-0 py-3 text-base transition-[color,border-color] md:text-sm;
|
|
}
|
|
/* Input */
|
|
.field > input[type='text']:not(:is(.command > header input, .dialog > * > header input)),
|
|
.field > input[type='email'],
|
|
.field > input[type='password'],
|
|
.field > input[type='number'],
|
|
.field > input[type='file'],
|
|
.field > input[type='tel'],
|
|
.field > input[type='url'],
|
|
.field > input[type='search']:not(:is(.command > header input, .dialog > * > header input)),
|
|
.field > input[type='date'],
|
|
.field > input[type='datetime-local'],
|
|
.field > input[type='month'],
|
|
.field > input[type='week'],
|
|
.field > input[type='time'],
|
|
.field > input:not([type]),
|
|
.input[type='text'],
|
|
.input[type='email'],
|
|
.input[type='password'],
|
|
.input[type='number'],
|
|
.input[type='file'],
|
|
.input[type='tel'],
|
|
.input[type='url'],
|
|
.input[type='search'],
|
|
.input[type='date'],
|
|
.input[type='datetime-local'],
|
|
.input[type='month'],
|
|
.input[type='week'],
|
|
.input[type='time'],
|
|
.input:not([type]) {
|
|
@apply border-transparent border-b-input bg-transparent focus-visible:border-b-ring aria-invalid:border-b-destructive dark:aria-invalid:border-b-destructive/50 h-10 border px-0 py-1 text-base transition-[color,border-color] file:h-7 file:text-sm file:font-medium md:text-sm;
|
|
}
|
|
|
|
/* Native Select */
|
|
.field > select,
|
|
select.select {
|
|
@apply border-transparent border-b-input bg-transparent placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-b-ring aria-invalid:border-b-destructive dark:aria-invalid:border-b-destructive/50 h-10 w-fit rounded-none border py-2 ps-0 pe-8 text-sm transition-[color,border-color] data-[size=sm]:h-9;
|
|
@apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0] bg-size-[0.875rem];
|
|
}
|
|
|
|
:is(.field > select, select.select):dir(rtl) {
|
|
@apply bg-position-[center_left_0];
|
|
}
|
|
|
|
/* Alert */
|
|
.alert {
|
|
@apply grid gap-1 bg-background border px-4 py-3 text-start text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 [&>svg]:row-span-2 [&>svg]:translate-y-0.5 [&>svg]:text-current [&>svg:not([class*='size-'])]:size-4 relative after:-inset-y-px after:-start-px after:w-0.5 after:absolute;
|
|
}
|
|
|
|
.alert {
|
|
@apply bg-card text-card-foreground after:bg-foreground;
|
|
}
|
|
|
|
.alert[data-variant='destructive'] {
|
|
@apply text-destructive bg-card [&>svg]:text-current after:bg-destructive;
|
|
}
|
|
|
|
.alert > :is(h2, h3, h4, h5, h6, strong, [data-title]),
|
|
.alert[data-variant='destructive'] > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
|
@apply font-semibold text-sm;
|
|
}
|
|
|
|
|
|
.alert:has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
|
@apply col-start-2;
|
|
}
|
|
.alert > section {
|
|
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
|
}
|
|
|
|
.alert[data-variant='destructive'] > section {
|
|
@apply text-destructive/90 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
|
|
}
|
|
|
|
.alert > footer,
|
|
.alert[data-variant='destructive'] > footer {
|
|
@apply top-2.5 end-3;
|
|
}
|
|
/* Avatar */
|
|
.avatar {
|
|
@apply rounded-full after:rounded-[inherit];
|
|
}
|
|
|
|
.avatar {
|
|
@apply size-8;
|
|
}
|
|
|
|
.avatar[data-size='sm'] {
|
|
@apply size-6;
|
|
}
|
|
|
|
.avatar[data-size='lg'] {
|
|
@apply size-10;
|
|
}
|
|
|
|
.avatar > span:not(.avatar-badge) {
|
|
@apply bg-muted text-muted-foreground rounded-[inherit];
|
|
}
|
|
|
|
.avatar > img {
|
|
@apply rounded-[inherit];
|
|
}
|
|
|
|
.avatar > .avatar-badge {
|
|
@apply bg-primary text-primary-foreground ring-background;
|
|
}
|
|
|
|
.avatar-group > [data-count] {
|
|
@apply bg-muted text-muted-foreground size-8 rounded-full text-sm [&>svg]:size-4;
|
|
}
|
|
|
|
.avatar-group:has(> .avatar[data-size='sm']) > [data-count] {
|
|
@apply size-6 [&>svg]:size-3;
|
|
}
|
|
|
|
.avatar-group:has(> .avatar[data-size='lg']) > [data-count] {
|
|
@apply size-10 [&>svg]:size-5;
|
|
}
|
|
|
|
/* Badge */
|
|
.badge {
|
|
@apply gap-1.5 rounded-none border-0 bg-transparent px-0 py-0 text-[0.625rem] font-semibold uppercase tracking-widest transition-colors [&>svg]:size-3!;
|
|
}
|
|
|
|
.badge:not([data-variant]),
|
|
.badge[data-variant='primary'] {
|
|
@apply text-foreground [a]:hover:text-foreground/70;
|
|
}
|
|
|
|
.badge[data-variant='secondary'] {
|
|
@apply text-muted-foreground [a]:hover:text-foreground;
|
|
}
|
|
|
|
.badge[data-variant='outline'] {
|
|
@apply text-foreground [a]:hover:text-foreground/70;
|
|
}
|
|
|
|
.badge[data-variant='destructive'] {
|
|
@apply text-destructive [a]:hover:text-destructive/70 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
|
|
}
|
|
|
|
.badge[data-variant='ghost'] {
|
|
@apply text-muted-foreground hover:text-foreground;
|
|
}
|
|
|
|
.badge[data-variant='link'] {
|
|
@apply text-foreground underline-offset-4 hover:underline;
|
|
}
|
|
|
|
/* Breadcrumb */
|
|
.breadcrumb > ol {
|
|
@apply text-muted-foreground gap-1.5 text-sm sm:gap-2.5;
|
|
}
|
|
|
|
.breadcrumb li {
|
|
@apply gap-1.5;
|
|
}
|
|
|
|
.breadcrumb a {
|
|
@apply transition-colors hover:text-foreground;
|
|
}
|
|
|
|
.breadcrumb [aria-current='page'] {
|
|
@apply font-normal text-foreground;
|
|
}
|
|
|
|
.breadcrumb li[aria-hidden='true'] > svg {
|
|
@apply size-3.5;
|
|
}
|
|
|
|
.breadcrumb li > span[aria-hidden='true'] {
|
|
@apply size-5 [&>svg]:size-4;
|
|
}
|
|
|
|
/* Command */
|
|
.command {
|
|
@apply bg-popover text-popover-foreground rounded-none;
|
|
}
|
|
|
|
.command-dialog > .command {
|
|
@apply bg-popover text-popover-foreground ring-foreground/10 rounded-none shadow-md ring-1 duration-100;
|
|
}
|
|
|
|
.command > header {
|
|
@apply m-1 gap-0 border-b border-b-input bg-transparent px-3;
|
|
}
|
|
|
|
.command > header svg {
|
|
@apply size-3.5 opacity-50;
|
|
}
|
|
|
|
.command > header input {
|
|
@apply h-9 ps-1.5 pe-2 text-sm placeholder:text-muted-foreground;
|
|
}
|
|
|
|
.command [role='menu'] {
|
|
@apply max-h-72 scroll-py-1;
|
|
}
|
|
|
|
.command [role='menu']:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
|
|
@apply py-6 text-center text-sm;
|
|
}
|
|
|
|
.command [role='group'] {
|
|
@apply p-1.5 text-foreground;
|
|
}
|
|
|
|
.command [role='heading'] {
|
|
@apply text-muted-foreground px-3 py-2 text-xs font-semibold tracking-wider uppercase;
|
|
}
|
|
|
|
.command [role='separator'] {
|
|
@apply bg-border/50 -mx-1.5 my-1.5 h-px;
|
|
}
|
|
|
|
.command [role='menuitem'] {
|
|
@apply gap-2 rounded-none px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-3.5;
|
|
}
|
|
|
|
.command [role='menuitem'].active {
|
|
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
|
}
|
|
|
|
.command [data-shortcut] {
|
|
@apply text-muted-foreground text-xs tracking-widest;
|
|
}
|
|
|
|
.command [role='menuitem'].active [data-shortcut] {
|
|
@apply text-foreground;
|
|
}
|
|
|
|
|
|
/* Combobox */
|
|
.combobox > input[role='combobox'] {
|
|
@apply border-transparent border-b-input bg-transparent focus-visible:border-b-ring aria-invalid:border-b-destructive dark:aria-invalid:border-b-destructive/50 h-10 rounded-none border py-2 ps-0 pe-8 text-sm transition-[color,border-color];
|
|
}
|
|
|
|
.combobox > svg,
|
|
.combobox-trigger-icon {
|
|
@apply text-muted-foreground end-0 top-1/2 size-3.5 -translate-y-1/2;
|
|
}
|
|
|
|
.combobox [data-popover] {
|
|
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 gap-0 rounded-none p-0 shadow-md ring-1 duration-100;
|
|
}
|
|
|
|
.combobox [role='listbox'] {
|
|
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1.5 overflow-y-auto p-1.5;
|
|
}
|
|
|
|
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true']))) {
|
|
@apply p-0;
|
|
}
|
|
|
|
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
|
|
@apply px-3 py-2 text-center text-sm text-muted-foreground;
|
|
}
|
|
|
|
.combobox [role='heading'] {
|
|
@apply px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase;
|
|
}
|
|
|
|
.combobox [role='option'] {
|
|
@apply gap-2.5 rounded-none py-2 ps-3 pe-8 text-sm [&_svg:not([class*='size-'])]:size-3.5;
|
|
}
|
|
|
|
.combobox [role='option'].active,
|
|
.combobox [role='option']:focus-visible {
|
|
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
|
}
|
|
|
|
.combobox [role='group'] {
|
|
@apply scroll-my-1.5 p-1.5;
|
|
}
|
|
|
|
.combobox [role='separator'] {
|
|
@apply bg-border/50 -mx-1.5 my-1.5 h-px;
|
|
}
|
|
|
|
.combobox-chips {
|
|
@apply border-transparent border-b-input bg-transparent focus-within:border-b-ring has-[[aria-invalid=true]]:border-b-destructive dark:has-[[aria-invalid=true]]:border-b-destructive/50 min-h-10 gap-1.5 rounded-none border bg-clip-padding px-0 py-1.5 text-sm transition-[color,border-color];
|
|
}
|
|
|
|
.combobox-chip {
|
|
@apply bg-muted text-foreground h-5.5 gap-1 rounded-none px-2 text-xs font-medium has-[>.combobox-chip-remove]:pe-0;
|
|
}
|
|
|
|
.combobox-chip-remove {
|
|
@apply -ms-1 opacity-50 hover:opacity-100 [&_svg]:size-3.5;
|
|
}
|
|
|
|
.combobox [data-popover] > .input-group {
|
|
@apply m-1.5 mb-0 h-8 w-auto border-transparent border-b-input bg-transparent px-2.5 shadow-none focus-within:border-transparent focus-within:ring-0;
|
|
}
|
|
|
|
.combobox [data-popover] > input[role='combobox'] {
|
|
@apply mb-1 w-full;
|
|
}
|
|
/* Select */
|
|
*:not(select).select > button {
|
|
@apply border-transparent border-b-input bg-transparent focus-visible:border-b-ring aria-invalid:border-b-destructive dark:aria-invalid:border-b-destructive/50 h-10 data-[size=sm]:h-9 gap-1.5 rounded-none border px-0 py-2 text-sm transition-[color,border-color] [&_svg:not([class*='size-'])]:size-3.5;
|
|
}
|
|
|
|
*:not(select).select > button > span {
|
|
@apply gap-1.5;
|
|
}
|
|
|
|
*:not(select).select > button > svg {
|
|
@apply text-muted-foreground size-3.5;
|
|
}
|
|
|
|
*:not(select).select [data-popover] {
|
|
@apply bg-popover text-popover-foreground ring-foreground/10 rounded-none p-1.5 shadow-md ring-1 duration-100;
|
|
}
|
|
|
|
|
|
|
|
|
|
*:not(select).select [role='listbox'] {
|
|
@apply scroll-py-1.5;
|
|
}
|
|
|
|
*:not(select).select [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
|
|
@apply py-6 text-center text-sm;
|
|
}
|
|
|
|
*:not(select).select [role='heading'] {
|
|
@apply px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase;
|
|
}
|
|
|
|
*:not(select).select [role='option'] {
|
|
@apply gap-2.5 rounded-none py-2 ps-3 pe-8 text-sm [&_svg:not([class*='size-'])]:size-3.5;
|
|
}
|
|
|
|
*:not(select).select [role='option'].active,
|
|
*:not(select).select [role='option']:focus-visible {
|
|
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
|
}
|
|
|
|
*:not(select).select [role='group'] {
|
|
@apply scroll-my-1.5 p-1.5;
|
|
}
|
|
|
|
*:not(select).select [role='separator'] {
|
|
@apply bg-border/50 -mx-1.5 my-1.5 h-px;
|
|
}
|
|
|
|
|
|
/* Dialog */
|
|
.dialog::backdrop,
|
|
.alert-dialog::backdrop,
|
|
.command-dialog::backdrop {
|
|
@apply bg-black/20 backdrop-blur-sm duration-100;
|
|
}
|
|
|
|
.alert-dialog > * {
|
|
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-6 rounded-none p-6 shadow-md ring-1 duration-100 sm:max-w-md;
|
|
}
|
|
|
|
.dialog > * {
|
|
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-none p-6 text-sm shadow-md ring-1 duration-100 sm:max-w-md;
|
|
}
|
|
|
|
.dialog > * > :is(button, form[method='dialog']) {
|
|
@apply top-5 end-5;
|
|
}
|
|
|
|
.dialog > * > :is(button, form[method='dialog'] > button) {
|
|
@apply bg-secondary;
|
|
}
|
|
|
|
.dialog > * > header {
|
|
@apply gap-2;
|
|
}
|
|
|
|
.alert-dialog > * > header {
|
|
@apply gap-x-6 gap-y-1.5;
|
|
}
|
|
|
|
.alert-dialog > * > header > figure {
|
|
@apply bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-none [&>svg:not([class*='size-'])]:size-8;
|
|
}
|
|
|
|
.alert-dialog > * > footer,
|
|
.dialog > * > footer {
|
|
@apply gap-2;
|
|
}
|
|
|
|
.dialog > * > header > h2,
|
|
.dialog > * > [data-title] {
|
|
@apply text-lg leading-none font-semibold tracking-wider uppercase;
|
|
}
|
|
|
|
.alert-dialog > * > header > h2,
|
|
.alert-dialog > * > [data-title] {
|
|
@apply text-lg font-semibold tracking-wider uppercase;
|
|
}
|
|
|
|
.dialog > * > header > p,
|
|
.dialog > * > [data-description] {
|
|
@apply text-muted-foreground mt-0.5 text-sm leading-relaxed [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
|
}
|
|
|
|
.alert-dialog > * > header > p,
|
|
.alert-dialog > * > [data-description] {
|
|
@apply text-muted-foreground mt-0.5 text-sm leading-relaxed text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
|
}
|
|
|
|
/* Drawer */
|
|
.drawer::backdrop {
|
|
@apply bg-black/20 backdrop-blur-sm;
|
|
}
|
|
|
|
.drawer > * {
|
|
@apply bg-popover text-popover-foreground text-sm;
|
|
}
|
|
|
|
.drawer:not([data-side]) > *,
|
|
.drawer[data-side='bottom'] > * {
|
|
@apply rounded-none border-t;
|
|
}
|
|
|
|
.drawer[data-side='top'] > * {
|
|
@apply rounded-none border-b;
|
|
}
|
|
|
|
.drawer[data-side='left'] > * {
|
|
@apply rounded-none border-r;
|
|
}
|
|
|
|
.drawer[data-side='right'] > * {
|
|
@apply rounded-none border-l;
|
|
}
|
|
|
|
.drawer > * > header {
|
|
@apply gap-1 p-4 text-start md:gap-2;
|
|
}
|
|
|
|
.drawer:not([data-side]) > * > header,
|
|
.drawer[data-side='bottom'] > * > header,
|
|
.drawer[data-side='top'] > * > header {
|
|
@apply text-center;
|
|
}
|
|
|
|
.drawer > * > footer {
|
|
@apply gap-2 p-4;
|
|
}
|
|
|
|
.drawer > * > header > h2,
|
|
.drawer > * > [data-title] {
|
|
@apply text-lg font-semibold tracking-wider uppercase;
|
|
}
|
|
|
|
.drawer > * > header > p,
|
|
.drawer > * > [data-description] {
|
|
@apply text-muted-foreground mt-0.5 text-sm leading-relaxed;
|
|
}
|
|
|
|
/* Dropdown Menu */
|
|
.dropdown-menu > [data-popover] {
|
|
@apply bg-popover text-popover-foreground ring-foreground/10 min-w-48 gap-0 overflow-x-hidden overflow-y-auto rounded-none p-1.5 shadow-md ring-1 duration-100;
|
|
}
|
|
|
|
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) {
|
|
@apply gap-2.5 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase focus-visible:bg-accent focus-visible:text-accent-foreground [&_svg:not([class*='size-'])]:size-3.5;
|
|
}
|
|
|
|
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']).active {
|
|
@apply bg-muted text-foreground;
|
|
}
|
|
|
|
.dropdown-menu [data-variant='destructive'] {
|
|
@apply text-destructive;
|
|
}
|
|
|
|
.dropdown-menu [data-variant='destructive']:is(:focus-visible, .active) {
|
|
@apply bg-destructive/10 text-destructive dark:bg-destructive/20;
|
|
}
|
|
|
|
.dropdown-menu [data-variant='destructive'] svg {
|
|
@apply text-destructive;
|
|
}
|
|
|
|
.dropdown-menu :is([role='menuitemcheckbox'], [role='menuitemradio']) {
|
|
@apply py-2 pe-8 ps-3;
|
|
}
|
|
|
|
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'])[data-inset],
|
|
.dropdown-menu [role='heading'][data-inset] {
|
|
@apply ps-9.5;
|
|
}
|
|
|
|
.dropdown-menu [data-indicator] {
|
|
@apply absolute end-2 flex items-center justify-center;
|
|
}
|
|
|
|
.dropdown-menu [role='heading'] {
|
|
@apply text-muted-foreground px-3 py-2 text-xs font-semibold tracking-wider uppercase;
|
|
}
|
|
|
|
.dropdown-menu [role='separator'] {
|
|
@apply bg-border/50 -mx-1.5 my-1.5 h-px;
|
|
}
|
|
|
|
.dropdown-menu :is([data-shortcut], kbd:last-child, .kbd:last-child) {
|
|
@apply text-muted-foreground font-sans text-xs tracking-widest;
|
|
}
|
|
|
|
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child, .kbd:last-child) {
|
|
@apply text-accent-foreground;
|
|
}
|
|
|
|
/* Popover */
|
|
[data-popover] {
|
|
@apply bg-popover text-popover-foreground ring-foreground/10 flex flex-col gap-4 rounded-none p-4 text-sm shadow-md ring-1 duration-100;
|
|
}
|
|
.popover > [data-popover] > header,
|
|
.popover > [data-popover] > [data-header] {
|
|
@apply flex flex-col gap-1 text-sm;
|
|
}
|
|
|
|
.popover > [data-popover] > header > :is(h1, h2, h3, h4, h5, h6),
|
|
.popover > [data-popover] > :is(h1, h2, h3, h4, h5, h6, [data-title]) {
|
|
@apply text-xs font-semibold uppercase;
|
|
}
|
|
|
|
.popover > [data-popover] > header > p,
|
|
.popover > [data-popover] > [data-description] {
|
|
@apply text-muted-foreground text-sm leading-relaxed mt-0.5;
|
|
}
|
|
|
|
/* Card */
|
|
.card {
|
|
@apply bg-card text-card-foreground ring-foreground/5 overflow-hidden text-sm shadow-sm ring-1 has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-none [&>img:last-child]:rounded-none;
|
|
}
|
|
|
|
.card {
|
|
@apply gap-8 py-8;
|
|
}
|
|
|
|
.card[data-size='sm'] {
|
|
@apply gap-5 py-5;
|
|
}
|
|
|
|
.card > header {
|
|
@apply gap-1.5 rounded-none px-8 [.border-b]:pb-8;
|
|
}
|
|
|
|
.card[data-size='sm'] > header {
|
|
@apply px-5 [.border-b]:pb-5;
|
|
}
|
|
|
|
.card > header > :is(h2, h3, [data-title], .card-title) {
|
|
@apply text-lg font-semibold tracking-wider uppercase;
|
|
}
|
|
|
|
.card > header > :is(p, [data-description], .card-description) {
|
|
@apply text-muted-foreground text-sm leading-relaxed;
|
|
}
|
|
|
|
.card > section {
|
|
@apply px-8;
|
|
}
|
|
|
|
.card[data-size='sm'] > section {
|
|
@apply px-5;
|
|
}
|
|
|
|
.card > footer {
|
|
@apply px-8 [.border-t]:pt-8;
|
|
}
|
|
|
|
.card[data-size='sm'] > footer {
|
|
@apply px-5 [.border-t]:pt-5;
|
|
}
|
|
|
|
/* Chart */
|
|
.chart {
|
|
--chart-bar-radius: 0;
|
|
}
|
|
|
|
.chart-tooltip {
|
|
@apply border-border/50 bg-background text-foreground gap-1.5 rounded-none border px-2.5 py-1.5 text-xs shadow-xl;
|
|
}
|
|
|
|
.chart-tooltip-title {
|
|
@apply font-medium;
|
|
}
|
|
|
|
.chart-legend-item {
|
|
@apply text-foreground;
|
|
}
|
|
|
|
.chart-legend-item[aria-pressed='false'] {
|
|
@apply text-muted-foreground;
|
|
}
|
|
|
|
/* Checkbox */
|
|
.field > input[type='checkbox']:not([role='switch']),
|
|
.input[type='checkbox']:not([role='switch']) {
|
|
@apply border-input bg-transparent checked:bg-primary checked:text-primary-foreground dark:checked:bg-primary checked:border-primary aria-invalid:checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4.5 items-center justify-center rounded-none border transition-shadow in-data-[disabled=true]:opacity-50 focus-visible:ring-2 aria-invalid:ring-2;
|
|
}
|
|
|
|
:is(.field > input[type='checkbox']:not([role='switch']), .input[type='checkbox']:not([role='switch'])):checked:after {
|
|
@apply size-3.5;
|
|
}
|
|
|
|
/* Radio */
|
|
[role='radiogroup'] {
|
|
@apply grid gap-3;
|
|
}
|
|
|
|
.field > input[type='radio'],
|
|
.input[type='radio'] {
|
|
@apply border-input bg-transparent checked:border-foreground aria-invalid:checked:border-foreground aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4.5 rounded-full border focus-visible:ring-2 aria-invalid:ring-2;
|
|
}
|
|
|
|
:is(.field > input[type='radio'], .input[type='radio']):checked:before {
|
|
@apply bg-foreground size-2;
|
|
}
|
|
|
|
/* Switch */
|
|
.field > input[type='checkbox'][role='switch'],
|
|
.input[type='checkbox'][role='switch'] {
|
|
@apply checked:bg-primary not-checked:bg-input checked:border-primary border not-checked:border-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-none focus-visible:ring-2 aria-invalid:ring-2;
|
|
}
|
|
|
|
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not([data-size='sm']) {
|
|
@apply h-4.5 w-8.25;
|
|
}
|
|
|
|
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch'])[data-size='sm'] {
|
|
@apply h-3.5 w-6.25;
|
|
}
|
|
|
|
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):before {
|
|
@apply bg-background;
|
|
}
|
|
|
|
.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before {
|
|
@apply bg-foreground;
|
|
}
|
|
|
|
.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before {
|
|
@apply bg-primary-foreground;
|
|
}
|
|
|
|
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not([data-size='sm']):before {
|
|
@apply size-3.5;
|
|
}
|
|
|
|
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch'])[data-size='sm']:before {
|
|
@apply size-2.5;
|
|
}
|
|
|
|
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:not([data-size='sm']):before {
|
|
@apply translate-x-[calc(100%+2px)];
|
|
}
|
|
|
|
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked[data-size='sm']:before {
|
|
@apply translate-x-[calc(100%+2px)];
|
|
}
|
|
|
|
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):dir(rtl):checked:not([data-size='sm']):before {
|
|
@apply -translate-x-[calc(100%+2px)];
|
|
}
|
|
|
|
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):dir(rtl):checked[data-size='sm']:before {
|
|
@apply -translate-x-[calc(100%+2px)];
|
|
}
|
|
|
|
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before {
|
|
@apply translate-x-0.25;
|
|
}
|
|
|
|
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):dir(rtl):not(:checked):before {
|
|
@apply -translate-x-0.25;
|
|
}
|
|
|
|
|
|
/* Field */
|
|
.fieldset {
|
|
@apply gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3;
|
|
}
|
|
|
|
.fieldset > legend {
|
|
@apply mb-3 font-semibold uppercase data-[variant=label]:text-xs data-[variant=legend]:text-xs;
|
|
}
|
|
|
|
.fieldset > :is([role='group'], [role='radiogroup']):not(.field),
|
|
.field > :is(fieldset, [role='group'], [role='radiogroup']):not(.field) {
|
|
@apply gap-10;
|
|
|
|
&[role='radiogroup'],
|
|
&:has(> .field > input[type='checkbox']:not([role='switch'])),
|
|
&:has(> .field > input[type='radio']),
|
|
&[data-slot='checkbox-group'],
|
|
&[data-slot='radio-group'] {
|
|
@apply gap-3;
|
|
}
|
|
}
|
|
|
|
:is(.fieldset, .field) > :is([role='group'], [role='radiogroup']):not(.field) > :is([role='group'], [role='radiogroup']):not(.field),
|
|
.field > fieldset:not(.field) > :is([role='group'], [role='radiogroup']):not(.field) {
|
|
@apply gap-4;
|
|
}
|
|
|
|
.field {
|
|
@apply data-invalid:text-destructive data-[invalid=true]:text-destructive gap-3;
|
|
}
|
|
|
|
.field > section {
|
|
@apply gap-1;
|
|
}
|
|
|
|
.field > label,
|
|
.field > section > label,
|
|
label:has(> .field) {
|
|
@apply has-[:checked]:bg-primary/5 has-[:checked]:border-primary/30 dark:has-[:checked]:border-primary/20 dark:has-[:checked]:bg-primary/10 gap-2 in-data-[disabled=true]:opacity-50 leading-relaxed;
|
|
}
|
|
|
|
.field > label:has(input[type='radio']),
|
|
.field > label:has(input[type='checkbox']),
|
|
.field > label:has(input[role='switch']),
|
|
.field > label:has(> .field),
|
|
label:has(> .field) {
|
|
@apply rounded-none border;
|
|
}
|
|
|
|
.field > label:has(input[type='radio']),
|
|
.field > label:has(input[type='checkbox']),
|
|
.field > label:has(input[role='switch']) {
|
|
@apply p-4;
|
|
}
|
|
|
|
:is(.field > label, label:has(> .field)) > .field {
|
|
@apply p-4;
|
|
}
|
|
.field h2,
|
|
.field h3 {
|
|
@apply gap-2 in-data-[disabled=true]:opacity-50 leading-normal font-semibold uppercase text-xs;
|
|
}
|
|
|
|
.fieldset legend + p,
|
|
.field > p,
|
|
.field section > p {
|
|
@apply text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5 normal-case tracking-normal;
|
|
}
|
|
|
|
.fieldset > legend[data-variant='label'] {
|
|
@apply mb-0;
|
|
}
|
|
|
|
.fieldset > legend:not([data-variant]) + p,
|
|
.fieldset > legend[data-variant='legend'] + p {
|
|
@apply -mt-1.5;
|
|
}
|
|
|
|
.field-separator {
|
|
@apply -my-2 h-5 text-sm in-data-[variant=outline]:-mb-2;
|
|
}
|
|
|
|
.field-separator > span {
|
|
@apply text-muted-foreground px-2;
|
|
}
|
|
|
|
.field [role="alert"] {
|
|
@apply text-destructive text-sm;
|
|
}
|
|
|
|
/* Input Group */
|
|
.input-group {
|
|
@apply h-10 has-[>textarea]:h-auto rounded-none border border-transparent border-b-input bg-transparent transition-[color,border-color] focus-within:border-b-ring has-[[aria-invalid=true]]:border-b-destructive has-[>textarea]:rounded-none dark:has-[[aria-invalid=true]]:border-b-destructive/50;
|
|
}
|
|
|
|
|
|
.input-group:has(> :is(input, textarea, select, [data-control]):disabled) {
|
|
@apply opacity-50;
|
|
}
|
|
.input-group > :is(input, select, [data-control]) {
|
|
@apply px-0 py-1 text-sm;
|
|
}
|
|
|
|
.input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
|
|
@apply ps-2;
|
|
}
|
|
|
|
.input-group:not([data-orientation='vertical']):has(> :is([data-align='end'], [data-align='inline-end'])) > :is(input, select, [data-control]) {
|
|
@apply pe-2;
|
|
}
|
|
|
|
.input-group > textarea {
|
|
@apply px-0 py-2.5 text-sm;
|
|
}
|
|
|
|
.input-group > :is(span, [role='group'], header, footer),
|
|
.input-group > :is(svg, kbd, .popover, .dropdown-menu) {
|
|
@apply gap-2 py-2 text-sm font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-3.5;
|
|
}
|
|
|
|
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> button) {
|
|
@apply -ms-1;
|
|
}
|
|
|
|
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> button) {
|
|
@apply -me-1;
|
|
}
|
|
|
|
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> kbd) {
|
|
@apply -ms-0.5;
|
|
}
|
|
|
|
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> kbd) {
|
|
@apply -me-0.5;
|
|
}
|
|
.input-group[data-orientation='vertical'] > :is(header, footer, [role='group'], [data-align]) {
|
|
@apply px-0;
|
|
}
|
|
|
|
.input-group > [data-align='block-start'] {
|
|
@apply px-0 pt-2;
|
|
}
|
|
|
|
.input-group > [data-align='block-end'] {
|
|
@apply px-0 pb-2;
|
|
}
|
|
|
|
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']) {
|
|
@apply px-0 pt-3;
|
|
}
|
|
|
|
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']) {
|
|
@apply px-0 pb-3;
|
|
}
|
|
|
|
.input-group[data-orientation='vertical']:has(> input) > :is(header[data-align='start'], [data-align='block-start']) {
|
|
@apply pt-3.5;
|
|
}
|
|
|
|
.input-group[data-orientation='vertical']:has(> input) > :is(footer[data-align='end'], [data-align='block-end']) {
|
|
@apply pb-3.5;
|
|
}
|
|
|
|
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']).border-b {
|
|
@apply pb-3.5;
|
|
}
|
|
|
|
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']).border-t {
|
|
@apply pt-3.5;
|
|
}
|
|
|
|
|
|
.input-group > :is(kbd, span > kbd, [role='group'] > kbd, header > kbd, footer > kbd) {
|
|
@apply rounded-none bg-muted-foreground/10 px-1.5;
|
|
}
|
|
|
|
.input-group > :is(button, [role='group'] > button, header > button, footer > button) {
|
|
@apply gap-2 rounded-none text-sm shadow-none [&>svg:not([class*='size-'])]:size-3.5;
|
|
}
|
|
|
|
|
|
.input-group > :is(button, [role='group'] > button, header > button, footer > button):has(> svg):not(:has(> :not(svg))) {
|
|
@apply size-6 rounded-none p-0 text-xs;
|
|
}
|
|
|
|
/* Empty */
|
|
.empty {
|
|
@apply gap-4 border-dashed p-12;
|
|
}
|
|
|
|
.empty > header {
|
|
@apply gap-2;
|
|
}
|
|
|
|
.empty figure {
|
|
@apply mb-2;
|
|
}
|
|
|
|
.empty figure:has(> svg:only-child) {
|
|
@apply bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-none [&_svg:not([class*='size-'])]:size-5;
|
|
}
|
|
|
|
.empty :is(h2, h3, h4) {
|
|
@apply text-lg font-semibold tracking-wider uppercase;
|
|
}
|
|
|
|
.empty > header > p {
|
|
@apply text-muted-foreground mt-0.5 text-sm/relaxed;
|
|
}
|
|
|
|
.empty > :is(section, footer) {
|
|
@apply gap-4 text-sm;
|
|
}
|
|
|
|
/* Item */
|
|
.item {
|
|
@apply rounded-none border text-sm;
|
|
}
|
|
|
|
.item:not([data-variant]),
|
|
.item[data-variant='default'] {
|
|
@apply border-transparent;
|
|
}
|
|
|
|
.item[data-variant='outline'] {
|
|
@apply border-border;
|
|
}
|
|
|
|
.item[data-variant='muted'] {
|
|
@apply bg-muted/50 border-transparent;
|
|
}
|
|
|
|
.item:not([data-size]),
|
|
.item[data-size='default'] {
|
|
@apply gap-3.5 px-4 py-3.5;
|
|
}
|
|
|
|
.item[data-size='sm'] {
|
|
@apply gap-3.5 px-3.5 py-3;
|
|
}
|
|
|
|
.item[data-size='xs'] {
|
|
@apply gap-2.5 px-3 py-2.5;
|
|
}
|
|
|
|
.item > figure {
|
|
@apply gap-2;
|
|
}
|
|
|
|
.item:has(p) > figure {
|
|
@apply translate-y-0.5 self-start;
|
|
}
|
|
|
|
.item > figure:has(> svg:only-child) {
|
|
@apply [&_svg:not([class*='size-'])]:size-4;
|
|
}
|
|
|
|
.item > figure:has(> img) {
|
|
@apply size-10 overflow-hidden rounded-none;
|
|
}
|
|
|
|
.item[data-size='sm'] > figure:has(> img) {
|
|
@apply size-8;
|
|
}
|
|
|
|
.item[data-size='xs'] > figure:has(> img) {
|
|
@apply size-6 rounded-none;
|
|
}
|
|
|
|
.item > section {
|
|
@apply gap-1;
|
|
}
|
|
|
|
.item[data-size='xs'] > section {
|
|
@apply gap-0.5;
|
|
}
|
|
|
|
.item :is(h2, h3, h4) {
|
|
@apply gap-2 text-xs leading-snug font-semibold uppercase underline-offset-4;
|
|
}
|
|
|
|
.item p {
|
|
@apply text-sm leading-relaxed;
|
|
}
|
|
|
|
.item[data-size='xs'] p {
|
|
@apply text-sm leading-relaxed;
|
|
}
|
|
|
|
.item > aside,
|
|
.item > :is(header, footer) {
|
|
@apply gap-2;
|
|
}
|
|
|
|
.item-group {
|
|
@apply gap-4;
|
|
}
|
|
|
|
.item-group:has(> .item[data-size='sm']) {
|
|
@apply gap-2.5;
|
|
}
|
|
|
|
.item-group:has(> .item[data-size='xs']) {
|
|
@apply gap-2;
|
|
}
|
|
|
|
.item-group > hr {
|
|
@apply my-2;
|
|
}
|
|
|
|
/* Kbd */
|
|
.kbd {
|
|
@apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5.5 w-fit min-w-5.5 gap-1 rounded-none px-1.5 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
|
|
}
|
|
|
|
/* Label */
|
|
.field > label,
|
|
.label {
|
|
@apply gap-2 font-semibold leading-relaxed in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 uppercase text-xs tracking-wide;
|
|
}
|
|
|
|
.field > section > label {
|
|
@apply gap-2 font-semibold leading-relaxed in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 uppercase text-xs tracking-wide;
|
|
}
|
|
|
|
:is(.field > label, .field > section > label, .label):has(input[type='checkbox']),
|
|
:is(.field > label, .field > section > label, .label):has(input[type='radio']),
|
|
:is(.field > label, .field > section > label, .label):has(input[role='switch']),
|
|
:is(input[type='checkbox'], input[type='radio'], input[role='switch']) + :is(.field > label, .field > section > label, .label) {
|
|
@apply text-sm font-normal normal-case tracking-normal;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar nav {
|
|
@apply bg-sidebar text-sidebar-foreground;
|
|
}
|
|
|
|
.sidebar nav > header,
|
|
.sidebar nav > footer {
|
|
@apply gap-2 p-2 [--radius:0];
|
|
}
|
|
|
|
.sidebar nav > section {
|
|
@apply gap-2 [--radius:0];
|
|
}
|
|
|
|
.sidebar nav [role=separator] {
|
|
@apply border-sidebar-border mx-2;
|
|
}
|
|
|
|
.sidebar nav > section > [role=group] {
|
|
@apply p-2;
|
|
}
|
|
|
|
.sidebar nav h3 {
|
|
@apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-3 text-xs font-semibold uppercase tracking-wider focus-visible:ring-2 [&>svg]:size-3.5 transition-[margin,opacity] duration-200 ease-linear;
|
|
}
|
|
|
|
.sidebar nav > section > [role=group] > ul {
|
|
@apply gap-0.5;
|
|
}
|
|
|
|
.sidebar nav > section > [role=group] {
|
|
@apply text-sm;
|
|
}
|
|
|
|
.sidebar nav li > :is(a, button),
|
|
.sidebar nav li > details > summary {
|
|
@apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-none px-3 py-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-3.5;
|
|
}
|
|
|
|
.sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
|
|
.sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
|
|
@apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
|
|
}
|
|
|
|
.sidebar nav li > :is(a, button):not([data-variant]),
|
|
.sidebar nav li > details > summary:not([data-variant]),
|
|
.sidebar nav li > :is(a, button)[data-variant=default],
|
|
.sidebar nav li > details > summary[data-variant=default] {
|
|
@apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
|
}
|
|
|
|
.sidebar nav li > :is(a, button)[data-variant=outline],
|
|
.sidebar nav li > details > summary[data-variant=outline] {
|
|
@apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
|
}
|
|
|
|
.sidebar nav li > :is(a, button):not([data-size]),
|
|
.sidebar nav li > details > summary:not([data-size]),
|
|
.sidebar nav li > :is(a, button)[data-size=default],
|
|
.sidebar nav li > details > summary[data-size=default] {
|
|
@apply h-9 text-sm;
|
|
}
|
|
|
|
.sidebar nav li > :is(a, button)[data-size=sm],
|
|
.sidebar nav li > details > summary[data-size=sm] {
|
|
@apply h-8 text-xs;
|
|
}
|
|
|
|
.sidebar nav li > :is(a, button)[data-size=lg],
|
|
.sidebar nav li > details > summary[data-size=lg] {
|
|
@apply h-14 px-3 text-sm;
|
|
}
|
|
|
|
.sidebar nav li > details > summary::after {
|
|
@apply size-3.5;
|
|
}
|
|
|
|
.sidebar nav li > details::details-content {
|
|
@apply px-3.5;
|
|
}
|
|
|
|
.sidebar nav ul ul {
|
|
@apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
|
}
|
|
|
|
.sidebar nav ul ul > li > :is(a, button),
|
|
.sidebar nav ul ul > li > details > summary {
|
|
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-3 text-sm focus-visible:ring-2 [&>svg]:size-3.5;
|
|
}
|
|
/* Progress */
|
|
.progress {
|
|
@apply bg-muted h-0.5 rounded-none;
|
|
}
|
|
|
|
.progress > span {
|
|
@apply bg-primary;
|
|
}
|
|
|
|
/* Skeleton */
|
|
.skeleton {
|
|
@apply bg-muted;
|
|
}
|
|
|
|
/* Table */
|
|
.table-container {
|
|
@apply relative w-full overflow-x-auto;
|
|
}
|
|
|
|
.table {
|
|
@apply w-full caption-bottom text-sm;
|
|
}
|
|
|
|
.table thead {
|
|
@apply [&_tr]:border-b;
|
|
}
|
|
|
|
.table tbody {
|
|
@apply [&_tr:last-child]:border-0;
|
|
}
|
|
|
|
.table tfoot {
|
|
@apply bg-muted/50 border-t font-medium [&>tr]:last:border-b-0;
|
|
}
|
|
|
|
.table tr {
|
|
@apply hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors;
|
|
}
|
|
|
|
.table th {
|
|
@apply text-muted-foreground h-12 px-3 text-start align-middle text-xs font-medium uppercase tracking-wider whitespace-nowrap [&:has([role=checkbox])]:pe-0;
|
|
}
|
|
|
|
.table td {
|
|
@apply p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0;
|
|
}
|
|
|
|
.table caption {
|
|
@apply text-muted-foreground mt-4 text-sm;
|
|
}
|
|
|
|
|
|
/* Tooltip */
|
|
[data-tooltip]::before {
|
|
@apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-none px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-none;
|
|
}
|
|
|
|
[data-tooltip][data-arrow]::after {
|
|
@apply bg-foreground absolute z-[60] size-2.5 rotate-45 rounded-none;
|
|
}
|
|
|
|
/* Toast */
|
|
.toast-content {
|
|
@apply bg-popover text-popover-foreground border shadow-lg rounded-none!;
|
|
}
|
|
|
|
/* Slider */
|
|
.field > input[type='range'],
|
|
.input[type='range'] {
|
|
@apply h-5;
|
|
--slider-track-height: 0.125rem;
|
|
--slider-thumb-size: 0.75rem;
|
|
}
|
|
|
|
:is(.field > input[type='range'], .input[type='range'])::-webkit-slider-runnable-track {
|
|
@apply bg-input/50 h-0.5;
|
|
}
|
|
|
|
:is(.field > input[type='range'], .input[type='range'])::-moz-range-track {
|
|
@apply bg-input/50 h-0.5;
|
|
}
|
|
|
|
:is(.field > input[type='range'], .input[type='range'])::-ms-track {
|
|
@apply bg-input/50 h-0.5;
|
|
}
|
|
|
|
:is(.field > input[type='range'], .input[type='range'])::-ms-fill-lower,
|
|
:is(.field > input[type='range'], .input[type='range'])::-ms-fill-upper {
|
|
@apply rounded-[inherit];
|
|
}
|
|
|
|
:is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
|
|
@apply size-3 border-none bg-primary transition-colors hover:ring-2 hover:ring-ring/30 focus-visible:ring-2 focus-visible:ring-ring/30 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
|
|
}
|
|
|
|
:is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
|
|
@apply size-3 border-none bg-primary transition-colors hover:ring-2 hover:ring-ring/30 focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-hidden;
|
|
}
|
|
|
|
:is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
|
|
@apply size-3 border-none bg-primary transition-colors hover:ring-2 hover:ring-ring/30 focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-hidden;
|
|
}
|
|
|
|
}
|