73 lines
1.5 KiB
CSS
73 lines
1.5 KiB
CSS
.button {
|
|
@apply px-4 py-2 inline-flex items-center justify-center;
|
|
@apply rounded text-base font-semibold transition-all duration-100;
|
|
@apply focus:ring-[3px] focus:ring-offset-2 focus:ring-offset-gray-700 focus:ring-opacity-50;
|
|
|
|
/* Sizing Controls */
|
|
&.small {
|
|
@apply px-4 py-0 h-8 font-normal text-sm focus:ring-2;
|
|
}
|
|
|
|
&.large {
|
|
@apply px-5 py-3;
|
|
}
|
|
|
|
&.secondary {
|
|
@apply text-gray-50 bg-transparent;
|
|
|
|
&:disabled {
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
@apply cursor-not-allowed;
|
|
}
|
|
|
|
&.square {
|
|
@apply p-0 w-12 h-12;
|
|
|
|
&.small {
|
|
@apply w-8 h-8;
|
|
}
|
|
}
|
|
}
|
|
|
|
.primary {
|
|
@apply bg-blue-600 text-blue-50;
|
|
@apply hover:bg-blue-500 active:bg-blue-500 focus:ring-blue-400 focus:ring-opacity-75;
|
|
|
|
&.secondary {
|
|
@apply hover:bg-blue-600 active:bg-blue-600;
|
|
}
|
|
|
|
&:disabled {
|
|
@apply bg-blue-500/75 text-blue-200/75;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
@apply bg-gray-500 text-gray-50;
|
|
@apply hover:bg-gray-400 active:bg-gray-400 focus:ring-gray-300 focus:ring-opacity-50;
|
|
|
|
&.secondary {
|
|
@apply hover:bg-gray-500 active:bg-gray-500;
|
|
}
|
|
|
|
&:disabled {
|
|
@apply bg-gray-500/75 text-gray-200/75;
|
|
}
|
|
}
|
|
|
|
.danger {
|
|
@apply bg-red-600 text-gray-50;
|
|
@apply hover:bg-red-500 active:bg-red-500 focus:ring-red-400 focus:ring-opacity-75;
|
|
|
|
&.secondary {
|
|
@apply hover:bg-red-600 active:bg-red-600;
|
|
}
|
|
|
|
&:disabled {
|
|
@apply bg-red-600/75 text-red-50/75;
|
|
}
|
|
}
|