dev #19
41
src/base.css
Normal file
41
src/base.css
Normal file
@@ -0,0 +1,41 @@
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
[data-debug-wrapper="true"] {
|
||||
display: contents !important;
|
||||
}
|
||||
|
||||
[data-debug-wrapper="true"] > * {
|
||||
margin-left: inherit;
|
||||
margin-right: inherit;
|
||||
margin-top: inherit;
|
||||
margin-bottom: inherit;
|
||||
padding-left: inherit;
|
||||
padding-right: inherit;
|
||||
padding-top: inherit;
|
||||
padding-bottom: inherit;
|
||||
column-gap: inherit;
|
||||
row-gap: inherit;
|
||||
gap: inherit;
|
||||
border-left-width: inherit;
|
||||
border-right-width: inherit;
|
||||
border-top-width: inherit;
|
||||
border-bottom-width: inherit;
|
||||
border-left-style: inherit;
|
||||
border-right-style: inherit;
|
||||
border-top-style: inherit;
|
||||
border-bottom-style: inherit;
|
||||
border-left-color: inherit;
|
||||
border-right-color: inherit;
|
||||
border-top-color: inherit;
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
}
|
||||
52
src/components.css
Normal file
52
src/components.css
Normal file
@@ -0,0 +1,52 @@
|
||||
@layer components {
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors
|
||||
focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
|
||||
disabled:pointer-events-none disabled:opacity-50
|
||||
[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply bg-primary text-primary-foreground shadow hover:bg-primary/90;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply hover:bg-accent hover:text-accent-foreground;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@apply border border-input shadow-sm hover:bg-accent hover:text-accent-foreground;
|
||||
}
|
||||
|
||||
.btn-accent {
|
||||
@apply bg-accent text-accent-foreground shadow hover:bg-accent/90;
|
||||
}
|
||||
|
||||
.btn-destructive {
|
||||
@apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
@apply h-8 rounded-md px-3 text-xs;
|
||||
}
|
||||
|
||||
.btn-md {
|
||||
@apply h-9 px-4 py-2;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
@apply h-10 rounded-md px-8;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
@apply h-9 w-9;
|
||||
}
|
||||
}
|
||||
205
src/index.css
205
src/index.css
@@ -20,213 +20,8 @@ code {
|
||||
monospace;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 280 47% 27%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 280 47% 27%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 280 47% 27%;
|
||||
--primary: 280 47% 27%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 268 33% 89%;
|
||||
--secondary-foreground: 280 47% 27%;
|
||||
--muted: 268 43% 95%;
|
||||
--muted-foreground: 268 35% 47%;
|
||||
--accent: 17 100% 73%;
|
||||
--accent-foreground: 280 47% 27%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 268 33% 89%;
|
||||
--input: 268 33% 89%;
|
||||
--ring: 268 35% 47%;
|
||||
--chart-1: 268 36% 46%;
|
||||
--chart-2: 17 100% 73%;
|
||||
--chart-3: 268 33% 89%;
|
||||
--chart-4: 280 44% 29%;
|
||||
--chart-5: 268 35% 47%;
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* =========================
|
||||
Brand Colors
|
||||
========================= */
|
||||
--brand-dark-lavender: 267 47% 29%;
|
||||
--brand-purple: 256 35% 47%;
|
||||
--brand-lavender: 262 46% 80%;
|
||||
--brand-light-lavender: 256 32% 88%;
|
||||
--brand-white: 0 0% 100%;
|
||||
|
||||
--brand-dark-orange: 13 100% 42%;
|
||||
--brand-orange: 24 86% 55%;
|
||||
--brand-light-orange: 24 100% 67%;
|
||||
|
||||
--brand-pink: 324 55% 60%;
|
||||
--dusty-pink: 323 39% 52%;
|
||||
--dark-rose: 324 98% 32%;
|
||||
|
||||
/*
|
||||
==========================
|
||||
Color Patch
|
||||
==========================
|
||||
*/
|
||||
|
||||
--blue-linkedin: #0a66c2;
|
||||
--blue-facebook: #1877f2;
|
||||
--blue-twitter: #1da1f2;
|
||||
--purple-ink: #422268;
|
||||
--purple-deep: #48286e;
|
||||
--purple-muted: #533a82;
|
||||
--purple-plum: #553d8a;
|
||||
--purple-soft: #5a4290;
|
||||
--purple-amethyst: #644c9f;
|
||||
--purple-lilac: #664ea2;
|
||||
--purple-lavender: #664fa3;
|
||||
--purple-electric: #865edf;
|
||||
--slate-dark: #3d405b;
|
||||
--slate-muted: #6b708d;
|
||||
--slate-600: #6b7280;
|
||||
--slate-400: #9ca3af;
|
||||
--slate-dark: #3d405b;
|
||||
--slate-muted: #6b708d;
|
||||
--slate-600: #6b7280;
|
||||
--slate-400: #9ca3af;
|
||||
--green-success: #4caf50;
|
||||
--green-sage: #5a8f72;
|
||||
--green-muted: #66927e;
|
||||
--green-soft: #6a9680;
|
||||
--green-eucalyptus: #6a9a83;
|
||||
--green-fern: #6da085;
|
||||
--green-mint: #6fa087;
|
||||
--green-pastel: #6fa188;
|
||||
--green-light: #81b29a;
|
||||
--green-bg: #e8f5e9;
|
||||
--orange-rust: #d16b54;
|
||||
--orange-soft: #e07a5f;
|
||||
--orange-peach: #e88a63;
|
||||
--orange-sand: #e88d66;
|
||||
--orange-apricot: #ff8c5a;
|
||||
--orange-coral: #ff8c64;
|
||||
--orange-light: #ff9e77;
|
||||
--orange-500: #ea580c;
|
||||
--orange-400: #fb923c;
|
||||
--gold-soft: #e8bf7a;
|
||||
--gold-warm: #f2cc8f;
|
||||
--gold-soft: #e8bf7a;
|
||||
--gold-warm: #f2cc8f;
|
||||
--red-instagram: #e4405f;
|
||||
--red-soft: #ffebee;
|
||||
--lavender-100: #e8e0f5;
|
||||
--lavender-200: #eeebf4;
|
||||
--lavender-300: #f1eef9;
|
||||
--lavender-400: #f9f5ff;
|
||||
--lavender-500: #f8f7fb;
|
||||
--lavender-600: #f9f7fc;
|
||||
--lavender-700: #f9f8fb;
|
||||
--lavender-800: #eaedf4;
|
||||
--neutral-50: #fafafa;
|
||||
--neutral-100: #f9fafb;
|
||||
--neutral-200: #fdfcf8;
|
||||
--neutral-300: #eae0d5;
|
||||
--neutral-400: #c4bed8;
|
||||
--neutral-500: #c5b4e3;
|
||||
--neutral-600: #c5bfd9;
|
||||
--neutral-700: #dcd7ea;
|
||||
--neutral-800: #ddd8eb;
|
||||
--neutral-900: #ffffff;
|
||||
}
|
||||
.dark {
|
||||
--background: var(--brand-dark-lavender);
|
||||
--foreground: var(--brand-light-lavender);
|
||||
--card: var(--brand-purple);
|
||||
--card-foreground: var(--brand-light-lavender);
|
||||
--popover: var(--brand-purple);
|
||||
--popover-foreground: var(--brand-light-lavender);
|
||||
--primary: var(--brand-light-lavender);
|
||||
--primary-foreground: var(--brand-dark-lavender);
|
||||
--secondary: var(--brand-purple);
|
||||
--secondary-foreground: var(--brand-light-lavender);
|
||||
--muted: var(--brand-purple);
|
||||
--muted-foreground: var(--brand-light-lavender);
|
||||
--accent: var(--brand-light-lavender);
|
||||
--accent-foreground: var(--brand-light-lavender);
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: var(--brand-light-lavender);
|
||||
--border: var(--brand-purple);
|
||||
--input: var(--brand-purple);
|
||||
--ring: var(--brand-light-lavender);
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
[data-debug-wrapper="true"] {
|
||||
display: contents !important;
|
||||
}
|
||||
|
||||
[data-debug-wrapper="true"] > * {
|
||||
margin-left: inherit;
|
||||
margin-right: inherit;
|
||||
margin-top: inherit;
|
||||
margin-bottom: inherit;
|
||||
padding-left: inherit;
|
||||
padding-right: inherit;
|
||||
padding-top: inherit;
|
||||
padding-bottom: inherit;
|
||||
column-gap: inherit;
|
||||
row-gap: inherit;
|
||||
gap: inherit;
|
||||
border-left-width: inherit;
|
||||
border-right-width: inherit;
|
||||
border-top-width: inherit;
|
||||
border-bottom-width: inherit;
|
||||
border-left-style: inherit;
|
||||
border-right-style: inherit;
|
||||
border-top-style: inherit;
|
||||
border-bottom-style: inherit;
|
||||
border-left-color: inherit;
|
||||
border-right-color: inherit;
|
||||
border-top-color: inherit;
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
@supports selector(::-webkit-scrollbar) {
|
||||
.scrollbar-dashboard::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.scrollbar-dashboard::-webkit-scrollbar-thumb {
|
||||
background-color: #ddd8eb;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.scrollbar-x-dashboard::-webkit-scrollbar:horizontal {
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.scrollbar-x-dashboard::-webkit-scrollbar-thumb:horizontal {
|
||||
background-color: #ddd8eb;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.hide-scrollbar-x::-webkit-scrollbar:horizontal {
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
=========================
|
||||
|
||||
225
src/theme.css
Normal file
225
src/theme.css
Normal file
@@ -0,0 +1,225 @@
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 280 47% 27%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 280 47% 27%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 280 47% 27%;
|
||||
--primary: 280 47% 27%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 268 33% 89%;
|
||||
--secondary-foreground: 280 47% 27%;
|
||||
--muted: 268 43% 95%;
|
||||
--muted-foreground: 268 35% 47%;
|
||||
--accent: var(--brand-orange);
|
||||
--accent-foreground: 280 47% 27%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 268 33% 89%;
|
||||
--input: 268 33% 89%;
|
||||
--ring: 268 35% 47%;
|
||||
--chart-1: 268 36% 46%;
|
||||
--chart-2: 17 100% 73%;
|
||||
--chart-3: 268 33% 89%;
|
||||
--chart-4: 280 44% 29%;
|
||||
--chart-5: 268 35% 47%;
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* =========================
|
||||
Brand Colors
|
||||
========================= */
|
||||
--brand-dark-lavender: 267 47% 29%;
|
||||
--brand-purple: 256 35% 47%;
|
||||
--brand-lavender: 262 46% 80%;
|
||||
--brand-light-lavender: 256 32% 88%;
|
||||
--brand-white: 0 0% 100%;
|
||||
|
||||
--brand-dark-orange: 13 100% 42%;
|
||||
--brand-orange: 24 86% 55%;
|
||||
--brand-light-orange: 24 100% 67%;
|
||||
|
||||
--brand-pink: 324 55% 60%;
|
||||
--dusty-pink: 323 39% 52%;
|
||||
--dark-rose: 324 98% 32%;
|
||||
|
||||
/*
|
||||
==========================
|
||||
Color Patch
|
||||
==========================
|
||||
*/
|
||||
|
||||
--blue-linkedin: #0a66c2;
|
||||
--blue-facebook: #1877f2;
|
||||
--blue-twitter: #1da1f2;
|
||||
--purple-ink: #422268;
|
||||
--purple-deep: #48286e;
|
||||
--purple-muted: #533a82;
|
||||
--purple-plum: #553d8a;
|
||||
--purple-soft: #5a4290;
|
||||
--purple-amethyst: #644c9f;
|
||||
--purple-lilac: #664ea2;
|
||||
--purple-lavender: #664fa3;
|
||||
--purple-electric: #865edf;
|
||||
--slate-dark: #3d405b;
|
||||
--slate-muted: #6b708d;
|
||||
--slate-600: #6b7280;
|
||||
--slate-400: #9ca3af;
|
||||
--slate-dark: #3d405b;
|
||||
--slate-muted: #6b708d;
|
||||
--slate-600: #6b7280;
|
||||
--slate-400: #9ca3af;
|
||||
--green-success: #4caf50;
|
||||
--green-sage: #5a8f72;
|
||||
--green-muted: #66927e;
|
||||
--green-soft: #6a9680;
|
||||
--green-eucalyptus: #6a9a83;
|
||||
--green-fern: #6da085;
|
||||
--green-mint: #6fa087;
|
||||
--green-pastel: #6fa188;
|
||||
--green-light: #81b29a;
|
||||
--green-bg: #e8f5e9;
|
||||
--orange-rust: #d16b54;
|
||||
--orange-soft: #e07a5f;
|
||||
--orange-peach: #e88a63;
|
||||
--orange-sand: #e88d66;
|
||||
--orange-apricot: #ff8c5a;
|
||||
--orange-coral: #ff8c64;
|
||||
--orange-light: #ff9e77;
|
||||
--orange-500: #ea580c;
|
||||
--orange-400: #fb923c;
|
||||
--gold-soft: #e8bf7a;
|
||||
--gold-warm: #f2cc8f;
|
||||
--gold-soft: #e8bf7a;
|
||||
--gold-warm: #f2cc8f;
|
||||
--red-instagram: #e4405f;
|
||||
--red-soft: #ffebee;
|
||||
--lavender-100: #e8e0f5;
|
||||
--lavender-200: #eeebf4;
|
||||
--lavender-300: #f1eef9;
|
||||
--lavender-400: #f9f5ff;
|
||||
--lavender-500: #f8f7fb;
|
||||
--lavender-600: #f9f7fc;
|
||||
--lavender-700: #f9f8fb;
|
||||
--lavender-800: #eaedf4;
|
||||
--neutral-50: #fafafa;
|
||||
--neutral-100: #f9fafb;
|
||||
--neutral-200: #fdfcf8;
|
||||
--neutral-300: #eae0d5;
|
||||
--neutral-400: #c4bed8;
|
||||
--neutral-500: #c5b4e3;
|
||||
--neutral-600: #c5bfd9;
|
||||
--neutral-700: #dcd7ea;
|
||||
--neutral-800: #ddd8eb;
|
||||
--neutral-900: #ffffff;
|
||||
}
|
||||
.dark {
|
||||
--background: 246 28% 8%;
|
||||
--foreground: 255 30% 92%;
|
||||
|
||||
--card: 248 26% 11%;
|
||||
--card-foreground: 255 30% 92%;
|
||||
|
||||
--popover: 248 26% 12%;
|
||||
--popover-foreground: 255 30% 92%;
|
||||
|
||||
--primary: 262 70% 72%;
|
||||
--primary-foreground: 246 28% 10%;
|
||||
|
||||
--secondary: 262 22% 18%;
|
||||
--secondary-foreground: 255 30% 92%;
|
||||
|
||||
--muted: 252 18% 15%;
|
||||
--muted-foreground: var(--brand-lavender);
|
||||
|
||||
--accent: var(--brand-light-orange);
|
||||
--accent-foreground: 246 28% 10%;
|
||||
|
||||
--destructive: 0 78% 56%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--border: 255 14% 22%;
|
||||
--input: 255 14% 20%;
|
||||
--ring: 262 70% 72%;
|
||||
|
||||
/* charts (tuned for dark backgrounds) */
|
||||
--chart-1: 262 70% 72%;
|
||||
--chart-2: var(--dark-rose);
|
||||
--chart-3: 168 48% 52%;
|
||||
--chart-4: 286 64% 70%;
|
||||
--chart-5: 210 70% 66%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* -------- Purples (Primary UI) -------- */
|
||||
--purple-ink: #422268; /* deepest background */
|
||||
--purple-ink: hsl(var(--brand-light-lavender)); /* deepest background */
|
||||
--purple-deep: #24153a; /* app shell */
|
||||
--purple-muted: #34204f; /* panels */
|
||||
--purple-plum: #3f2760;
|
||||
--purple-soft: #4b3374;
|
||||
--purple-amethyst: #5c45a0;
|
||||
--purple-lilac: #6a55b8;
|
||||
--purple-lavender: #664fa3;
|
||||
--purple-electric: #9b7cff; /* accents / focus */
|
||||
|
||||
/* -------- Slate / Text Neutrals -------- */
|
||||
--slate-dark: #0f1020; /* page background */
|
||||
--slate-muted: #2b2f44; /* borders / dividers */
|
||||
--slate-600: #8b90a8; /* secondary text */
|
||||
--slate-400: #c7cad6; /* primary text */
|
||||
|
||||
/* -------- Greens (Success / Calm) -------- */
|
||||
--green-success: #3ddc84;
|
||||
--green-sage: #4fa38a;
|
||||
--green-muted: #5fb39a;
|
||||
--green-soft: #6fc4aa;
|
||||
--green-eucalyptus: #7dd3b0;
|
||||
--green-fern: #8be0bc;
|
||||
--green-mint: #66a38b;
|
||||
--green-pastel: #a6ecd1;
|
||||
--green-light: #5e8374;
|
||||
--green-bg: #0f2a1e;
|
||||
|
||||
/* -------- Oranges (Warnings / Energy) -------- */
|
||||
--orange-rust: #b4533c;
|
||||
--orange-soft: #c8654c;
|
||||
--orange-peach: #d97757;
|
||||
--orange-sand: #e08966;
|
||||
--orange-apricot: #ff9f6e;
|
||||
--orange-coral: #ff8a75;
|
||||
--orange-light: #ffab91;
|
||||
--orange-500: #f97316;
|
||||
--orange-400: #fb923c;
|
||||
|
||||
/* -------- Golds -------- */
|
||||
--gold-soft: #e3c07a;
|
||||
--gold-warm: #f5d89c;
|
||||
|
||||
/* -------- Reds -------- */
|
||||
|
||||
--red-soft: #3a141c;
|
||||
|
||||
/* -------- Lavender UI Layers -------- */
|
||||
--lavender-100: #1c142c;
|
||||
--lavender-200: #241a38;
|
||||
--lavender-300: #2c2145;
|
||||
--lavender-400: #342952;
|
||||
--lavender-500: #211c35;
|
||||
--lavender-600: #45396e;
|
||||
--lavender-700: #4e417d;
|
||||
--lavender-800: #584a8c;
|
||||
|
||||
/* -------- Neutral Surfaces -------- */
|
||||
--neutral-50: #0b0b10; /* deepest bg */
|
||||
--neutral-100: #12121a;
|
||||
--neutral-200: #1a1a24;
|
||||
--neutral-300: #232330;
|
||||
--neutral-400: #2f2f40;
|
||||
--neutral-500: #3b3b52;
|
||||
--neutral-600: #515170;
|
||||
--neutral-700: #77779a;
|
||||
--neutral-800: var(--lavender-300); /* lightest bg */
|
||||
--neutral-900: #f4f4ff; /* highest contrast text */
|
||||
}
|
||||
}
|
||||
60
src/utilities.css
Normal file
60
src/utilities.css
Normal file
@@ -0,0 +1,60 @@
|
||||
@layer utilities {
|
||||
@supports selector(::-webkit-scrollbar) {
|
||||
.scrollbar-dashboard::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.scrollbar-dashboard::-webkit-scrollbar-thumb {
|
||||
background-color: #ddd8eb;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.scrollbar-x-dashboard::-webkit-scrollbar:horizontal {
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.scrollbar-x-dashboard::-webkit-scrollbar-thumb:horizontal {
|
||||
background-color: #ddd8eb;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.hide-scrollbar-x::-webkit-scrollbar:horizontal {
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
.ui-checkbox {
|
||||
@apply appearance-none
|
||||
w-5 h-5
|
||||
rounded
|
||||
border-2 border-[var(--neutral-800)]
|
||||
bg-[hsl(var(--background))]
|
||||
cursor-pointer
|
||||
inline-grid place-content-center;
|
||||
}
|
||||
|
||||
/* checked */
|
||||
.ui-checkbox:checked {
|
||||
@apply bg-brand-purple
|
||||
border-brand-purple;
|
||||
}
|
||||
|
||||
/* checkmark */
|
||||
.ui-checkbox::after {
|
||||
content: "";
|
||||
@apply w-2.5 h-2.5 scale-0 transition-transform bg-white;
|
||||
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
|
||||
}
|
||||
|
||||
.ui-checkbox:checked::after {
|
||||
@apply scale-100;
|
||||
}
|
||||
|
||||
/* focus */
|
||||
.ui-checkbox:focus-visible {
|
||||
@apply outline-none ring-2 ring-brand-purple
|
||||
ring-offset-2 ring-offset-[hsl(var(--background))];
|
||||
}
|
||||
|
||||
/* disabled */
|
||||
.ui-checkbox:disabled {
|
||||
@apply opacity-50 cursor-not-allowed;
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,9 @@ module.exports = {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
"./src/**/*.{js,jsx,ts,tsx}",
|
||||
"./public/index.html"
|
||||
"./public/index.html",
|
||||
"./src/index.css"
|
||||
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
|
||||
Reference in New Issue
Block a user