mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 13:18:22 +00:00
Prepare 1.0.0-beta.5
This commit is contained in:
Ronan Berder
@@ -50,7 +50,7 @@
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.269 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
/* Components */
|
||||
@import "./components/accordion.css";
|
||||
@import "./components/alert.css";
|
||||
@import "./components/avatar.css";
|
||||
@import "./components/badge.css";
|
||||
@import "./components/breadcrumb.css";
|
||||
@import "./components/button.css";
|
||||
@import "./components/button-group.css";
|
||||
@import "./components/card.css";
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
/* Accordion */
|
||||
@layer components {
|
||||
.accordion {
|
||||
@apply flex w-full flex-col;
|
||||
}
|
||||
|
||||
.accordion > details > summary {
|
||||
@apply relative flex w-full flex-1 cursor-pointer list-none items-start justify-between border border-transparent transition-all outline-none;
|
||||
}
|
||||
|
||||
.accordion > details > summary > svg:last-child {
|
||||
@apply pointer-events-none shrink-0 transition-transform;
|
||||
}
|
||||
|
||||
.accordion > details[open] > summary > svg:last-child {
|
||||
@apply rotate-180;
|
||||
}
|
||||
|
||||
.accordion > details[aria-disabled='true'] > summary,
|
||||
.accordion > details > summary[aria-disabled='true'] {
|
||||
@apply pointer-events-none opacity-50;
|
||||
}
|
||||
|
||||
.accordion > details > :not(summary) {
|
||||
@apply overflow-hidden;
|
||||
}
|
||||
}
|
||||
@@ -15,9 +15,21 @@
|
||||
.alert > section {
|
||||
@apply grid justify-items-start gap-1;
|
||||
|
||||
:where(p, ul, ol) {
|
||||
@apply m-0;
|
||||
}
|
||||
|
||||
:where(p, ul, ol):not(:last-child) {
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply list-inside list-disc;
|
||||
}
|
||||
|
||||
ol {
|
||||
@apply list-inside list-decimal;
|
||||
}
|
||||
}
|
||||
|
||||
.alert > footer {
|
||||
|
||||
@@ -8,27 +8,27 @@
|
||||
@apply absolute inset-0 aspect-square size-full rounded-[inherit] object-cover;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]) {
|
||||
.avatar > span:not(.avatar-badge) {
|
||||
@apply flex size-full items-center justify-center rounded-[inherit] text-sm;
|
||||
}
|
||||
|
||||
.avatar[data-size='sm'] > span:not([data-badge]) {
|
||||
.avatar[data-size='sm'] > span:not(.avatar-badge) {
|
||||
@apply text-xs;
|
||||
}
|
||||
|
||||
.avatar > [data-badge] {
|
||||
.avatar > .avatar-badge {
|
||||
@apply absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none;
|
||||
}
|
||||
|
||||
.avatar[data-size='sm'] > [data-badge] {
|
||||
.avatar[data-size='sm'] > .avatar-badge {
|
||||
@apply size-2 [&>svg]:hidden;
|
||||
}
|
||||
|
||||
.avatar > [data-badge] {
|
||||
.avatar > .avatar-badge {
|
||||
@apply size-2.5 [&>svg]:size-2;
|
||||
}
|
||||
|
||||
.avatar[data-size='lg'] > [data-badge] {
|
||||
.avatar[data-size='lg'] > .avatar-badge {
|
||||
@apply size-3 [&>svg]:size-2;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
/* Breadcrumb */
|
||||
@layer components {
|
||||
.breadcrumb > ol {
|
||||
@apply m-0 flex list-none flex-wrap items-center p-0 break-words;
|
||||
}
|
||||
|
||||
.breadcrumb li {
|
||||
@apply inline-flex items-center;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
@apply rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50;
|
||||
}
|
||||
|
||||
.breadcrumb [aria-current='page'] {
|
||||
@apply cursor-default;
|
||||
}
|
||||
|
||||
.breadcrumb li[aria-hidden='true'] {
|
||||
@apply select-none;
|
||||
}
|
||||
|
||||
.breadcrumb li > span[aria-hidden='true'] {
|
||||
@apply flex items-center justify-center;
|
||||
}
|
||||
|
||||
.breadcrumb [data-rtl-flip] {
|
||||
@apply rtl:rotate-180;
|
||||
}
|
||||
}
|
||||
@@ -15,6 +15,10 @@
|
||||
@apply col-start-2 row-span-2 row-start-1 self-start justify-self-end;
|
||||
}
|
||||
|
||||
> header > menu.card-action {
|
||||
@apply m-0 list-none p-0;
|
||||
}
|
||||
|
||||
> footer {
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
@@ -8,18 +8,39 @@
|
||||
@apply w-full min-w-0 outline-hidden placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
|
||||
}
|
||||
|
||||
.combobox .input-group input[role='combobox'],
|
||||
.combobox [data-popover] input[role='combobox'] {
|
||||
@apply min-w-0 outline-hidden placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
|
||||
}
|
||||
|
||||
.combobox > svg,
|
||||
.combobox-trigger-icon {
|
||||
@apply pointer-events-none absolute shrink-0;
|
||||
}
|
||||
|
||||
.combobox:has(> .combobox-chips) > .combobox-trigger-icon {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.combobox [data-clear] {
|
||||
@apply inline-flex size-6 shrink-0 cursor-default appearance-none items-center justify-center border-0 bg-transparent p-0 text-current disabled:pointer-events-none disabled:opacity-50;
|
||||
}
|
||||
|
||||
.combobox [data-clear][hidden] {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.combobox .input-group:has([data-clear]:not([hidden])) button[aria-haspopup='listbox'] {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.combobox [data-popover] {
|
||||
@apply isolate overflow-hidden;
|
||||
min-width: max(100%, 9rem);
|
||||
}
|
||||
|
||||
.combobox [role='listbox'] {
|
||||
@apply outline-hidden overflow-y-auto;
|
||||
@apply outline-hidden overflow-x-hidden overflow-y-auto;
|
||||
}
|
||||
|
||||
.combobox [role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
|
||||
@@ -73,6 +94,6 @@
|
||||
}
|
||||
|
||||
.combobox-chip-remove {
|
||||
@apply inline-flex items-center justify-center;
|
||||
@apply inline-flex shrink-0 items-center justify-center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
> * {
|
||||
> .command {
|
||||
@apply scale-100;
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
@apply opacity-0;
|
||||
}
|
||||
|
||||
> * {
|
||||
> .command {
|
||||
@apply scale-95;
|
||||
}
|
||||
}
|
||||
@@ -33,19 +33,19 @@
|
||||
@apply opacity-0 transition-all transition-discrete;
|
||||
}
|
||||
|
||||
> * {
|
||||
@apply fixed top-1/3 left-1/2 z-50 flex max-h-[min(640px,calc(100%_-_2rem))] w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 translate-y-0 scale-95 flex-col overflow-hidden transition-all sm:max-w-lg;
|
||||
> .command {
|
||||
@apply fixed top-1/3 left-1/2 z-50 flex max-h-[min(640px,calc(100%_-_2rem))] w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 translate-y-0 scale-95 flex-col overflow-hidden transition-all sm:max-w-sm;
|
||||
}
|
||||
|
||||
> * > :is(button, form[method='dialog']) {
|
||||
> .command > :is(button, form[method='dialog']) {
|
||||
@apply absolute;
|
||||
}
|
||||
|
||||
> * > :is(button, form[method='dialog'] > button) {
|
||||
> .command > :is(button, form[method='dialog'] > button) {
|
||||
@apply inline-flex items-center justify-center opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0;
|
||||
}
|
||||
|
||||
> * > :is(button, form[method='dialog'] > button) > svg:not([class*='size-']) {
|
||||
> .command > :is(button, form[method='dialog'] > button) > svg:not([class*='size-']) {
|
||||
@apply size-4;
|
||||
}
|
||||
}
|
||||
@@ -68,14 +68,20 @@
|
||||
|
||||
.command [role='menu'] {
|
||||
@apply overflow-x-hidden overflow-y-auto outline-hidden;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.command [role='menuitem'] {
|
||||
@apply aria-hidden:hidden relative flex w-full cursor-default items-center truncate outline-hidden select-none disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
|
||||
@apply aria-hidden:hidden relative flex w-full cursor-default items-center outline-hidden select-none disabled:pointer-events-none disabled:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
|
||||
}
|
||||
|
||||
.command [role='menuitem'].active {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
.command [role='menuitem'].active,
|
||||
.command [role='menuitem'][data-selected='true'] {
|
||||
@apply bg-muted text-foreground;
|
||||
}
|
||||
|
||||
.command [role='group'] {
|
||||
@@ -103,7 +109,8 @@
|
||||
}
|
||||
|
||||
.command [role='menuitem'][data-checked='true'] [data-indicator],
|
||||
.command [role='menuitem'][aria-selected='true'] [data-indicator] {
|
||||
.command [role='menuitem'][aria-selected='true'] [data-indicator],
|
||||
.command [role='menuitem'][data-selected='true'] [data-indicator] {
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
@@ -124,7 +131,7 @@
|
||||
}
|
||||
|
||||
.command:not([data-command-initialized]) [role='menuitem']:not([aria-disabled='true']):not(:disabled):hover {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
@apply bg-muted text-foreground;
|
||||
}
|
||||
|
||||
.command:has(> header input:not(:placeholder-shown)) [role='separator'] {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
/* Dialog */
|
||||
@layer components {
|
||||
.dialog {
|
||||
.dialog,
|
||||
.alert-dialog {
|
||||
@apply bg-transparent p-0 text-inherit opacity-0 transition-all transition-discrete backdrop:opacity-0 backdrop:transition-all backdrop:transition-discrete;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
@@ -24,7 +25,9 @@
|
||||
> * {
|
||||
@apply fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100%_-_2rem)] w-full -translate-x-1/2 -translate-y-1/2 scale-95 flex-col transition-all outline-hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
> * > header {
|
||||
@apply flex flex-col;
|
||||
}
|
||||
@@ -49,4 +52,30 @@
|
||||
@apply size-4;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dialog {
|
||||
> * > header {
|
||||
@apply grid grid-rows-[auto_1fr] place-items-center text-center sm:place-items-start sm:text-start;
|
||||
}
|
||||
|
||||
> * > header:has(> figure) {
|
||||
@apply grid-rows-[auto_auto_1fr] sm:grid-rows-[auto_1fr];
|
||||
}
|
||||
|
||||
> * > header > figure {
|
||||
@apply m-0 shrink-0 sm:row-span-2 [&_svg]:pointer-events-none [&_svg]:shrink-0;
|
||||
}
|
||||
|
||||
> * > header > figure:has(img) {
|
||||
@apply overflow-hidden [&_img]:size-full [&_img]:object-cover;
|
||||
}
|
||||
|
||||
> * > header:has(> figure) > :is(h2, p) {
|
||||
@apply sm:col-start-2;
|
||||
}
|
||||
|
||||
> * > footer {
|
||||
@apply flex flex-col-reverse sm:flex-row sm:justify-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
}
|
||||
|
||||
.dropdown-menu :is(kbd:last-child, .kbd:last-child):not([data-shortcut]) {
|
||||
@apply ms-8;
|
||||
@apply ps-8;
|
||||
}
|
||||
|
||||
.dropdown-menu [data-indicator] {
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
@layer theme, base, components, utilities;
|
||||
@import "tailwindcss" source("../pages");
|
||||
|
||||
.theme-neutral {
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
}
|
||||
|
||||
:root {
|
||||
--landing-demo-surface-radius: 0.375rem;
|
||||
--chart-bar-radius: 6px;
|
||||
}
|
||||
|
||||
[data-style-variant="nova"] {
|
||||
--landing-demo-surface-radius: 0.5rem;
|
||||
}
|
||||
|
||||
[data-style-variant="maia"],
|
||||
[data-style-variant="luma"],
|
||||
[data-style-variant="rhea"] {
|
||||
--landing-demo-surface-radius: 1rem;
|
||||
}
|
||||
|
||||
[data-style-variant="lyra"],
|
||||
[data-style-variant="sera"] {
|
||||
--landing-demo-surface-radius: 0;
|
||||
--chart-bar-radius: 0;
|
||||
}
|
||||
|
||||
.landing-demo-surface {
|
||||
border-radius: var(--landing-demo-surface-radius);
|
||||
}
|
||||
|
||||
.theme-neutral .card > footer,
|
||||
.theme-neutral hr {
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.landing-demo-chart-bar {
|
||||
border-start-start-radius: var(--chart-bar-radius);
|
||||
border-start-end-radius: var(--chart-bar-radius);
|
||||
}
|
||||
+98
-16
@@ -1,5 +1,26 @@
|
||||
/* Button */
|
||||
/* Accordion */
|
||||
@layer components {
|
||||
.accordion {
|
||||
@apply overflow-hidden rounded-2xl border;
|
||||
}
|
||||
|
||||
.accordion > details {
|
||||
@apply open:bg-muted/50 not-last:border-b;
|
||||
}
|
||||
|
||||
.accordion > details > summary {
|
||||
@apply gap-6 p-4 text-left text-sm font-medium hover:underline;
|
||||
}
|
||||
|
||||
.accordion > details > summary > svg:last-child {
|
||||
@apply text-muted-foreground ms-auto size-4;
|
||||
}
|
||||
|
||||
.accordion > details > :not(summary) {
|
||||
@apply px-4 pt-0 pb-4 text-sm;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.btn {
|
||||
@apply rounded-4xl 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;
|
||||
}
|
||||
@@ -255,7 +276,7 @@
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]) {
|
||||
.avatar > span:not(.avatar-badge) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -263,7 +284,7 @@
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge] {
|
||||
.avatar > .avatar-badge {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -309,17 +330,42 @@
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
/* Command */
|
||||
.command {
|
||||
@apply bg-popover text-popover-foreground rounded-4xl p-1;
|
||||
/* Breadcrumb */
|
||||
.breadcrumb > ol {
|
||||
@apply text-muted-foreground gap-1.5 text-sm sm:gap-2.5;
|
||||
}
|
||||
|
||||
.command-dialog > * {
|
||||
@apply rounded-4xl p-0;
|
||||
.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-4xl! p-1;
|
||||
}
|
||||
|
||||
.command-dialog > .command {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 rounded-4xl! shadow-xl ring-1 duration-100;
|
||||
}
|
||||
|
||||
.command > header {
|
||||
@apply m-1 mb-0 h-9 gap-2 rounded-3xl bg-input/50 px-3;
|
||||
@apply m-1 mb-0 h-9 gap-0 rounded-3xl bg-input/50 px-3;
|
||||
}
|
||||
|
||||
.command > header svg {
|
||||
@@ -327,7 +373,7 @@
|
||||
}
|
||||
|
||||
.command > header input {
|
||||
@apply h-full text-sm placeholder:text-muted-foreground;
|
||||
@apply ps-1.5 text-sm placeholder:text-muted-foreground;
|
||||
}
|
||||
|
||||
.command [role='menu'] {
|
||||
@@ -355,7 +401,7 @@
|
||||
}
|
||||
|
||||
.command [role='menuitem'].active {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.command [data-shortcut] {
|
||||
@@ -378,11 +424,15 @@
|
||||
}
|
||||
|
||||
.combobox [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-h-72 rounded-3xl p-1.5 shadow-lg ring-1 duration-100;
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-h-72 gap-0 rounded-3xl p-0 shadow-lg ring-1 duration-100;
|
||||
}
|
||||
|
||||
.combobox [role='listbox'] {
|
||||
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1.5 overflow-y-auto;
|
||||
@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 {
|
||||
@@ -399,7 +449,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='group'] {
|
||||
@@ -421,6 +471,14 @@
|
||||
.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-input/30 bg-input/50 shadow-none focus-within:border-inherit focus-within:ring-0;
|
||||
}
|
||||
|
||||
.combobox [data-popover] > input[role='combobox'] {
|
||||
@apply mb-1 w-full;
|
||||
}
|
||||
/* Select */
|
||||
*:not(select).select > button {
|
||||
@apply bg-input/50 border-transparent 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 h-9 data-[size=sm]:h-8 gap-1.5 rounded-3xl border px-3 py-2 text-sm transition-[color,box-shadow,background-color] focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4;
|
||||
@@ -473,10 +531,15 @@
|
||||
|
||||
/* Dialog */
|
||||
.dialog::backdrop,
|
||||
.alert-dialog::backdrop,
|
||||
.command-dialog::backdrop {
|
||||
@apply bg-black/30 backdrop-blur-sm duration-100;
|
||||
}
|
||||
|
||||
.alert-dialog > * {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-xs gap-6 rounded-4xl p-6 shadow-xl ring-1 duration-100 sm:max-w-md;
|
||||
}
|
||||
|
||||
.dialog > * {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm shadow-xl ring-1 duration-100 sm:max-w-md;
|
||||
}
|
||||
@@ -493,6 +556,15 @@
|
||||
@apply gap-1.5;
|
||||
}
|
||||
|
||||
.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-full [&>svg:not([class*='size-'])]:size-8;
|
||||
}
|
||||
|
||||
.alert-dialog > * > footer,
|
||||
.dialog > * > footer {
|
||||
@apply gap-2;
|
||||
}
|
||||
@@ -502,11 +574,21 @@
|
||||
@apply text-base leading-none font-medium;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > h2,
|
||||
.alert-dialog > * > [data-title] {
|
||||
@apply text-lg font-medium;
|
||||
}
|
||||
|
||||
.dialog > * > header > p,
|
||||
.dialog > * > [data-description] {
|
||||
@apply text-muted-foreground text-sm leading-normal [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > p,
|
||||
.alert-dialog > * > [data-description] {
|
||||
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu > [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 min-w-48 gap-0 overflow-x-hidden overflow-y-auto rounded-3xl p-1.5 shadow-lg ring-1 duration-100;
|
||||
@@ -553,11 +635,11 @@
|
||||
@apply bg-border/50 -mx-1.5 my-1.5 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child) {
|
||||
.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) {
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
+87
-13
@@ -1,5 +1,22 @@
|
||||
/* Button */
|
||||
/* Accordion */
|
||||
@layer components {
|
||||
.accordion > details {
|
||||
@apply not-last:border-b;
|
||||
}
|
||||
|
||||
.accordion > details > summary {
|
||||
@apply focus-visible:ring-ring/50 focus-visible:border-ring rounded-none py-2.5 text-left text-xs font-medium hover:underline focus-visible:ring-1;
|
||||
}
|
||||
|
||||
.accordion > details > summary > svg:last-child {
|
||||
@apply text-muted-foreground ms-auto size-4;
|
||||
}
|
||||
|
||||
.accordion > details > :not(summary) {
|
||||
@apply pt-0 pb-2.5 text-xs;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.btn {
|
||||
@apply rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[1px] aria-invalid:border-destructive aria-invalid:ring-[1px] 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;
|
||||
}
|
||||
@@ -247,7 +264,7 @@
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]) {
|
||||
.avatar > span:not(.avatar-badge) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -255,7 +272,7 @@
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge] {
|
||||
.avatar > .avatar-badge {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -301,17 +318,42 @@
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
/* Breadcrumb */
|
||||
.breadcrumb > ol {
|
||||
@apply text-muted-foreground gap-1.5 text-xs;
|
||||
}
|
||||
|
||||
.breadcrumb li {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
.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 > * {
|
||||
@apply rounded-none p-0;
|
||||
.command-dialog > .command {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 rounded-none ring-1 duration-100;
|
||||
}
|
||||
|
||||
.command > header {
|
||||
@apply h-8 gap-2 border-b bg-input/30 px-2;
|
||||
@apply h-8 gap-0 border-b bg-input/30 px-2;
|
||||
}
|
||||
|
||||
.command > header svg {
|
||||
@@ -319,7 +361,7 @@
|
||||
}
|
||||
|
||||
.command > header input {
|
||||
@apply h-full text-xs placeholder:text-muted-foreground;
|
||||
@apply ps-1.5 text-xs placeholder:text-muted-foreground;
|
||||
}
|
||||
|
||||
.command [role='menu'] {
|
||||
@@ -347,7 +389,7 @@
|
||||
}
|
||||
|
||||
.command [role='menuitem'].active {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.command [data-shortcut] {
|
||||
@@ -361,7 +403,7 @@
|
||||
|
||||
/* Combobox */
|
||||
.combobox > input[role='combobox'] {
|
||||
@apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 rounded-none border bg-transparent py-2 ps-2.5 pe-8 text-xs transition-colors focus-visible:ring-1 aria-invalid:ring-1;
|
||||
@apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-none border bg-transparent py-2 ps-2.5 pe-8 text-xs transition-colors focus-visible:ring-1 aria-invalid:ring-1;
|
||||
}
|
||||
|
||||
.combobox > svg,
|
||||
@@ -370,7 +412,7 @@
|
||||
}
|
||||
|
||||
.combobox [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 rounded-none shadow-md ring-1 duration-100;
|
||||
@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'] {
|
||||
@@ -391,7 +433,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='separator'] {
|
||||
@@ -409,6 +451,14 @@
|
||||
.combobox-chip-remove {
|
||||
@apply -ms-1 opacity-50 hover:opacity-100 [&_svg]:size-3.5;
|
||||
}
|
||||
|
||||
.combobox [data-popover] > .input-group {
|
||||
@apply m-1 mb-0 h-8 w-auto border-input/30 bg-input/30 shadow-none focus-within:border-inherit focus-within:ring-0;
|
||||
}
|
||||
|
||||
.combobox [data-popover] > input[role='combobox'] {
|
||||
@apply mb-1 w-full;
|
||||
}
|
||||
/* Select */
|
||||
*:not(select).select > button {
|
||||
@apply border-input dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 data-[size=sm]:h-7 gap-1.5 rounded-none data-[size=sm]:rounded-none border bg-transparent py-2 ps-2.5 pe-2 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4;
|
||||
@@ -461,10 +511,15 @@
|
||||
|
||||
/* Dialog */
|
||||
.dialog::backdrop,
|
||||
.alert-dialog::backdrop,
|
||||
.command-dialog::backdrop {
|
||||
@apply bg-black/10 backdrop-blur-xs duration-100;
|
||||
}
|
||||
|
||||
.alert-dialog > * {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-4 rounded-none p-4 ring-1 duration-100 sm:max-w-sm;
|
||||
}
|
||||
|
||||
.dialog > * {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm;
|
||||
}
|
||||
@@ -477,6 +532,15 @@
|
||||
@apply gap-1 text-start;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header {
|
||||
@apply gap-x-4 gap-y-1.5;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > figure {
|
||||
@apply bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-none [&>svg:not([class*='size-'])]:size-6;
|
||||
}
|
||||
|
||||
.alert-dialog > * > footer,
|
||||
.dialog > * > footer {
|
||||
@apply gap-2;
|
||||
}
|
||||
@@ -486,11 +550,21 @@
|
||||
@apply text-sm font-medium;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > h2,
|
||||
.alert-dialog > * > [data-title] {
|
||||
@apply text-sm font-medium;
|
||||
}
|
||||
|
||||
.dialog > * > header > p,
|
||||
.dialog > * > [data-description] {
|
||||
@apply text-muted-foreground text-xs/relaxed [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > p,
|
||||
.alert-dialog > * > [data-description] {
|
||||
@apply text-muted-foreground text-xs/relaxed text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu > [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 gap-0 overflow-x-hidden overflow-y-auto rounded-none p-0 shadow-md ring-1 duration-100;
|
||||
@@ -537,11 +611,11 @@
|
||||
@apply bg-border -mx-1 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child) {
|
||||
.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) {
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
+98
-16
@@ -1,5 +1,26 @@
|
||||
/* Button */
|
||||
/* Accordion */
|
||||
@layer components {
|
||||
.accordion {
|
||||
@apply overflow-hidden rounded-2xl border;
|
||||
}
|
||||
|
||||
.accordion > details {
|
||||
@apply open:bg-muted/50 not-last:border-b;
|
||||
}
|
||||
|
||||
.accordion > details > summary {
|
||||
@apply gap-6 p-4 text-left text-sm font-medium hover:underline;
|
||||
}
|
||||
|
||||
.accordion > details > summary > svg:last-child {
|
||||
@apply text-muted-foreground ms-auto size-4;
|
||||
}
|
||||
|
||||
.accordion > details > :not(summary) {
|
||||
@apply px-4 pt-0 pb-4 text-sm;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.btn {
|
||||
@apply rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 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;
|
||||
}
|
||||
@@ -247,7 +268,7 @@
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]) {
|
||||
.avatar > span:not(.avatar-badge) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -255,7 +276,7 @@
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge] {
|
||||
.avatar > .avatar-badge {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -301,17 +322,42 @@
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
/* Command */
|
||||
.command {
|
||||
@apply bg-popover text-popover-foreground rounded-4xl p-1;
|
||||
/* Breadcrumb */
|
||||
.breadcrumb > ol {
|
||||
@apply text-muted-foreground gap-1.5 text-sm sm:gap-2.5;
|
||||
}
|
||||
|
||||
.command-dialog > * {
|
||||
@apply rounded-4xl p-0;
|
||||
.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-4xl! p-1;
|
||||
}
|
||||
|
||||
.command-dialog > .command {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 rounded-4xl! ring-1 duration-100;
|
||||
}
|
||||
|
||||
.command > header {
|
||||
@apply m-1 mb-0 h-9 gap-2 rounded-3xl bg-input/30 px-3;
|
||||
@apply m-1 mb-0 h-9 gap-0 rounded-3xl bg-input/30 px-3;
|
||||
}
|
||||
|
||||
.command > header svg {
|
||||
@@ -319,7 +365,7 @@
|
||||
}
|
||||
|
||||
.command > header input {
|
||||
@apply h-full text-sm placeholder:text-muted-foreground;
|
||||
@apply ps-1.5 text-sm placeholder:text-muted-foreground;
|
||||
}
|
||||
|
||||
.command [role='menu'] {
|
||||
@@ -347,7 +393,7 @@
|
||||
}
|
||||
|
||||
.command [role='menuitem'].active {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.command [data-shortcut] {
|
||||
@@ -370,11 +416,15 @@
|
||||
}
|
||||
|
||||
.combobox [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 max-h-72 rounded-2xl p-1 shadow-2xl ring-1 duration-100;
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 max-h-72 gap-0 rounded-2xl p-0 shadow-2xl ring-1 duration-100;
|
||||
}
|
||||
|
||||
.combobox [role='listbox'] {
|
||||
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto;
|
||||
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -391,7 +441,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='group'] {
|
||||
@@ -413,6 +463,14 @@
|
||||
.combobox-chip-remove {
|
||||
@apply -ms-1 opacity-50 hover:opacity-100 [&_svg]:size-3.5;
|
||||
}
|
||||
|
||||
.combobox [data-popover] > .input-group {
|
||||
@apply m-1 mb-0 h-9 w-auto border-none bg-input/30 shadow-none focus-within:border-inherit focus-within:ring-0;
|
||||
}
|
||||
|
||||
.combobox [data-popover] > input[role='combobox'] {
|
||||
@apply mb-1 w-full;
|
||||
}
|
||||
/* Select */
|
||||
*:not(select).select > button {
|
||||
@apply border-input bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 data-[size=sm]:h-8 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4;
|
||||
@@ -465,10 +523,15 @@
|
||||
|
||||
/* Dialog */
|
||||
.dialog::backdrop,
|
||||
.alert-dialog::backdrop,
|
||||
.command-dialog::backdrop {
|
||||
@apply bg-black/80 backdrop-blur-xs duration-100;
|
||||
}
|
||||
|
||||
.alert-dialog > * {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 max-w-xs gap-6 rounded-4xl p-6 ring-1 duration-100 sm:max-w-md;
|
||||
}
|
||||
|
||||
.dialog > * {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm ring-1 duration-100 sm:max-w-md;
|
||||
}
|
||||
@@ -481,6 +544,15 @@
|
||||
@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-full [&>svg:not([class*='size-'])]:size-8;
|
||||
}
|
||||
|
||||
.alert-dialog > * > footer,
|
||||
.dialog > * > footer {
|
||||
@apply gap-2;
|
||||
}
|
||||
@@ -490,11 +562,21 @@
|
||||
@apply text-base leading-none font-medium;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > h2,
|
||||
.alert-dialog > * > [data-title] {
|
||||
@apply text-lg font-medium;
|
||||
}
|
||||
|
||||
.dialog > * > header > p,
|
||||
.dialog > * > [data-description] {
|
||||
@apply text-muted-foreground text-sm leading-normal [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > p,
|
||||
.alert-dialog > * > [data-description] {
|
||||
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu > [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 min-w-48 gap-0 overflow-x-hidden overflow-y-auto rounded-2xl p-1 shadow-2xl ring-1 duration-100;
|
||||
@@ -541,11 +623,11 @@
|
||||
@apply bg-border/50 -mx-1 my-1 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child) {
|
||||
.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) {
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
+98
-16
@@ -1,5 +1,26 @@
|
||||
/* Button */
|
||||
/* Accordion */
|
||||
@layer components {
|
||||
.accordion {
|
||||
@apply overflow-hidden rounded-md border;
|
||||
}
|
||||
|
||||
.accordion > details {
|
||||
@apply open:bg-muted/50 not-last:border-b;
|
||||
}
|
||||
|
||||
.accordion > details > summary {
|
||||
@apply gap-6 p-2 text-left text-xs/relaxed font-medium hover:underline;
|
||||
}
|
||||
|
||||
.accordion > details > summary > svg:last-child {
|
||||
@apply text-muted-foreground ms-auto size-4;
|
||||
}
|
||||
|
||||
.accordion > details > :not(summary) {
|
||||
@apply px-2 pt-0 pb-4 text-xs/relaxed;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.btn {
|
||||
@apply rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium 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-4;
|
||||
}
|
||||
@@ -247,7 +268,7 @@
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]) {
|
||||
.avatar > span:not(.avatar-badge) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -255,7 +276,7 @@
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge] {
|
||||
.avatar > .avatar-badge {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -301,17 +322,42 @@
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
/* Command */
|
||||
.command {
|
||||
@apply bg-popover text-popover-foreground rounded-xl p-1;
|
||||
/* Breadcrumb */
|
||||
.breadcrumb > ol {
|
||||
@apply text-muted-foreground gap-1.5 text-xs/relaxed;
|
||||
}
|
||||
|
||||
.command-dialog > * {
|
||||
@apply rounded-xl p-0;
|
||||
.breadcrumb li {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
.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-4 [&>svg]:size-3.5;
|
||||
}
|
||||
|
||||
/* Command */
|
||||
.command {
|
||||
@apply bg-popover text-popover-foreground rounded-xl! p-1;
|
||||
}
|
||||
|
||||
.command-dialog > .command {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 rounded-xl! ring-1 duration-100;
|
||||
}
|
||||
|
||||
.command > header {
|
||||
@apply m-1 mb-0 h-8 gap-2 rounded-lg bg-input/20 px-2 dark:bg-input/30;
|
||||
@apply m-1 mb-0 h-8 gap-0 rounded-lg bg-input/20 px-2 dark:bg-input/30;
|
||||
}
|
||||
|
||||
.command > header svg {
|
||||
@@ -319,7 +365,7 @@
|
||||
}
|
||||
|
||||
.command > header input {
|
||||
@apply h-full text-xs/relaxed placeholder:text-muted-foreground;
|
||||
@apply ps-1.5 text-xs/relaxed placeholder:text-muted-foreground;
|
||||
}
|
||||
|
||||
.command [role='menu'] {
|
||||
@@ -347,7 +393,7 @@
|
||||
}
|
||||
|
||||
.command [role='menuitem'].active {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.command [data-shortcut] {
|
||||
@@ -370,11 +416,15 @@
|
||||
}
|
||||
|
||||
.combobox [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 dark:bg-popover max-h-72 rounded-lg p-1 shadow-md ring-1 duration-100;
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 dark:bg-popover max-h-72 gap-0 rounded-lg p-0 shadow-md ring-1 duration-100;
|
||||
}
|
||||
|
||||
.combobox [role='listbox'] {
|
||||
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto;
|
||||
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -391,7 +441,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='group'] {
|
||||
@@ -413,6 +463,14 @@
|
||||
.combobox-chip-remove {
|
||||
@apply -ms-1 opacity-50 hover:opacity-100 [&_svg]:size-3;
|
||||
}
|
||||
|
||||
.combobox [data-popover] > .input-group {
|
||||
@apply m-1 mb-0 h-7 w-auto border-none bg-input/20 shadow-none focus-within:border-inherit focus-within:ring-0;
|
||||
}
|
||||
|
||||
.combobox [data-popover] > input[role='combobox'] {
|
||||
@apply mb-1 w-full;
|
||||
}
|
||||
/* Select */
|
||||
*:not(select).select > button {
|
||||
@apply border-input bg-input/20 dark:bg-input/30 dark:hover:bg-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 h-7 data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem] gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-2 aria-invalid:ring-2 [&_svg:not([class*='size-'])]:size-3.5;
|
||||
@@ -469,10 +527,15 @@
|
||||
|
||||
/* Dialog */
|
||||
.dialog::backdrop,
|
||||
.alert-dialog::backdrop,
|
||||
.command-dialog::backdrop {
|
||||
@apply bg-black/80 backdrop-blur-xs duration-100;
|
||||
}
|
||||
|
||||
.alert-dialog > * {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-3 rounded-xl p-4 ring-1 duration-100 sm:max-w-sm;
|
||||
}
|
||||
|
||||
.dialog > * {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm;
|
||||
}
|
||||
@@ -485,6 +548,15 @@
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header {
|
||||
@apply gap-x-4 gap-y-1;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > figure {
|
||||
@apply bg-muted mb-2 inline-flex size-8 items-center justify-center rounded-md [&>svg:not([class*='size-'])]:size-4;
|
||||
}
|
||||
|
||||
.alert-dialog > * > footer,
|
||||
.dialog > * > footer {
|
||||
@apply gap-2;
|
||||
}
|
||||
@@ -494,11 +566,21 @@
|
||||
@apply text-sm font-medium;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > h2,
|
||||
.alert-dialog > * > [data-title] {
|
||||
@apply text-sm font-medium;
|
||||
}
|
||||
|
||||
.dialog > * > header > p,
|
||||
.dialog > * > [data-description] {
|
||||
@apply text-muted-foreground text-xs/relaxed [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > p,
|
||||
.alert-dialog > * > [data-description] {
|
||||
@apply text-muted-foreground text-xs/relaxed text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu > [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 gap-0 overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100;
|
||||
@@ -545,11 +627,11 @@
|
||||
@apply bg-border/50 -mx-1 my-1 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child) {
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child, .kbd:last-child) {
|
||||
@apply text-muted-foreground font-sans text-[0.625rem] tracking-widest;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
+96
-18
@@ -1,5 +1,22 @@
|
||||
/* Button */
|
||||
/* Accordion */
|
||||
@layer components {
|
||||
.accordion > details {
|
||||
@apply not-last:border-b;
|
||||
}
|
||||
|
||||
.accordion > details > summary {
|
||||
@apply focus-visible:ring-ring/50 focus-visible:border-ring rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3;
|
||||
}
|
||||
|
||||
.accordion > details > summary > svg:last-child {
|
||||
@apply text-muted-foreground ms-auto size-4;
|
||||
}
|
||||
|
||||
.accordion > details > :not(summary) {
|
||||
@apply pt-0 pb-2.5 text-sm;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.btn {
|
||||
@apply rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 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;
|
||||
}
|
||||
@@ -247,7 +264,7 @@
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]) {
|
||||
.avatar > span:not(.avatar-badge) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -255,7 +272,7 @@
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge] {
|
||||
.avatar > .avatar-badge {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -301,17 +318,42 @@
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
/* Command */
|
||||
.command {
|
||||
@apply bg-popover text-popover-foreground rounded-xl p-1;
|
||||
/* Breadcrumb */
|
||||
.breadcrumb > ol {
|
||||
@apply text-muted-foreground gap-1.5 text-sm;
|
||||
}
|
||||
|
||||
.command-dialog > * {
|
||||
@apply rounded-xl p-0;
|
||||
.breadcrumb li {
|
||||
@apply gap-1;
|
||||
}
|
||||
|
||||
.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-xl! p-1;
|
||||
}
|
||||
|
||||
.command-dialog > .command {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 rounded-xl! ring-1 duration-100;
|
||||
}
|
||||
|
||||
.command > header {
|
||||
@apply m-1 mb-0 h-8 gap-2 rounded-lg border border-input/30 bg-input/30 px-2;
|
||||
@apply m-1 mb-0 h-8 gap-0 rounded-lg border border-input/30 bg-input/30 px-2;
|
||||
}
|
||||
|
||||
.command > header svg {
|
||||
@@ -319,7 +361,7 @@
|
||||
}
|
||||
|
||||
.command > header input {
|
||||
@apply h-full text-sm placeholder:text-muted-foreground;
|
||||
@apply ps-1.5 text-sm placeholder:text-muted-foreground;
|
||||
}
|
||||
|
||||
.command [role='menu'] {
|
||||
@@ -343,11 +385,11 @@
|
||||
}
|
||||
|
||||
.command [role='menuitem'] {
|
||||
@apply gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4;
|
||||
@apply gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 in-[.command-dialog]:rounded-lg;
|
||||
}
|
||||
|
||||
.command [role='menuitem'].active {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.command [data-shortcut] {
|
||||
@@ -361,7 +403,7 @@
|
||||
|
||||
/* Combobox */
|
||||
.combobox > input[role='combobox'] {
|
||||
@apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors focus-visible:ring-3 aria-invalid:ring-3;
|
||||
@apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors focus-visible:ring-3 aria-invalid:ring-3;
|
||||
}
|
||||
|
||||
.combobox > svg,
|
||||
@@ -370,11 +412,15 @@
|
||||
}
|
||||
|
||||
.combobox [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 rounded-lg p-1 shadow-md ring-1 duration-100;
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 gap-0 rounded-lg p-0 shadow-md ring-1 duration-100;
|
||||
}
|
||||
|
||||
.combobox [role='listbox'] {
|
||||
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto;
|
||||
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -391,7 +437,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='group'] {
|
||||
@@ -413,6 +459,14 @@
|
||||
.combobox-chip-remove {
|
||||
@apply -ms-1 opacity-50 hover:opacity-100 [&_svg]:size-3.5;
|
||||
}
|
||||
|
||||
.combobox [data-popover] > .input-group {
|
||||
@apply m-1 mb-0 h-8 w-auto border-input/30 bg-input/30 shadow-none focus-within:border-inherit focus-within:ring-0;
|
||||
}
|
||||
|
||||
.combobox [data-popover] > input[role='combobox'] {
|
||||
@apply mb-1 w-full;
|
||||
}
|
||||
/* Select */
|
||||
*:not(select).select > button {
|
||||
@apply border-input dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 data-[size=sm]:h-7 gap-1.5 rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] border bg-transparent py-2 ps-2.5 pe-2 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4;
|
||||
@@ -465,10 +519,15 @@
|
||||
|
||||
/* Dialog */
|
||||
.dialog::backdrop,
|
||||
.alert-dialog::backdrop,
|
||||
.command-dialog::backdrop {
|
||||
@apply bg-black/10 backdrop-blur-xs duration-100;
|
||||
}
|
||||
|
||||
.alert-dialog > * {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-4 rounded-xl p-4 ring-1 duration-100 sm:max-w-sm;
|
||||
}
|
||||
|
||||
.dialog > * {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm;
|
||||
}
|
||||
@@ -481,6 +540,15 @@
|
||||
@apply gap-2;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header {
|
||||
@apply gap-x-4 gap-y-1.5;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > figure {
|
||||
@apply bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md [&>svg:not([class*='size-'])]:size-6;
|
||||
}
|
||||
|
||||
.alert-dialog > * > footer,
|
||||
.dialog > * > footer {
|
||||
@apply bg-muted/50 -mx-4 -mb-4 gap-2 rounded-b-xl border-t p-4;
|
||||
}
|
||||
@@ -490,11 +558,21 @@
|
||||
@apply text-base leading-none font-medium;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > h2,
|
||||
.alert-dialog > * > [data-title] {
|
||||
@apply text-base font-medium;
|
||||
}
|
||||
|
||||
.dialog > * > header > p,
|
||||
.dialog > * > [data-description] {
|
||||
@apply text-muted-foreground text-sm leading-normal [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > p,
|
||||
.alert-dialog > * > [data-description] {
|
||||
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu > [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 gap-0 overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100;
|
||||
@@ -541,11 +619,11 @@
|
||||
@apply bg-border -mx-1 my-1 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child) {
|
||||
.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) {
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
+102
-20
@@ -1,5 +1,26 @@
|
||||
/* Button */
|
||||
/* Accordion */
|
||||
@layer components {
|
||||
.accordion {
|
||||
@apply overflow-hidden rounded-2xl border;
|
||||
}
|
||||
|
||||
.accordion > details {
|
||||
@apply open:bg-muted/50 not-last:border-b;
|
||||
}
|
||||
|
||||
.accordion > details > summary {
|
||||
@apply gap-6 p-4 text-left text-sm font-medium hover:underline;
|
||||
}
|
||||
|
||||
.accordion > details > summary > svg:last-child {
|
||||
@apply text-muted-foreground ms-auto size-4;
|
||||
}
|
||||
|
||||
.accordion > details > :not(summary) {
|
||||
@apply px-4 pt-0 pb-4 text-sm;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.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;
|
||||
}
|
||||
@@ -255,7 +276,7 @@
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]) {
|
||||
.avatar > span:not(.avatar-badge) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -263,7 +284,7 @@
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge] {
|
||||
.avatar > .avatar-badge {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -309,17 +330,42 @@
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
/* Command */
|
||||
.command {
|
||||
@apply bg-popover text-popover-foreground rounded-3xl p-1;
|
||||
/* Breadcrumb */
|
||||
.breadcrumb > ol {
|
||||
@apply text-muted-foreground gap-1.5 text-sm sm:gap-2.5;
|
||||
}
|
||||
|
||||
.command-dialog > * {
|
||||
@apply rounded-3xl p-0;
|
||||
.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-3xl! p-1;
|
||||
}
|
||||
|
||||
.command-dialog > .command {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 rounded-3xl! shadow-xl ring-1 duration-100;
|
||||
}
|
||||
|
||||
.command > header {
|
||||
@apply m-1 mb-0 h-8 gap-2 rounded-2xl bg-input/50 px-2;
|
||||
@apply m-1 mb-0 h-8 gap-0 rounded-2xl bg-input/50 px-2;
|
||||
}
|
||||
|
||||
.command > header svg {
|
||||
@@ -327,7 +373,7 @@
|
||||
}
|
||||
|
||||
.command > header input {
|
||||
@apply h-full text-sm placeholder:text-muted-foreground;
|
||||
@apply ps-1.5 text-sm placeholder:text-muted-foreground;
|
||||
}
|
||||
|
||||
.command [role='menu'] {
|
||||
@@ -355,7 +401,7 @@
|
||||
}
|
||||
|
||||
.command [role='menuitem'].active {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.command [data-shortcut] {
|
||||
@@ -378,11 +424,15 @@
|
||||
}
|
||||
|
||||
.combobox [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-h-72 rounded-2xl p-1 shadow-lg ring-1 duration-100;
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-h-72 gap-0 rounded-2xl p-0 shadow-lg ring-1 duration-100;
|
||||
}
|
||||
|
||||
.combobox [role='listbox'] {
|
||||
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto;
|
||||
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -399,7 +449,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='group'] {
|
||||
@@ -421,6 +471,14 @@
|
||||
.combobox-chip-remove {
|
||||
@apply -ms-0.5 size-4.5 opacity-50 hover:opacity-100 [&_svg]:size-3.5;
|
||||
}
|
||||
|
||||
.combobox [data-popover] > .input-group {
|
||||
@apply m-1 mb-0 h-8 w-auto border-input/30 bg-input/50 shadow-none focus-within:border-inherit focus-within:ring-0;
|
||||
}
|
||||
|
||||
.combobox [data-popover] > input[role='combobox'] {
|
||||
@apply mb-1 w-full;
|
||||
}
|
||||
/* Select */
|
||||
*:not(select).select > button {
|
||||
@apply bg-input/50 border-transparent 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 h-8 data-[size=sm]:h-7 gap-1.5 rounded-2xl border px-3 py-2 text-sm transition-[color,box-shadow] duration-200 focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4;
|
||||
@@ -473,12 +531,17 @@
|
||||
|
||||
/* Dialog */
|
||||
.dialog::backdrop,
|
||||
.alert-dialog::backdrop,
|
||||
.command-dialog::backdrop {
|
||||
@apply bg-black/30 backdrop-blur-sm duration-100;
|
||||
}
|
||||
|
||||
.alert-dialog > * {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-xs gap-6 rounded-3xl p-6 shadow-xl ring-1 duration-100 sm:max-w-md;
|
||||
}
|
||||
|
||||
.dialog > * {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-[min(var(--radius-4xl),24px)] p-6 text-sm shadow-xl ring-1 duration-100 sm:max-w-md;
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-3xl p-6 text-sm shadow-xl ring-1 duration-100 sm:max-w-md;
|
||||
}
|
||||
|
||||
.dialog > * > :is(button, form[method='dialog']) {
|
||||
@@ -493,6 +556,15 @@
|
||||
@apply gap-1.5;
|
||||
}
|
||||
|
||||
.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-full [&>svg:not([class*='size-'])]:size-8;
|
||||
}
|
||||
|
||||
.alert-dialog > * > footer,
|
||||
.dialog > * > footer {
|
||||
@apply gap-2;
|
||||
}
|
||||
@@ -502,11 +574,21 @@
|
||||
@apply text-base leading-none font-medium;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > h2,
|
||||
.alert-dialog > * > [data-title] {
|
||||
@apply text-lg font-medium;
|
||||
}
|
||||
|
||||
.dialog > * > header > p,
|
||||
.dialog > * > [data-description] {
|
||||
@apply text-muted-foreground text-sm leading-normal [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > p,
|
||||
.alert-dialog > * > [data-description] {
|
||||
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu > [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 gap-0 overflow-x-hidden overflow-y-auto rounded-2xl p-1 shadow-lg ring-1 duration-100;
|
||||
@@ -553,11 +635,11 @@
|
||||
@apply bg-border/50 -mx-1 my-1 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child) {
|
||||
.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) {
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -582,7 +664,7 @@
|
||||
|
||||
/* Card */
|
||||
.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)];
|
||||
@apply bg-card text-card-foreground ring-foreground/5 dark:ring-foreground/10 overflow-hidden rounded-3xl text-sm shadow-sm ring-1 has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-t-3xl [&>img:last-child]:rounded-b-3xl;
|
||||
}
|
||||
|
||||
.card {
|
||||
@@ -594,7 +676,7 @@
|
||||
}
|
||||
|
||||
.card > header {
|
||||
@apply gap-1.5 rounded-t-[min(var(--radius-4xl),24px)] px-5 [.border-b]:pb-5;
|
||||
@apply gap-1.5 rounded-t-3xl px-5 [.border-b]:pb-5;
|
||||
}
|
||||
|
||||
.card[data-size='sm'] > header {
|
||||
@@ -618,7 +700,7 @@
|
||||
}
|
||||
|
||||
.card > footer {
|
||||
@apply rounded-b-[min(var(--radius-4xl),24px)] px-5 [.border-t]:pt-5;
|
||||
@apply rounded-b-3xl px-5 [.border-t]:pt-5;
|
||||
}
|
||||
|
||||
.card[data-size='sm'] > footer {
|
||||
|
||||
+91
-13
@@ -1,5 +1,22 @@
|
||||
/* Button */
|
||||
/* 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;
|
||||
}
|
||||
@@ -263,7 +280,7 @@
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]) {
|
||||
.avatar > span:not(.avatar-badge) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -271,7 +288,7 @@
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge] {
|
||||
.avatar > .avatar-badge {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -317,17 +334,42 @@
|
||||
@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 > * {
|
||||
@apply rounded-none p-0;
|
||||
.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-2 border-b border-b-input bg-transparent px-3;
|
||||
@apply m-1 gap-0 border-b border-b-input bg-transparent px-3;
|
||||
}
|
||||
|
||||
.command > header svg {
|
||||
@@ -335,7 +377,7 @@
|
||||
}
|
||||
|
||||
.command > header input {
|
||||
@apply h-9 px-2 text-sm placeholder:text-muted-foreground;
|
||||
@apply h-9 ps-1.5 pe-2 text-sm placeholder:text-muted-foreground;
|
||||
}
|
||||
|
||||
.command [role='menu'] {
|
||||
@@ -363,7 +405,7 @@
|
||||
}
|
||||
|
||||
.command [role='menuitem'].active {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.command [data-shortcut] {
|
||||
@@ -386,11 +428,15 @@
|
||||
}
|
||||
|
||||
.combobox [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 rounded-none p-1.5 shadow-md ring-1 duration-100;
|
||||
@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;
|
||||
@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 {
|
||||
@@ -407,7 +453,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='group'] {
|
||||
@@ -429,6 +475,14 @@
|
||||
.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;
|
||||
@@ -481,10 +535,15 @@
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@@ -501,6 +560,15 @@
|
||||
@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;
|
||||
}
|
||||
@@ -510,11 +578,21 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
@@ -561,11 +639,11 @@
|
||||
@apply bg-border/50 -mx-1.5 my-1.5 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child) {
|
||||
.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) {
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
+95
-17
@@ -1,5 +1,22 @@
|
||||
/* Button */
|
||||
/* Accordion */
|
||||
@layer components {
|
||||
.accordion > details {
|
||||
@apply not-last:border-b;
|
||||
}
|
||||
|
||||
.accordion > details > summary {
|
||||
@apply focus-visible:ring-ring/50 focus-visible:border-ring rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3;
|
||||
}
|
||||
|
||||
.accordion > details > summary > svg:last-child {
|
||||
@apply text-muted-foreground ms-auto size-4;
|
||||
}
|
||||
|
||||
.accordion > details > :not(summary) {
|
||||
@apply pt-0 pb-4 text-sm;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.btn {
|
||||
@apply rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 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;
|
||||
}
|
||||
@@ -247,7 +264,7 @@
|
||||
@apply size-10;
|
||||
}
|
||||
|
||||
.avatar > span:not([data-badge]) {
|
||||
.avatar > span:not(.avatar-badge) {
|
||||
@apply bg-muted text-muted-foreground rounded-[inherit];
|
||||
}
|
||||
|
||||
@@ -255,7 +272,7 @@
|
||||
@apply rounded-[inherit];
|
||||
}
|
||||
|
||||
.avatar > [data-badge] {
|
||||
.avatar > .avatar-badge {
|
||||
@apply bg-primary text-primary-foreground ring-background;
|
||||
}
|
||||
|
||||
@@ -301,17 +318,42 @@
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
/* Command */
|
||||
.command {
|
||||
@apply bg-popover text-popover-foreground rounded-xl p-1;
|
||||
/* Breadcrumb */
|
||||
.breadcrumb > ol {
|
||||
@apply text-muted-foreground gap-1.5 text-sm sm:gap-2.5;
|
||||
}
|
||||
|
||||
.command-dialog > * {
|
||||
@apply rounded-xl p-0;
|
||||
.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-xl! p-1;
|
||||
}
|
||||
|
||||
.command-dialog > .command {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 rounded-xl! ring-1 duration-100;
|
||||
}
|
||||
|
||||
.command > header {
|
||||
@apply m-1 mb-0 h-8 gap-2 rounded-lg border border-input/30 bg-input/30 px-2;
|
||||
@apply m-1 mb-0 h-8 gap-0 rounded-lg border border-input/30 bg-input/30 px-2;
|
||||
}
|
||||
|
||||
.command > header svg {
|
||||
@@ -319,7 +361,7 @@
|
||||
}
|
||||
|
||||
.command > header input {
|
||||
@apply h-full text-sm placeholder:text-muted-foreground;
|
||||
@apply ps-1.5 text-sm placeholder:text-muted-foreground;
|
||||
}
|
||||
|
||||
.command [role='menu'] {
|
||||
@@ -343,11 +385,11 @@
|
||||
}
|
||||
|
||||
.command [role='menuitem'] {
|
||||
@apply gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4;
|
||||
@apply gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 in-[.command-dialog]:rounded-lg;
|
||||
}
|
||||
|
||||
.command [role='menuitem'].active {
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
}
|
||||
|
||||
.command [data-shortcut] {
|
||||
@@ -370,11 +412,15 @@
|
||||
}
|
||||
|
||||
.combobox [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 rounded-md p-1 shadow-md ring-1 duration-100;
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 gap-0 rounded-md p-0 shadow-md ring-1 duration-100;
|
||||
}
|
||||
|
||||
.combobox [role='listbox'] {
|
||||
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto;
|
||||
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -391,7 +437,7 @@
|
||||
|
||||
.combobox [role='option'].active,
|
||||
.combobox [role='option']:focus-visible {
|
||||
@apply bg-muted text-foreground [&_svg]:text-foreground;
|
||||
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
|
||||
}
|
||||
|
||||
.combobox [role='group'] {
|
||||
@@ -413,6 +459,14 @@
|
||||
.combobox-chip-remove {
|
||||
@apply -ms-1 opacity-50 hover:opacity-100 [&_svg]:size-3.5;
|
||||
}
|
||||
|
||||
.combobox [data-popover] > .input-group {
|
||||
@apply m-1 mb-0 h-8 w-auto border-input/30 bg-input/30 shadow-none focus-within:border-inherit focus-within:ring-0;
|
||||
}
|
||||
|
||||
.combobox [data-popover] > input[role='combobox'] {
|
||||
@apply mb-1 w-full;
|
||||
}
|
||||
/* Select */
|
||||
*:not(select).select > button {
|
||||
@apply border-input dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 data-[size=sm]:h-8 gap-1.5 rounded-md border bg-transparent py-2 ps-2.5 pe-2 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4;
|
||||
@@ -465,10 +519,15 @@
|
||||
|
||||
/* Dialog */
|
||||
.dialog::backdrop,
|
||||
.alert-dialog::backdrop,
|
||||
.command-dialog::backdrop {
|
||||
@apply bg-black/10 backdrop-blur-xs duration-100;
|
||||
}
|
||||
|
||||
.alert-dialog > * {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-6 rounded-xl p-6 ring-1 duration-100 sm:max-w-lg;
|
||||
}
|
||||
|
||||
.dialog > * {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md;
|
||||
}
|
||||
@@ -481,6 +540,15 @@
|
||||
@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-md [&>svg:not([class*='size-'])]:size-8;
|
||||
}
|
||||
|
||||
.alert-dialog > * > footer,
|
||||
.dialog > * > footer {
|
||||
@apply gap-2;
|
||||
}
|
||||
@@ -490,11 +558,21 @@
|
||||
@apply leading-none font-medium;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > h2,
|
||||
.alert-dialog > * > [data-title] {
|
||||
@apply text-lg font-medium;
|
||||
}
|
||||
|
||||
.dialog > * > header > p,
|
||||
.dialog > * > [data-description] {
|
||||
@apply text-muted-foreground text-sm leading-normal [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
.alert-dialog > * > header > p,
|
||||
.alert-dialog > * > [data-description] {
|
||||
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu > [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 gap-0 overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 duration-100;
|
||||
@@ -541,11 +619,11 @@
|
||||
@apply bg-border -mx-1 my-1 h-px;
|
||||
}
|
||||
|
||||
.dropdown-menu :is([data-shortcut], kbd:last-child) {
|
||||
.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) {
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user