97 lines
3.6 KiB
CSS
97 lines
3.6 KiB
CSS
@tailwind components;
|
|
|
|
@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 rounded-full px-6 disabled:opacity-50 px-6 transition-transform;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 rounded-full disabled:opacity-50 px-6 transition-transform;
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply hover:bg-brand-purple bg-brand-purple/10 rounded-full disabled:opacity-50 px-6 transition-transform text-brand-purple hover:text-[var(--purple-muted)];
|
|
}
|
|
|
|
.btn-outline {
|
|
@apply border border-primary border-2 text-primary shadow-sm hover:bg-primary/10 rounded-full disabled:opacity-50 px-6 transition-transform;
|
|
}
|
|
|
|
.btn-accent {
|
|
@apply bg-accent text-accent-foreground shadow hover:bg-accent/90 rounded-full disabled:opacity-50 px-6 transition-transform;
|
|
}
|
|
|
|
.btn-destructive {
|
|
@apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 rounded-full disabled:opacity-50 px-6 transition-transform;
|
|
}
|
|
|
|
.btn-outline-destructive {
|
|
@apply border border-destructive bg-none border-2 text-destructive shadow-sm hover:bg-destructive/10 dark:hover:bg-destructive/10 rounded-full disabled:opacity-50 px-6 transition-transform;
|
|
}
|
|
|
|
.btn-link {
|
|
@apply text-primary underline-offset-4 hover:underline disabled:opacity-50 px-6 transition-transform;
|
|
}
|
|
|
|
.btn-sm {
|
|
@apply h-8 rounded-full px-3 text-xs disabled:opacity-50 px-6;
|
|
}
|
|
|
|
.btn-md {
|
|
@apply h-9 px-4 py-2 rounded-full disabled:opacity-50 px-6;
|
|
}
|
|
|
|
.btn-lg {
|
|
@apply h-10 rounded-full px-8 disabled:opacity-50;
|
|
}
|
|
|
|
.btn-icon {
|
|
@apply h-9 w-9 rounded-full disabled:opacity-50 px-6;
|
|
}
|
|
.btn-green {
|
|
@apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-full px-6 ;
|
|
}
|
|
.btn-util-green {
|
|
@apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-xl h-12 px-6 ;
|
|
}
|
|
|
|
.btn-util-purple {
|
|
@apply bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink-2)] text-background dark:text-white dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
|
|
}
|
|
|
|
.btn-light-orange {
|
|
@apply bg-brand-light-orange hover:bg-brand-orange text-background dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
|
|
}
|
|
.btn-pink {
|
|
@apply bg-brand-pink hover:bg-brand-dark-rose dark:text-[var(--lavender-100)] text-background dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
|
|
}
|
|
.btn-lavender {
|
|
@apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender;
|
|
}
|
|
.btn-light-lavender {
|
|
@apply bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-lavender rounded-full px-6 transition-transform dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender ;
|
|
}
|
|
|
|
/* Badges */
|
|
|
|
.badge {
|
|
@apply px-3 py-1 rounded-full text-sm font-medium transition-transform;
|
|
}
|
|
.badge-green {
|
|
@apply bg-[var(--green-light)] text-white transition-transform;
|
|
}
|
|
/* Backgrounds */
|
|
.bg-light-lavender {
|
|
@apply bg-gradient-to-br from-brand-purple to-[var(--purple-ink)] text-white bg-[var(--neutral-800)] transition-transform dark:bg-brand-lavender dark:text-brand-dark-lavender;
|
|
}
|
|
|
|
|
|
}
|