mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
b96c3f318b
* move print styles * begin native styles split * unsplit button styles 😓 * unsplit callout; remove .wa-callout * merge forms * remove unused * remove unused * unsplit checkbox * remove old astro config * remove overflow * unsplit slider * fix tooltip position in RTL * unsplit radio * move required light DOM styles to <wa-page> * remove unused file * remove unused import * remove * goodbye * fix examples * unsplit dialog * unsplit select * remove select * unsplit input * unsplit details * update * update comment * update textarea * combine native docs; improvements * update * reorg and fix headings * fix details summary padding; fixes #684 * update * fix native details summary padding; fixes #684 * #684 * remove passthrough style nonsense * it's CSS not JS * fix details in sidebar * add spacing in native buttons for icons * whitespace * update docs * remove button group util * remove shadow folder, add component folder * layerize * default border radius * remove color contrast script from dist * add term * layerize themes + color folders * reorder * remove radio button; #504 * remove visual tests * remove visual tests * remove unused stylesheet * make search smarter * add radio styles * Fix filled textareas * re-introduce visual tests (with adjustments) * fix button appearances * fix textarea focus styles * re-introduce appearance classes * remove 'native styles' note from component pages * fix checked radio styles * touch up callout styles * remove errant `.wa-tag` * scope appearance classes to relevant elements * more visual test cases * fix details borders * minor visual tests reorg * add `--box-shadow` to buttons * fix Awesome theme * use same layer for all themes (allows unset properties to inherit from Default theme) * fix box-shadow in wa-textarea * set button box shadow to `initial` * fix Active theme * fix Brutalist theme * fix Glossy theme * fix Matter theme (mostly) * fix Playful theme * fix Premium theme * fix Shoelac theme * fix Tailspin theme * fix custom radio button styles * fix links to native styles doc --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design>
105 lines
2.9 KiB
CSS
105 lines
2.9 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(--wa-form-control-activated-color);
|
|
--border-radius: min(
|
|
calc(var(--toggle-size) * 0.375),
|
|
var(--wa-border-radius-s)
|
|
); /* min prevents entirely circular checkbox */
|
|
--border-style: var(--wa-border-style);
|
|
--border-width: var(--wa-form-control-border-width);
|
|
--box-shadow: none;
|
|
--checked-icon-color: var(--wa-color-brand-on-loud);
|
|
--toggle-size: 1lh;
|
|
|
|
color: var(--wa-form-control-value-color);
|
|
display: inline-flex;
|
|
font-family: inherit;
|
|
font-weight: var(--wa-form-control-value-font-weight);
|
|
line-height: var(--wa-form-control-value-line-height);
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
:host [part~='control'] {
|
|
flex: 0 0 auto;
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: var(--toggle-size);
|
|
height: var(--toggle-size);
|
|
border-color: var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
border-style: var(--border-style);
|
|
border-width: var(--border-width);
|
|
background-color: var(--background-color);
|
|
box-shadow: var(--box-shadow);
|
|
transition:
|
|
background var(--wa-transition-normal),
|
|
border-color var(--wa-transition-fast),
|
|
box-shadow var(--wa-transition-fast),
|
|
color var(--wa-transition-fast);
|
|
transition-timing-function: var(--wa-transition-easing);
|
|
|
|
margin-inline-end: var(--wa-space-xs);
|
|
}
|
|
|
|
:host [part~='base'] {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
color: var(--wa-form-control-value-color);
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Checked */
|
|
[part~='base'] [part~="control"]:has(:checked, :indeterminate) /* scoping this rule to :host breaks in Firefox */ {
|
|
color: var(--checked-icon-color);
|
|
border-color: var(--border-color-checked);
|
|
background-color: var(--background-color-checked);
|
|
}
|
|
|
|
/* Focus */
|
|
[part~='base'] [part~="control"]:has(> input:focus-visible:not(:disabled)) /* scoping this rule to :host breaks in Firefox */ {
|
|
outline: var(--wa-focus-ring);
|
|
outline-offset: var(--wa-focus-ring-offset);
|
|
}
|
|
|
|
/* Disabled */
|
|
:host [part~='base']:has(input:disabled) {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
input {
|
|
position: absolute;
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
[part~='icon'] {
|
|
display: flex;
|
|
|
|
/* Without this, Safari renders the icon slightly to the left */
|
|
&::part(svg) {
|
|
translate: 0.0009765625em;
|
|
}
|
|
|
|
input:not(:checked, :indeterminate) + & {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
: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);
|
|
}
|