mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
e046015ed5
* formatting, docs tweaks * FA theme cleanup * Revert removal of `--wa-form-control-height-*` * Classic theme cleanup * Use consistent selectors for dark mode * Clean slate for additional themes * Retire depth stylesheets * Move header styles for themer out of themes * Missed instance of dark mode selector * Migration theme cleanup * Brutalist theme cleanup * Changelog for new themes * Playful theme cleanup * Formatting * Default theme update * Add tests for form theming * Fix test typo * Change misnamed `multiplier` properties to `scale` * Active theme cleanup * Mellow theme cleanup * Cleanup unused FA styles * Glassy theme progress * Add checked styles to glassy * Fix typo * Final FA theme cleanup * Rename FA theme to 'Awesome', allow in alpha * Final brutalist theme cleanup * A few more brutalist tweaks * One last brutalist tweak * Final mellow theme cleanup * Final Tailwind theme cleanup * Final active theme cleanup * Some classic theme cleanup * Remove unused `--wa-form-control-height-*` * Rename `--wa-form-control-resting-color` to `border-color` * Touch up callout `appearance` styles * Add more themes to alpha * Add changelog for removal of `--wa-form-control-height-*` * Clean up colors * Final classic theme cleanup * Add new themes to alpha build * Re-add teal (used by Awesome theme) * sync mobile/desktop theme pickers and don't dup IDs * Remove `color/standard.css` (duplicates `/themes/default/color.css`) * add view transition * Add premium theme for later cleanup * Accommodate new tag `appearance` styles * Revise `--wa-form-control-height-*` changelog entry Co-authored-by: Lea Verou <lea@verou.me> * Improve `--wa-border-width-scale` description Co-authored-by: Lea Verou <lea@verou.me> * Better border docs * Premium tweaks --------- Co-authored-by: Cory LaViska <cory@abeautifulsite.net> Co-authored-by: Lea Verou <lea@verou.me>
109 lines
2.8 KiB
CSS
109 lines
2.8 KiB
CSS
:host {
|
|
--background-color: var(--wa-form-control-background-color);
|
|
--background-color-checked: var(--wa-form-control-activated-color);
|
|
--border-color: var(--wa-form-control-border-color);
|
|
--border-color-checked: var(--background-color-checked);
|
|
--border-style: var(--wa-form-control-border-style);
|
|
--border-width: var(--wa-form-control-border-width);
|
|
--box-shadow: initial;
|
|
--height: calc(1em * var(--wa-form-control-value-line-height));
|
|
--thumb-color: var(--wa-form-control-border-color);
|
|
--thumb-color-checked: var(--wa-form-control-background-color);
|
|
--thumb-shadow: initial;
|
|
--thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75);
|
|
--width: calc(var(--height) * 1.75);
|
|
|
|
display: inline-block;
|
|
}
|
|
|
|
label {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
font: inherit;
|
|
color: var(--wa-form-control-value-color);
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.switch {
|
|
flex: 0 0 auto;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: var(--width);
|
|
height: var(--height);
|
|
background-color: var(--background-color);
|
|
border-color: var(--border-color);
|
|
border-radius: var(--height);
|
|
border-style: var(--border-style);
|
|
border-width: var(--border-width);
|
|
box-shadow: var(--box-shadow);
|
|
transition-property: translate, background, border-color, box-shadow;
|
|
transition-duration: var(--wa-transition-normal);
|
|
transition-timing-function: var(--wa-transition-easing);
|
|
}
|
|
|
|
.switch .thumb {
|
|
width: var(--thumb-size);
|
|
height: var(--thumb-size);
|
|
background-color: var(--thumb-color);
|
|
border-radius: 50%;
|
|
box-shadow: var(--thumb-shadow);
|
|
translate: calc((var(--width) - var(--height)) / -2);
|
|
transition: inherit;
|
|
}
|
|
|
|
.input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Focus */
|
|
label:not(.disabled) .input:focus-visible ~ .switch .thumb {
|
|
outline: var(--wa-focus-ring);
|
|
outline-offset: var(--wa-focus-ring-offset);
|
|
}
|
|
|
|
/* Checked */
|
|
.checked .switch {
|
|
background-color: var(--background-color-checked);
|
|
border-color: var(--border-color-checked);
|
|
}
|
|
|
|
.checked .switch .thumb {
|
|
background-color: var(--thumb-color-checked);
|
|
translate: calc((var(--width) - var(--height)) / 2);
|
|
}
|
|
|
|
/* Disabled */
|
|
label:has(> :disabled) {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
[part~='label'] {
|
|
display: inline-block;
|
|
line-height: var(--height);
|
|
margin-inline-start: 0.5em;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
:host([required]) [part~='label']::after {
|
|
content: var(--wa-form-control-required-content);
|
|
color: var(--wa-form-control-required-content-color);
|
|
margin-inline-start: var(--wa-form-control-required-content-offset);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
:checked:enabled + .switch:hover .thumb,
|
|
:checked + .switch .thumb {
|
|
background-color: ButtonText;
|
|
}
|
|
}
|