mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-14 05:58:19 +00:00
Prepare 1.0.0-beta.3
This commit is contained in:
Ronan Berder
+150
-296
@@ -1,247 +1,64 @@
|
||||
/* Button */
|
||||
@layer components {
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn {
|
||||
@apply rounded-2xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-[3px] 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-4;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-outline,
|
||||
.btn-ghost,
|
||||
.btn-link,
|
||||
.btn-destructive {
|
||||
@apply h-8 gap-1.5 px-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2.5;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2.5;
|
||||
}
|
||||
.btn:not([data-size]),
|
||||
.btn[data-size='default'] {
|
||||
@apply h-8 gap-1.5 px-3 has-[[data-icon='inline-end']]:pr-2.5 has-[[data-icon='inline-start']]:pl-2.5;
|
||||
}
|
||||
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-xs-secondary,
|
||||
.btn-xs-outline,
|
||||
.btn-xs-ghost,
|
||||
.btn-xs-link,
|
||||
.btn-xs-destructive {
|
||||
@apply h-6 gap-1 px-2.5 text-xs [&_svg:not([class*='size-'])]:size-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
.btn[data-size='xs'] {
|
||||
@apply h-6 gap-1 px-2.5 text-xs [&_svg:not([class*='size-'])]:size-3 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
||||
}
|
||||
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-sm-secondary,
|
||||
.btn-sm-outline,
|
||||
.btn-sm-ghost,
|
||||
.btn-sm-link,
|
||||
.btn-sm-destructive {
|
||||
@apply h-7 gap-1 px-3;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-2;
|
||||
}
|
||||
.btn[data-size='sm'] {
|
||||
@apply h-7 gap-1 px-3 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
|
||||
}
|
||||
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-lg-secondary,
|
||||
.btn-lg-outline,
|
||||
.btn-lg-ghost,
|
||||
.btn-lg-link,
|
||||
.btn-lg-destructive {
|
||||
@apply h-9 gap-1.5 px-4;
|
||||
|
||||
&:has(> [data-icon=inline-start]) {
|
||||
@apply ps-3;
|
||||
}
|
||||
|
||||
&:has(> [data-icon=inline-end]) {
|
||||
@apply pe-3;
|
||||
}
|
||||
.btn[data-size='lg'] {
|
||||
@apply h-9 gap-1.5 px-4 has-[[data-icon='inline-end']]:pr-3 has-[[data-icon='inline-start']]:pl-3;
|
||||
}
|
||||
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-icon-secondary,
|
||||
.btn-icon-outline,
|
||||
.btn-icon-ghost,
|
||||
.btn-icon-link,
|
||||
.btn-icon-destructive {
|
||||
.btn[data-size='icon'] {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-xs-icon-link,
|
||||
.btn-xs-icon-destructive {
|
||||
.btn[data-size='icon-xs'] {
|
||||
@apply size-6 [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-sm-icon-link,
|
||||
.btn-sm-icon-destructive {
|
||||
.btn[data-size='icon-sm'] {
|
||||
@apply size-7;
|
||||
}
|
||||
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary,
|
||||
.btn-lg-icon-secondary,
|
||||
.btn-lg-icon-outline,
|
||||
.btn-lg-icon-ghost,
|
||||
.btn-lg-icon-link,
|
||||
.btn-lg-icon-destructive {
|
||||
.btn[data-size='icon-lg'] {
|
||||
@apply size-9;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-primary,
|
||||
.btn-xs,
|
||||
.btn-xs-primary,
|
||||
.btn-sm,
|
||||
.btn-sm-primary,
|
||||
.btn-lg,
|
||||
.btn-lg-primary,
|
||||
.btn-icon,
|
||||
.btn-icon-primary,
|
||||
.btn-xs-icon,
|
||||
.btn-xs-icon-primary,
|
||||
.btn-sm-icon,
|
||||
.btn-sm-icon-primary,
|
||||
.btn-lg-icon,
|
||||
.btn-lg-icon-primary {
|
||||
.btn:not([data-variant]),
|
||||
.btn[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-xs-secondary,
|
||||
.btn-sm-secondary,
|
||||
.btn-lg-secondary,
|
||||
.btn-icon-secondary,
|
||||
.btn-xs-icon-secondary,
|
||||
.btn-sm-icon-secondary,
|
||||
.btn-lg-icon-secondary {
|
||||
.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-outline,
|
||||
.btn-xs-outline,
|
||||
.btn-sm-outline,
|
||||
.btn-lg-outline,
|
||||
.btn-icon-outline,
|
||||
.btn-xs-icon-outline,
|
||||
.btn-sm-icon-outline,
|
||||
.btn-lg-icon-outline {
|
||||
.btn[data-variant='outline'] {
|
||||
@apply border-border bg-background hover:bg-muted hover:text-foreground dark:bg-transparent dark:hover:bg-input/30 aria-expanded:bg-muted aria-expanded:text-foreground;
|
||||
}
|
||||
|
||||
.btn-ghost,
|
||||
.btn-xs-ghost,
|
||||
.btn-sm-ghost,
|
||||
.btn-lg-ghost,
|
||||
.btn-icon-ghost,
|
||||
.btn-xs-icon-ghost,
|
||||
.btn-sm-icon-ghost,
|
||||
.btn-lg-icon-ghost {
|
||||
.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-link,
|
||||
.btn-xs-link,
|
||||
.btn-sm-link,
|
||||
.btn-lg-link,
|
||||
.btn-icon-link,
|
||||
.btn-xs-icon-link,
|
||||
.btn-sm-icon-link,
|
||||
.btn-lg-icon-link {
|
||||
.btn[data-variant='link'] {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
.btn-destructive,
|
||||
.btn-xs-destructive,
|
||||
.btn-sm-destructive,
|
||||
.btn-lg-destructive,
|
||||
.btn-icon-destructive,
|
||||
.btn-xs-icon-destructive,
|
||||
.btn-sm-icon-destructive,
|
||||
.btn-lg-icon-destructive {
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -250,8 +67,8 @@
|
||||
@apply has-[>.button-group]:gap-2;
|
||||
}
|
||||
|
||||
.button-group:has(> :is(.btn-outline, .btn-icon-outline, .btn-xs-outline, .btn-xs-icon-outline, .btn-sm-outline, .btn-sm-icon-outline, .btn-lg-outline, .btn-lg-icon-outline)),
|
||||
.button-group:has(> .select > button:is(.btn-outline, .btn-icon-outline, .btn-xs-outline, .btn-xs-icon-outline, .btn-sm-outline, .btn-sm-icon-outline, .btn-lg-outline, .btn-lg-icon-outline)) {
|
||||
.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;
|
||||
@@ -276,8 +93,7 @@
|
||||
@apply bg-muted gap-2 rounded-2xl border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.button-group > hr[role='separator'],
|
||||
.button-group-separator {
|
||||
.button-group > hr[role='separator'] {
|
||||
@apply bg-input;
|
||||
}
|
||||
|
||||
@@ -389,8 +205,7 @@
|
||||
}
|
||||
|
||||
/* Alert */
|
||||
.alert,
|
||||
.alert-destructive {
|
||||
.alert {
|
||||
@apply grid gap-0.5 rounded-2xl 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;
|
||||
}
|
||||
|
||||
@@ -398,35 +213,33 @@
|
||||
@apply bg-card text-card-foreground;
|
||||
}
|
||||
|
||||
.alert-destructive {
|
||||
.alert[data-variant='destructive'] {
|
||||
@apply text-destructive bg-card [&>svg]:text-current;
|
||||
}
|
||||
|
||||
.alert > :is(h2, h3, h4, h5, h6, strong, [data-title]),
|
||||
.alert-destructive > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.alert[data-variant='destructive'] > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
@apply font-medium;
|
||||
}
|
||||
|
||||
|
||||
:is(.alert, .alert-destructive):has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
|
||||
.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-destructive > section {
|
||||
.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-destructive > footer {
|
||||
.alert[data-variant='destructive'] > footer {
|
||||
@apply top-2.5 end-3;
|
||||
}
|
||||
/* Avatar */
|
||||
.avatar,
|
||||
.avatar-sm,
|
||||
.avatar-lg {
|
||||
.avatar {
|
||||
@apply rounded-full after:rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -434,29 +247,23 @@
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
.avatar[data-size='sm'] {
|
||||
@apply size-6;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
.avatar[data-size='lg'] {
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]),
|
||||
.avatar-sm > span:not([data-badge]),
|
||||
.avatar-lg > span:not([data-badge]) {
|
||||
.avatar > span:not([data-badge]) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > img,
|
||||
.avatar-sm > img,
|
||||
.avatar-lg > img {
|
||||
.avatar > img {
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge],
|
||||
.avatar-sm > [data-badge],
|
||||
.avatar-lg > [data-badge] {
|
||||
.avatar > [data-badge] {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -464,47 +271,41 @@
|
||||
@apply bg-muted text-muted-foreground size-8 rounded-full text-sm [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-sm) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='sm']) > [data-count] {
|
||||
@apply size-6 [&>svg]:size-3;
|
||||
}
|
||||
|
||||
.avatar-group:has(> .avatar-lg) > [data-count] {
|
||||
.avatar-group:has(> .avatar[data-size='lg']) > [data-count] {
|
||||
@apply size-10 [&>svg]:size-5;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.badge,
|
||||
.badge-primary,
|
||||
.badge-secondary,
|
||||
.badge-destructive,
|
||||
.badge-outline,
|
||||
.badge-ghost,
|
||||
.badge-link {
|
||||
@apply h-5 gap-1 rounded-2xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>svg]:size-3!;
|
||||
.badge {
|
||||
@apply h-5 gap-1 rounded-2xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3!;
|
||||
}
|
||||
|
||||
.badge,
|
||||
.badge-primary {
|
||||
.badge:not([data-variant]),
|
||||
.badge[data-variant='primary'] {
|
||||
@apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
.badge[data-variant='secondary'] {
|
||||
@apply bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80;
|
||||
}
|
||||
|
||||
.badge-outline {
|
||||
.badge[data-variant='outline'] {
|
||||
@apply border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground;
|
||||
}
|
||||
|
||||
.badge-destructive {
|
||||
.badge[data-variant='destructive'] {
|
||||
@apply bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20;
|
||||
}
|
||||
|
||||
.badge-ghost {
|
||||
.badge[data-variant='ghost'] {
|
||||
@apply hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50;
|
||||
}
|
||||
|
||||
.badge-link {
|
||||
.badge[data-variant='link'] {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
@@ -598,7 +399,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='group'] {
|
||||
@@ -658,7 +459,7 @@
|
||||
|
||||
*:not(select).select [role='option'].active,
|
||||
*:not(select).select [role='option']:focus-visible {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
*:not(select).select [role='group'] {
|
||||
@@ -716,7 +517,7 @@
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']).active {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
@apply bg-muted text-foreground;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-variant='destructive'] {
|
||||
@@ -752,11 +553,11 @@
|
||||
@apply bg-border/50 -mx-1 my-1 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-shortcut] {
|
||||
@apply text-muted-foreground text-xs tracking-widest;
|
||||
.dropdown-menu :is([data-shortcut], 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) [data-shortcut] {
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
|
||||
@apply text-accent-foreground;
|
||||
}
|
||||
|
||||
@@ -780,8 +581,7 @@
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.card,
|
||||
.card-sm {
|
||||
.card {
|
||||
@apply bg-card text-card-foreground ring-foreground/5 dark:ring-foreground/10 overflow-hidden rounded-[min(var(--radius-4xl),24px)] text-sm shadow-sm ring-1 has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-t-[min(var(--radius-4xl),24px)] [&>img:last-child]:rounded-b-[min(var(--radius-4xl),24px)];
|
||||
}
|
||||
|
||||
@@ -789,48 +589,47 @@
|
||||
@apply gap-5 py-5;
|
||||
}
|
||||
|
||||
.card-sm {
|
||||
.card[data-size='sm'] {
|
||||
@apply gap-4 py-4;
|
||||
}
|
||||
|
||||
.card > header,
|
||||
.card-sm > header {
|
||||
.card > header {
|
||||
@apply gap-1.5 rounded-t-[min(var(--radius-4xl),24px)] px-5 [.border-b]:pb-5;
|
||||
}
|
||||
|
||||
.card-sm > header {
|
||||
.card[data-size='sm'] > header {
|
||||
@apply px-4 [.border-b]:pb-4;
|
||||
}
|
||||
|
||||
.card > header > :is(h2, h3, [data-title], .card-title),
|
||||
.card-sm > header > :is(h2, h3, [data-title], .card-title) {
|
||||
.card > header > :is(h2, h3, [data-title], .card-title) {
|
||||
@apply text-base font-medium;
|
||||
}
|
||||
|
||||
.card > header > :is(p, [data-description], .card-description),
|
||||
.card-sm > header > :is(p, [data-description], .card-description) {
|
||||
.card > header > :is(p, [data-description], .card-description) {
|
||||
@apply text-muted-foreground text-sm;
|
||||
}
|
||||
|
||||
.card > section,
|
||||
.card-sm > section {
|
||||
.card > section {
|
||||
@apply px-5;
|
||||
}
|
||||
|
||||
.card-sm > section {
|
||||
.card[data-size='sm'] > section {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.card > footer,
|
||||
.card-sm > footer {
|
||||
.card > footer {
|
||||
@apply rounded-b-[min(var(--radius-4xl),24px)] px-5 [.border-t]:pt-5;
|
||||
}
|
||||
|
||||
.card-sm > footer {
|
||||
.card[data-size='sm'] > footer {
|
||||
@apply px-4 [.border-t]:pt-4;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.chart {
|
||||
--chart-bar-radius: 6px;
|
||||
}
|
||||
|
||||
.chart-tooltip {
|
||||
@apply border-border/50 bg-background text-foreground gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl;
|
||||
}
|
||||
@@ -923,8 +722,7 @@
|
||||
@apply gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3;
|
||||
}
|
||||
|
||||
.fieldset > legend,
|
||||
.field-legend {
|
||||
.fieldset > legend {
|
||||
@apply mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base;
|
||||
}
|
||||
|
||||
@@ -933,6 +731,8 @@
|
||||
@apply gap-6;
|
||||
|
||||
&[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;
|
||||
@@ -945,15 +745,15 @@
|
||||
}
|
||||
|
||||
.field {
|
||||
@apply data-[invalid=true]:text-destructive gap-3;
|
||||
@apply data-invalid:text-destructive data-[invalid=true]:text-destructive gap-3;
|
||||
}
|
||||
|
||||
.field > section,
|
||||
.field-content {
|
||||
.field > section {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
.field > label,
|
||||
.field > section > label,
|
||||
label:has(> .field) {
|
||||
@apply has-[:checked]:bg-input/30 gap-2 leading-snug in-data-[disabled=true]:opacity-50;
|
||||
}
|
||||
@@ -976,18 +776,25 @@
|
||||
@apply p-4;
|
||||
}
|
||||
.field h2,
|
||||
.field h3,
|
||||
.field-title {
|
||||
.field h3 {
|
||||
@apply gap-2 leading-snug text-sm font-medium in-data-[disabled=true]:opacity-50;
|
||||
}
|
||||
|
||||
.fieldset legend + p,
|
||||
.field > p,
|
||||
.field section > p,
|
||||
.field-description {
|
||||
.field section > p {
|
||||
@apply text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -996,8 +803,7 @@
|
||||
@apply text-muted-foreground px-2;
|
||||
}
|
||||
|
||||
.field [role="alert"],
|
||||
.field-error {
|
||||
.field [role="alert"] {
|
||||
@apply text-destructive text-sm;
|
||||
}
|
||||
|
||||
@@ -1010,16 +816,15 @@
|
||||
.input-group:has(> :is(input, textarea, select, [data-control]):disabled) {
|
||||
@apply opacity-50;
|
||||
}
|
||||
|
||||
.input-group > :is(input, select, [data-control]) {
|
||||
@apply px-2.5 py-1 text-sm;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='start']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
|
||||
@apply ps-1.5;
|
||||
}
|
||||
|
||||
.input-group:not([data-orientation='vertical']):has(> [data-align='end']) > :is(input, select, [data-control]) {
|
||||
.input-group:not([data-orientation='vertical']):has(> :is([data-align='end'], [data-align='inline-end'])) > :is(input, select, [data-control]) {
|
||||
@apply pe-1.5;
|
||||
}
|
||||
|
||||
@@ -1032,33 +837,74 @@
|
||||
@apply gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start'] {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']) {
|
||||
@apply ps-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end'] {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']) {
|
||||
@apply pe-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> button) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> button) {
|
||||
@apply -ms-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> button) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> button) {
|
||||
@apply -me-1;
|
||||
}
|
||||
|
||||
.input-group > [data-align='start']:has(> kbd) {
|
||||
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> kbd) {
|
||||
@apply -ms-0.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='end']:has(> kbd) {
|
||||
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> kbd) {
|
||||
@apply -me-0.5;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-start'] {
|
||||
@apply px-2.5 pt-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-end'] {
|
||||
@apply px-2.5 pb-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-start'].border-b {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group > [data-align='block-end'].border-t {
|
||||
@apply pt-2;
|
||||
}
|
||||
.input-group[data-orientation='vertical'] > :is(header, footer, [role='group'], [data-align]) {
|
||||
@apply px-2.5;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply px-2.5 pt-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply px-2.5 pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(header[data-align='start'], [data-align='block-start']) {
|
||||
@apply pt-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical']:has(> input) > :is(footer[data-align='end'], [data-align='block-end']) {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']).border-b {
|
||||
@apply pb-2;
|
||||
}
|
||||
|
||||
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']).border-t {
|
||||
@apply pt-2;
|
||||
}
|
||||
|
||||
|
||||
.input-group > :is(kbd, span > kbd, [role='group'] > kbd, header > kbd, footer > kbd) {
|
||||
@apply rounded-2xl bg-muted-foreground/10 px-1.5;
|
||||
}
|
||||
@@ -1093,7 +939,7 @@
|
||||
@apply text-lg font-medium tracking-tight;
|
||||
}
|
||||
|
||||
.empty p {
|
||||
.empty > header > p {
|
||||
@apply text-muted-foreground text-sm/relaxed;
|
||||
}
|
||||
|
||||
@@ -1144,15 +990,15 @@
|
||||
@apply [&_svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.item > figure:has(img) {
|
||||
.item > figure:has(> img) {
|
||||
@apply size-10 overflow-hidden rounded-xl;
|
||||
}
|
||||
|
||||
.item[data-size='sm'] > figure:has(img) {
|
||||
.item[data-size='sm'] > figure:has(> img) {
|
||||
@apply size-8;
|
||||
}
|
||||
|
||||
.item[data-size='xs'] > figure:has(img) {
|
||||
.item[data-size='xs'] > figure:has(> img) {
|
||||
@apply size-6 rounded-lg;
|
||||
}
|
||||
|
||||
@@ -1202,16 +1048,16 @@
|
||||
@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 w-fit min-w-5 gap-1 rounded-lg px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
|
||||
}
|
||||
|
||||
.kbd-group {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.field > label,
|
||||
.label {
|
||||
@apply gap-2 text-sm leading-none font-medium in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
|
||||
}
|
||||
|
||||
.field > section > label {
|
||||
@apply gap-2 text-sm leading-snug font-medium in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar nav {
|
||||
@apply bg-sidebar text-sidebar-foreground;
|
||||
@@ -1301,6 +1147,14 @@
|
||||
.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-xl px-3 text-sm focus-visible:ring-3 [&>svg]:size-4;
|
||||
}
|
||||
/* Progress */
|
||||
.progress {
|
||||
@apply bg-muted h-2 rounded-2xl;
|
||||
}
|
||||
|
||||
.progress > span {
|
||||
@apply bg-primary;
|
||||
}
|
||||
|
||||
/* Skeleton */
|
||||
.skeleton {
|
||||
|
||||
Reference in New Issue
Block a user