adrema/resources/css/buttons.css

62 lines
1.3 KiB
CSS

.btn {
@apply px-3 py-2 uppercase no-underline text-sm text-white items-center justify-center bg-primary-700 rounded;
svg {
}
&.btn-sm {
@apply text-xs px-2 py-1;
svg {
@apply w-3 h-3 text-primary-100 flex-none;
}
}
&.btn-primary {
@apply bg-primary-700;
&:hover {
@apply bg-primary-500;
}
}
&.btn-primary-light {
@apply bg-primary-600 text-primary-800;
&:hover {
@apply bg-primary-500 text-primary-700;
}
}
&.btn-warning {
@apply bg-yellow-700;
&:hover {
@apply bg-yellow-500;
}
}
&.btn-info {
@apply bg-blue-700;
&:hover {
@apply bg-blue-500;
}
}
&.btn-danger {
@apply bg-red-700;
&:hover {
@apply bg-red-500;
}
}
&.label {
@apply rounded-full leading-none transition-all normal-case;
&.primary {
@apply bg-primary-800 text-primary-500;
&:hover {
@apply text-primary-400 bg-primary-700;
}
}
}
&.icon {
@apply p-0 flex justify-center items-center w-6 h-6;
svg {
@apply w-3 h-3 text-primary-100 flex-none;
}
}
}