76 lines
1.5 KiB
SCSS
76 lines
1.5 KiB
SCSS
.btn {
|
|
@apply inline-flex items-center justify-center whitespace-nowrap rounded-lg font-semibold transition-colors;
|
|
@apply cursor-pointer focus:outline-none focus-visible:outline-none focus-visible:ring-0;
|
|
@apply disabled:pointer-events-none disabled:opacity-50;
|
|
|
|
&-primary {
|
|
@apply bg-primary hover:bg-primary/90 text-white;
|
|
}
|
|
|
|
&-secondary-blue {
|
|
@apply bg-blue-200 text-blue-900 hover:bg-blue-500/80;
|
|
}
|
|
|
|
&-danger {
|
|
@apply bg-danger text-danger-foreground hover:bg-danger/90;
|
|
}
|
|
|
|
&-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-primary hover:bg-primary/90;
|
|
}
|
|
&.btn-secondary {
|
|
@apply bg-secondary hover:bg-secondary/80;
|
|
}
|
|
&.btn-secondary-blue {
|
|
@apply bg-blue-200 text-blue-900 hover:bg-blue-200/80;
|
|
}
|
|
&.btn-danger {
|
|
@apply bg-danger hover:bg-danger/90;
|
|
}
|
|
}
|