Râu Cao
843bcd8cb9
This cleans up the code quite a bit, but also allows links in editable content to be rendered with the default style.
68 lines
1.7 KiB
CSS
68 lines
1.7 KiB
CSS
@layer components {
|
|
.btn-text-dark { @apply text-black; }
|
|
.btn-text-dark:hover { @apply text-black no-underline; }
|
|
.btn-text-dark:visited { @apply text-black; }
|
|
.btn-text-dark:active { @apply text-black; }
|
|
.btn-text-light { @apply text-white; }
|
|
.btn-text-light:hover { @apply text-white no-underline; }
|
|
.btn-text-light:visited { @apply text-white; }
|
|
.btn-text-light:active { @apply text-white; }
|
|
|
|
.btn {
|
|
@apply btn-text-dark;
|
|
@apply inline-block font-semibold rounded-md leading-none cursor-pointer text-center
|
|
transition-colors duration-75 focus:outline-none focus:ring-4;
|
|
}
|
|
|
|
.btn-md {
|
|
@apply btn;
|
|
@apply py-3 px-6;
|
|
}
|
|
|
|
.btn-sm {
|
|
@apply btn;
|
|
@apply py-1 px-2 text-sm;
|
|
}
|
|
|
|
.btn-icon {
|
|
@apply py-2 px-3;
|
|
}
|
|
|
|
.btn-outline {
|
|
@apply py-2 border-2 border-gray-100 hover:bg-gray-100;
|
|
}
|
|
|
|
.btn-gray {
|
|
@apply bg-gray-100 hover:bg-gray-200
|
|
focus:ring-gray-300 focus:ring-opacity-75;
|
|
}
|
|
|
|
.btn-blue {
|
|
@apply btn-text-light;
|
|
@apply bg-blue-500 hover:bg-blue-600
|
|
focus:ring-blue-400 focus:ring-opacity-75;
|
|
}
|
|
|
|
.btn-emerald {
|
|
@apply btn-text-light;
|
|
@apply bg-emerald-500 hover:bg-emerald-600
|
|
focus:ring-emerald-400 focus:ring-opacity-75;
|
|
}
|
|
|
|
.btn-red {
|
|
@apply btn-text-light;
|
|
@apply bg-red-600 hover:bg-red-700
|
|
focus:ring-red-500 focus:ring-opacity-75;
|
|
}
|
|
|
|
.btn-outline-purple {
|
|
@apply border-2 border-purple-500 hover:bg-purple-100
|
|
focus:ring-purple-400 focus:ring-opacity-75;
|
|
}
|
|
|
|
.btn:disabled {
|
|
@apply bg-gray-100 hover:bg-gray-200 text-gray-400
|
|
focus:ring-gray-300 focus:ring-opacity-75;
|
|
}
|
|
}
|