62 lines
1.4 KiB
CSS
62 lines
1.4 KiB
CSS
@tailwind utilities;
|
|
|
|
@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;
|
|
}
|
|
} |