2018-03-31 16:33:10 -05:00
|
|
|
.btn {
|
|
|
|
@apply .rounded;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Button Colors
|
|
|
|
*/
|
|
|
|
&.btn-blue {
|
|
|
|
@apply .bg-blue .border-blue-dark .border .text-white;
|
|
|
|
|
2018-04-07 16:17:51 -05:00
|
|
|
&:hover:enabled {
|
2018-03-31 16:33:10 -05:00
|
|
|
@apply .bg-blue-dark .border-blue-darker;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-06-16 16:25:26 -07:00
|
|
|
&.btn-green {
|
|
|
|
@apply .bg-green .border-green-dark .border .text-white;
|
|
|
|
|
|
|
|
&:hover:enabled {
|
|
|
|
@apply .bg-green-dark .border-green-darker;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-06-20 23:05:35 -07:00
|
|
|
&.btn-red {
|
|
|
|
@apply .bg-red .border-red-dark .border .text-white;
|
|
|
|
|
|
|
|
&:hover:enabled {
|
|
|
|
@apply .bg-red-dark .border-red-darker;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-06-11 22:36:43 -07:00
|
|
|
&.btn-secondary {
|
|
|
|
@apply .border .border-grey-light .text-grey-dark;
|
|
|
|
|
|
|
|
&:hover:enabled {
|
|
|
|
@apply .border-grey .text-grey-darker;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-03-31 16:33:10 -05:00
|
|
|
/**
|
|
|
|
* Button Sizes
|
|
|
|
*/
|
|
|
|
&.btn-jumbo {
|
|
|
|
@apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
|
|
|
|
}
|
2018-04-07 16:17:51 -05:00
|
|
|
|
2018-06-11 22:36:43 -07:00
|
|
|
&.btn-sm {
|
|
|
|
@apply .px-6 .py-3 .uppercase .tracking-wide .text-sm;
|
|
|
|
}
|
|
|
|
|
2018-04-08 15:18:13 -05:00
|
|
|
&:disabled, &.disabled {
|
2018-04-07 16:17:51 -05:00
|
|
|
opacity: 0.55;
|
|
|
|
cursor: default;
|
|
|
|
}
|
2018-03-31 16:33:10 -05:00
|
|
|
}
|