mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 07:29:14 +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>
119 lines
3.1 KiB
CSS
119 lines
3.1 KiB
CSS
.wa-text-field,
|
|
:host,
|
|
textarea,
|
|
input:where(:not(
|
|
/* Exclude inputs that don't accept text */
|
|
[type='button'],
|
|
[type='checkbox'],
|
|
[type='color'],
|
|
[type='file'],
|
|
[type='hidden'],
|
|
[type='image'],
|
|
[type='radio'],
|
|
[type='range'],
|
|
[type='reset'],
|
|
[type='submit']
|
|
)) {
|
|
&:not(:host *) {
|
|
/* Defaults for root element. */
|
|
--outlined-background-color: var(--wa-form-control-background-color);
|
|
--outlined-border-color: var(--wa-form-control-border-color);
|
|
--outlined-text-color: var(--wa-form-control-value-color);
|
|
|
|
:where(&) {
|
|
/* Defaults with 0 specificity.
|
|
* Do NOT reset --background-color and --border-color here so they trickle in from the appearance utils
|
|
* Instead we provide the fallback when setting
|
|
*/
|
|
--border-width: var(--wa-form-control-border-width);
|
|
--box-shadow: initial;
|
|
}
|
|
}
|
|
|
|
/* Style native inputs and <wa-input>'s visible container */
|
|
&:not(.wa-text-field *, :host input, :host textarea) {
|
|
border-color: var(--border-color, var(--wa-form-control-border-color));
|
|
border-radius: var(--wa-form-control-border-radius);
|
|
border-style: var(--wa-form-control-border-style);
|
|
cursor: text;
|
|
color: var(--wa-form-control-value-color);
|
|
font-size: var(--wa-size);
|
|
font-family: inherit;
|
|
font-weight: var(--wa-form-control-value-font-weight);
|
|
line-height: var(--wa-form-control-value-line-height);
|
|
vertical-align: middle;
|
|
width: 100%;
|
|
transition:
|
|
background-color var(--wa-transition-normal),
|
|
border var(--wa-transition-normal),
|
|
outline var(--wa-transition-fast);
|
|
transition-timing-function: var(--wa-transition-easing);
|
|
}
|
|
|
|
/* Style text controls of inputs, including within <wa-input> */
|
|
&:where(:not(:host, .wa-text-field :is(input, textarea))) {
|
|
background-color: var(--background-color, var(--wa-form-control-background-color));
|
|
border-width: var(--border-width);
|
|
box-shadow: var(--box-shadow);
|
|
padding: var(--wa-space-smaller) var(--wa-space);
|
|
|
|
/* Style focused inputs */
|
|
&:focus-within {
|
|
outline: var(--wa-focus-ring);
|
|
outline-offset: var(--wa-focus-ring-offset);
|
|
}
|
|
|
|
/* Style disabled inputs */
|
|
&:has(:disabled),
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
&:where(input, textarea) {
|
|
/* Actual inputs */
|
|
&:autofill {
|
|
&,
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
box-shadow: none;
|
|
caret-color: var(--wa-form-control-value-color);
|
|
}
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--wa-form-control-placeholder-color);
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wa-text-field input {
|
|
/*
|
|
Fixes an alignment issue with placeholders.
|
|
https://github.com/shoelace-style/webawesome/issues/342
|
|
*/
|
|
height: 100%;
|
|
}
|
|
|
|
.wa-text-field input,
|
|
.wa-text-field textarea {
|
|
padding: 0;
|
|
border: none;
|
|
outline: none;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
cursor: inherit;
|
|
-webkit-appearance: none;
|
|
font: inherit;
|
|
}
|
|
|
|
.wa-pill,
|
|
:host([pill]) {
|
|
border-radius: var(--wa-border-radius-pill);
|
|
}
|