js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix missing select styles, improve consistency (#450)

Browse Source 
* Refactor for consistency, fix missing theme styles

* Remove unused custom properties from docs

* Add missing custom property to docs

* Add UI test case
This commit is contained in:
Lindsay M
2025-01-08 12:04:22 -05:00
committed by GitHub
parent e55e091192
commit 3511a60b93
5 changed files with 57 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/input/input.ts
View File

@@ -54,6 +54,7 @@ import styles from './input.css';
* @csspart suffix - The container that wraps the suffix.
*
* @cssproperty --background-color - The input's background color.
* @cssproperty --border-color - The color of the input's borders.
* @cssproperty --border-width - The width of the input's borders. Expects a single value.
* @cssproperty --box-shadow - The shadow effects around the edges of the input.
*/

2
src/components/select/select.ts
View File

@@ -81,8 +81,6 @@ import styles from './select.css';
*
* @cssproperty --background-color - The background color of the select's combobox.
* @cssproperty --border-color - The border color of the select's combobox.
* @cssproperty --border-radius - The border radius of the select's combobox.
* @cssproperty --border-style - The style of the select's borders, including the listbox.
* @cssproperty --border-width - The width of the select's borders, including the listbox.
* @cssproperty --box-shadow - The shadow effects around the edges of the select's combobox.
*/

2
src/components/textarea/textarea.ts
View File

@@ -41,8 +41,6 @@ import styles from './textarea.css';
*
* @cssproperty --background-color - The textarea's background color.
* @cssproperty --border-color - The color of the textarea's borders.
* @cssproperty --border-radius - The border radius of the textarea's corners.
* @cssproperty --border-style - The style of the textarea's borders.
* @cssproperty --border-width - The width of the textarea's borders.
* @cssproperty --box-shadow - The shadow effects around the edges of the textarea.
*/

46
src/styles/native/select.css
View File

@@ -1,41 +1,45 @@
select,
label:has(select),
:host {
--background-color: var(--wa-form-control-background-color);
--border-color: var(--wa-form-control-border-color);
--border-radius: var(--wa-form-control-border-radius);
--border-style: var(--wa-form-control-border-style);
--border-width: var(--wa-form-control-border-width);
--box-shadow: initial;
/* 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;
}
}
select,
:host [part~='combobox'] {
background-color: var(--background-color);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);
background-color: var(--background-color, var(--wa-form-control-background-color));
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);
border-width: var(--border-width);
box-shadow: var(--box-shadow);
width: 100%;
min-width: 0;
position: relative;
color: var(--wa-form-control-value-color);
font-size: var(--wa-size);
cursor: pointer;
font-family: inherit;
font-size: var(--wa-size);
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
vertical-align: middle;
min-width: 0;
overflow: hidden;
cursor: pointer;
padding: var(--wa-space-smaller) var(--wa-space);
position: relative;
vertical-align: middle;
width: 100%;
transition:
background var(--wa-transition-normal),
background-color var(--wa-transition-normal),
border var(--wa-transition-normal),
box-shadow var(--wa-transition-normal),
color var(--wa-transition-normal),
outline var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
padding: var(--wa-space-smaller) var(--wa-space);
}
/* Add ellipses to multi select options */