@kanton-basel-stadt/designsystem
Version:
Unplugin to install the digital design system of the canton of Basel-Stadt
227 lines (189 loc) • 6.48 kB
CSS
@layer components {
/* There are several button types: weak, strong, action, super, success and failure. For the sake of simplicity, "weak" is the default. */
/* For each button type (except "action" and "super"), there are two size variations: base and sm. base is the default. */
/* For each button type and each size, there are different states. Each state is implemented with pseudo classes. */
/* Buttons may have icons on their left, right, be icon only or have no icon at all. These icons are placed both in the DOM via markup and with classes. */
.button {
/* Basics */
@apply rounded-[20px] border font-medium inline-grid min-h-40 min-w-40 text-left relative overflow-hidden w-auto items-center gap-[7px] justify-start max-w-fit;
@apply text-base px-[0.75em] pt-[0.55em] pb-[0.45em];
@apply hyphens-auto;
@apply focus-visible:outline focus-visible:outline-blue-900 focus-visible:outline-[3px] grid-flow-col;
/* Color Variables */
--button-text: theme(colors.blue-900);
--button-bg: theme(colors.gray-20);
--button-border: theme(colors.blue-900);
color: var(--button-text);
background: var(--button-bg);
border-color: var(--button-border);
&.is-strong {
--button-bg: theme(colors.blue-900);
--button-text: white;
/* Strong buttons never have a border, so we can force it to be the same as the background. */
--button-border: var(--button-bg) ;
&:focus-visible,
&:active,
.group\/button:focus-visible &,
.group\/button:active &,
&.is-focus,
&.is-active {
--button-bg: theme(colors.purple-600);
--button-text: white;
}
@apply contrast-more:font-bold contrast-more:border-3;
}
&:disabled,
&.is-disabled {
@apply pointer-events-none;
--button-text: theme(colors.gray-800);
--button-bg: theme(colors.gray-300);
--button-border: theme(colors.gray-300);
}
&:hover,
&.is-hover,
.group\/button:hover & {
--button-text: white;
--button-bg: theme(colors.blue-600);
--button-border: theme(colors.blue-900);
}
&:focus-visible,
&:active,
.group\/button:focus-visible &,
.group\/button:active &,
&.is-focus,
&.is-active {
--button-text: theme(colors.purple-900);
--button-bg: theme(colors.purple-200);
--button-border: theme(colors.purple-900);
}
svg {
@apply shrink-0; /* So any flexbox shenanigans don't resize the icon. */
@apply w-20 h-20;
}
&.is-sm {
@apply text-sm min-w-30 min-h-30 leading-none px-10 rounded-[15px] gap-5;
svg {
@apply w-[16px] h-[16px] -my-5;
}
&.is-icon-only {
@apply !w-30 !h-30;
}
}
&.is-icon-only {
@apply w-40 h-40 p-0 items-center justify-center;
}
}
.button.is-success {
--button-text: theme(colors.green-600);
--button-bg: white;
--button-border: theme(colors.green-600);
}
.button.is-failure {
--button-text: theme(colors.red-700);
--button-bg: white;
--button-border: theme(colors.red-700);
}
.button.is-inverted {
--button-text: theme(colors.blue-900);
--button-bg: white;
--button-border: theme(colors.blue-900);
&:hover,
&.is-hover,
.group\/button:hover & {
--button-text: white;
--button-bg: theme(colors.blue-500);
--button-border: theme(colors.blue-900);
}
&:focus-visible,
&:active,
.group\/button:focus-visible &,
.group\/button:active &,
&.is-focus,
&.is-active {
--button-text: white;
--button-bg: theme(colors.purple-600);
--button-border: theme(colors.purple-600);
}
}
.button.is-feedback {
--button-text: theme(colors.green-700);
--button-bg: theme(colors.green-100);
--button-border: theme(colors.green-700);
&:before {
@apply content-check;
}
}
.button.is-loading {
color: transparent;
&:before {
@apply absolute text-center left-0 w-full h-full flex items-center justify-center text-[1.5em] content-empty;
background-color: var(--button-text);
/* Use the loading spinner as a mask. */
mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDI0IDI0Ij48c3R5bGU+QGtleWZyYW1lcyBzcGlubmVyX3hlN1F7MTAwJXtyOjNweH05My43NSV7cjozcHh9NDYuODc1JXtyOi4ycHh9fS5zcGlubmVyX2IyVDd7YW5pbWF0aW9uOnNwaW5uZXJfeGU3USAuOHMgbGluZWFyIGluZmluaXRlfTwvc3R5bGU+PGNpcmNsZSBjeD0iNCIgY3k9IjEyIiByPSIzIiBmaWxsPSJjdXJyZW50Q29sb3IiIGNsYXNzPSJzcGlubmVyX2IyVDciLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIzIiBmaWxsPSJjdXJyZW50Q29sb3IiIGNsYXNzPSJzcGlubmVyX2IyVDciIHN0eWxlPSJhbmltYXRpb24tZGVsYXk6LS42NXMiLz48Y2lyY2xlIGN4PSIyMCIgY3k9IjEyIiByPSIzIiBmaWxsPSJjdXJyZW50Q29sb3IiIGNsYXNzPSJzcGlubmVyX2IyVDciIHN0eWxlPSJhbmltYXRpb24tZGVsYXk6LS41cyIvPjwvc3ZnPg==') no-repeat 50% 50%;
}
}
.button.is-dropdown {
&:after {
@apply translate-y-[-0.175em] text-[1.25em] leading-[0.5em] content-caret-south;
}
&.is-active {
&:after {
@apply translate-y-[0.2em] content-caret-north;
}
}
}
/* Icon modifiers. */
.button.is-prev:before {
@apply font-bold !order-first !content-arrow-west;
}
.button.is-prev:hover:before,
.group\/button:hover .button.is-prev:before {
@apply !animate-jump-x-reverse;
}
.button.is-next:before {
@apply font-bold !order-last !content-arrow-east;
}
.button.is-next:hover:before,
.group\/button:hover .button.is-next:before {
@apply !animate-jump-x;
}
.button.is-close {
&:before {
@apply font-bold !order-first !content-cross;
}
&:hover:before {
@apply animate-rotate animation-rotation-90 animation-duration-150;
}
}
.button.is-add {
&:before {
@apply !order-first text-[1.3em] !content-plus;
}
&:hover:before {
@apply animate-rotate animation-rotation-90 animation-duration-150;
}
}
.button.is-reload {
&:before {
@apply !order-first leading-none !content-reload;
transform-origin: 50% 47%;
}
&:hover:before {
@apply animate-rotate;
}
}
.button.is-check {
&:before {
@apply font-bold !order-first !content-check;
}
&:hover:before {
@apply animate-jump-scale;
}
}
.button.is-action {
@apply font-bold text-sm;
svg {
@apply text-base;
}
}
}