78 lines
2.3 KiB
CSS
78 lines
2.3 KiB
CSS
.button {
|
|
/* Same box as the @tailwindcss/forms inputs (1px border, py-2, 24px line), so a button lines up with a field beside it.
|
|
The line height is set with each font size (text-sm/6), because text-sm's own line height would override a plain leading-6. */
|
|
@apply inline-flex items-center justify-center space-x-2 px-4 md:px-8 py-2 border border-transparent bg-origin-border cursor-pointer;
|
|
@apply uppercase text-center text-sm/6 md:text-base/6;
|
|
@apply transition-colors outline-hidden focus:outline-2 focus:outline-offset-2 focus:outline-primary-dark;
|
|
@apply rounded-md;
|
|
/* At least one line tall even when the content is only a smaller icon: line + padding + border */
|
|
min-height: calc(1lh + 2 * --spacing(2) + 2px);
|
|
}
|
|
|
|
.button--small {
|
|
@apply px-2 py-1 md:px-4 text-xs/6 sm:text-sm/6;
|
|
min-height: calc(1lh + 2 * --spacing(1) + 2px);
|
|
}
|
|
|
|
.button--primary {
|
|
/* Only the image: the background shorthand would reset .button's background-origin */
|
|
background-image: linear-gradient(120deg, #960167 0%, #9e036a 40%, #fa1a8c 100%);
|
|
@apply text-white;
|
|
@apply hover:bg-none hover:bg-pink/80;
|
|
}
|
|
|
|
.button[disabled] {
|
|
@apply cursor-not-allowed;
|
|
}
|
|
|
|
.button--secondary {
|
|
@apply bg-none bg-primary-light text-white;
|
|
@apply hover:bg-primary-light/50;
|
|
}
|
|
|
|
.button--neutral {
|
|
@apply bg-none bg-gray-200;
|
|
@apply hover:bg-gray-200/50;
|
|
}
|
|
|
|
.button--warning {
|
|
@apply bg-none bg-red-500 text-white;
|
|
@apply hover:bg-red-500/50;
|
|
}
|
|
|
|
.sbw {
|
|
.button--primary {
|
|
@apply bg-none bg-sbw-secondary text-white;
|
|
@apply hover:bg-none hover:bg-sbw-primary/50;
|
|
}
|
|
|
|
.button--secondary {
|
|
@apply bg-none bg-sbw-primary-dark text-white;
|
|
@apply hover:bg-none hover:bg-sbw-primary/50;
|
|
}
|
|
}
|
|
|
|
.snz {
|
|
.button--primary {
|
|
@apply bg-none bg-snz-secondary text-white;
|
|
@apply hover:bg-none hover:bg-snz-primary/50;
|
|
}
|
|
|
|
.button--secondary {
|
|
@apply bg-none bg-snz-primary-dark text-white;
|
|
@apply hover:bg-none hover:bg-snz-primary/50;
|
|
}
|
|
}
|
|
|
|
.ser {
|
|
.button--primary {
|
|
@apply bg-none bg-ser-secondary text-white;
|
|
@apply hover:bg-none hover:bg-ser-primary/50;
|
|
}
|
|
|
|
.button--secondary {
|
|
@apply bg-none bg-ser-primary text-white;
|
|
@apply hover:bg-none hover:bg-ser-primary/50;
|
|
}
|
|
}
|