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 #451 without changing logic/specificity

Browse Source
This commit is contained in:
Lea Verou
2025-01-08 14:22:06 -05:00
parent 06e432589f
commit a87f3627bb
2 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/styles/native/input.css
View File

@@ -14,13 +14,22 @@ input:where(:not(
[type='reset'],
[type='submit']
)) {
&:not(:host *) {
/* Styling root, i.e. excluding elements within a host.
This is so that these properties can be overridden.
*/
&:not(:host *),
/* Safari and FF don't like :host:not(:host *) or :where(:host) so we need to add :host explicitly.
However, we can't just specify :host, because then it would become & :host which matches nothing.
:host(*) is the same as :host and the & prevents it from becoming a descendant selector.
*/
:host(:is(&, *)) {
/* 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(&) {
:where(&),
:host(: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

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

@@ -6,7 +6,12 @@ label:has(select),
--outlined-border-color: var(--wa-form-control-border-color);
--outlined-text-color: var(--wa-form-control-value-color);
:where(&) {
/* Safari and FF don't like :where(:host) so we need to add :host explicitly.
However, we can't just specify :host, because then it would become & :host which matches nothing.
:host(*) is the same as :host and the & prevents it from becoming a descendant selector.
*/
:where(&),
:host(: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