misc_pterodactyl-panel/resources/scripts/components/elements/button/style.module.css
2022-06-20 17:26:47 -04:00

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;
}
}