85 lines
2.0 KiB
SCSS
85 lines
2.0 KiB
SCSS
.btn {
|
|
@apply inline-flex items-center justify-center whitespace-nowrap rounded-lg font-semibold transition-colors;
|
|
@apply cursor-pointer;
|
|
@apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1;
|
|
@apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;
|
|
|
|
&-primary {
|
|
@apply bg-blue-600 text-white hover:bg-blue-600/90;
|
|
}
|
|
|
|
&-secondary-blue {
|
|
@apply bg-blue-200 text-blue-600 hover:bg-blue-300/50;
|
|
}
|
|
|
|
&-danger {
|
|
@apply bg-danger text-danger-foreground hover:bg-danger/90;
|
|
}
|
|
|
|
&-secondary-danger {
|
|
@apply bg-red-200 text-red-600 hover:bg-red-300/50;
|
|
}
|
|
|
|
&-outline {
|
|
@apply border-input border bg-transparent;
|
|
}
|
|
|
|
&-secondary {
|
|
@apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
|
|
}
|
|
|
|
&-success {
|
|
@apply bg-green-500 text-white hover:bg-green-500/80;
|
|
}
|
|
|
|
&-ghost {
|
|
@apply hover:bg-secondary hover:text-secondary-foreground;
|
|
}
|
|
|
|
&-sm {
|
|
@apply h-7 rounded-md px-3 text-xs;
|
|
}
|
|
|
|
&-md {
|
|
@apply h-9 px-4 py-2;
|
|
}
|
|
|
|
&-lg {
|
|
@apply h-10 rounded-md px-8;
|
|
}
|
|
|
|
&-loading {
|
|
@apply pointer-events-none opacity-50;
|
|
&-circle {
|
|
@apply mr-2 h-4 animate-spin opacity-50;
|
|
> circle {
|
|
opacity: 0.25;
|
|
}
|
|
> path {
|
|
opacity: 0.75;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[type='button'],
|
|
[type='reset'],
|
|
[type='submit'] {
|
|
&.btn-primary {
|
|
@apply bg-blue-600 hover:bg-blue-600/90;
|
|
@apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;
|
|
}
|
|
&.btn-secondary {
|
|
@apply bg-secondary hover:bg-secondary/80;
|
|
@apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;
|
|
}
|
|
&.btn-secondary-blue {
|
|
@apply bg-blue-200 text-blue-900 hover:bg-blue-200/80;
|
|
@apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;
|
|
}
|
|
&.btn-danger {
|
|
@apply bg-danger hover:bg-danger/90;
|
|
@apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;
|
|
}
|
|
}
|