69 lines
1.2 KiB
CSS
69 lines
1.2 KiB
CSS
.btn {
|
|
@apply .rounded .p-2;
|
|
transition: all 100ms ease-in-out;
|
|
|
|
/**
|
|
* Button Colors
|
|
*/
|
|
&.btn-primary {
|
|
@apply .bg-primary-500 .border-primary-600 .border .text-white;
|
|
|
|
&:hover:enabled {
|
|
@apply .bg-primary-600 .border-primary-800;
|
|
}
|
|
}
|
|
|
|
&.btn-green {
|
|
@apply .bg-green-500 .border-green-600 .border .text-white;
|
|
|
|
&:hover:enabled {
|
|
@apply .bg-green-600 .border-green-800;
|
|
}
|
|
}
|
|
|
|
&.btn-red {
|
|
&:not(.btn-secondary) {
|
|
@apply .bg-red-500 .border-red-600 .border .text-white;
|
|
}
|
|
|
|
&:hover:enabled {
|
|
@apply .bg-red-600 .border-red-800;
|
|
}
|
|
}
|
|
|
|
&.btn-secondary {
|
|
@apply .border .border-neutral-400 .text-neutral-600;
|
|
|
|
&:hover:enabled {
|
|
@apply .borderneutral-500s.text-neutral-800;
|
|
}
|
|
|
|
&.btn-red:hover:enabled {
|
|
@apply .bg-red-600 .border-red-800 .text-white;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Button Sizes
|
|
*/
|
|
&.btn-jumbo {
|
|
@apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
|
|
}
|
|
|
|
&.btn-lg {
|
|
@apply .p-4 .uppercase .tracking-wide .text-sm;
|
|
}
|
|
|
|
&.btn-sm {
|
|
@apply .px-6 .py-3 .uppercase .tracking-wide .text-sm;
|
|
}
|
|
|
|
&.btn-xs {
|
|
@apply .py-2 .px-2 .uppercase .text-xs;
|
|
}
|
|
|
|
&:disabled, &.disabled {
|
|
opacity: 0.55;
|
|
cursor: default;
|
|
}
|
|
}
|