wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

implement new button styling

Browse source
This commit is contained in:
madrilene 2024-11-29 18:09:52 +01:00
parent 36488ad9f2
commit e342c7495d
1 changed files with 79 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
src/assets/css/global/blocks/button.css
View file

@ -1,47 +1,100 @@
.button { .button {
color: var(--button-text, var(--color-text)); --button-bg: var(--color-text);
background-color: var(--button-bg, var(--color-bg)); --button-color: color-mix(in oklab, var(--button-bg) 10%, var(--color-bg));
border: 2px solid var(--button-border, var(--color-text)); --button-hover-bg: color-mix(in oklab, var(--button-bg) 90%, var(--color-bg));
border-radius: var(--border-radius); --button-hover-color: color-mix(in oklab, var(--button-bg) 5%, var(--color-bg));
display: inline-block; --button-border-width: var(--border-thickness);
font: inherit; --button-border-style: solid;
padding: 0.3rem var(--space-s); --button-border-color: color-mix(in oklab, var(--button-bg) 80%, var(--color-text));
font-weight: var(--font-bold); --button-radius: var(--border-radius-small);
--button-font-weight: var(--font-bold);
--button-gap: var(--space-2xs);
--button-padding: var(--space-xs) var(--space-m);
--button-font-size: var(--size-step-0);
--button-text-transform: none;
display: inline-flex;
align-items: center;
gap: var(--button-gap);
padding: var(--button-padding);
background: var(--button-bg);
color: var(--button-color);
border-width: var(--button-border-width);
border-style: var(--button-border-style);
border-color: var(--button-border-color);
border-radius: var(--button-radius);
text-decoration: none; text-decoration: none;
text-align: center; font-weight: var(--button-font-weight);
font-size: var(--button-font-size);
line-height: var(--leading-flat);
text-transform: var(--button-text-transform);
/* trim the space at the cap height - in Safari Technology Preview */
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
} }
.button svg {
block-size: var(--button-icon-size, 1.2cap);
flex: none;
}
/* Hover/focus/active */
.button:hover, .button:hover,
.button[aria-current='page'], .button[aria-current='page'],
.button[aria-pressed='true'], .button[aria-pressed='true'],
.button[data-state='active'] { .button[data-state='active'] {
background-size: 150% 150%; background: var(--button-hover-bg);
--button-bg: var(--color-text); color: var(--button-color);
--button-text: var(--color-bg); }
--button-border: var(--color-text);
.button:focus {
outline-color: var(--button-outline-color, var(--button-border-color));
} }
.button:active { .button:active {
transform: scale(99%); transform: scale(99%);
} }
.button:where(:has(svg)) { /* Variants */
display: flex; .button[data-button-variant='primary'] {
gap: 0.5em; --button-bg: var(--color-primary);
align-items: center; --button-color: var(--color-light);
--button-color: color-mix(in oklab, var(--color-primary) 5%, var(--color-light));
} }
.button:where(:has(.visually-hidden)) { .button[data-button-variant='secondary'] {
border-radius: 50%; --button-bg: var(--color-secondary);
padding: 0.5em; --button-color: var(--color-light);
--button-color: color-mix(in oklab, var(--color-secondary) 5%, var(--color-light));
} }
/* all buttons have a min size */ .button[data-button-variant='tertiary'] {
.button:where(:not(:has(svg))) { --button-bg: var(--color-tertiary);
text-align: center; --button-color: var(--color-dark);
min-inline-size: 6ch; --button-color: color-mix(in oklab, var(--color-tertiary) 10%, var(--color-dark));
} }
.button:where(:not(:has(.visually-hidden))) { .button[data-ghost-button] {
padding: var(--button-padding, 0.35em 1em); --button-bg: var(--color-bg);
--button-border-color: var(--color-text);
--button-color: var(--color-text);
--button-hover-color: var(--color-bg);
}
.button[data-ghost-button]:hover {
--_ghost-hover-bg: var(--button-bg);
--_ghost-hover-bg: color-mix(in oklab, var(--button-bg) 95%, var(--color-dark));
background: var(--_ghost-hover-bg);
}
.button[data-small-button] {
--button-border-width: 2px;
--button-radius: var(--border-radius-small);
--button-font-size: var(--size-step-min-2);
--button-padding: var(--space-3xs) var(--space-xs);
--button-text-transform: uppercase;
}
/* Radius variants */
.button[data-button-radius='hard'] {
--button-radius: 0;
} }