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

Remove wa-off

Browse Source
This commit is contained in:
Lea Verou
2024-12-19 01:38:07 -05:00
parent 8d83076ef2
commit 474d8d7c7b
2 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/styles/native/checkbox.css
View File

@@ -1,5 +1,5 @@
input[type='checkbox']:where(:not(:host *, .wa-off, .wa-off-deep *)),
label:has(input[type='checkbox']):where(:not(:host *, .wa-off, .wa-off-deep *)),
input[type='checkbox']:where(:not(:host *)),
label:has(input[type='checkbox']):where(:not(:host *)),
:host {
--background-color: var(--wa-form-control-background-color);
--background-color-checked: var(--wa-form-control-activated-color);
@@ -20,7 +20,7 @@ label:has(input[type='checkbox']):where(:not(:host *, .wa-off, .wa-off-deep *)),
}
/* Replace native checkbox styles */
input[type='checkbox']:where(:not(:host *, .wa-off, .wa-off-deep *)) {
input[type='checkbox']:where(:not(:host *)) {
appearance: none;
margin: 0;
@@ -35,7 +35,7 @@ input[type='checkbox']:where(:not(:host *, .wa-off, .wa-off-deep *)) {
}
}
input[type='checkbox']:where(:not(:host *, .wa-off, .wa-off-deep *)),
input[type='checkbox']:where(:not(:host *)),
:host .control {
flex: 0 0 auto;
position: relative;
@@ -62,15 +62,15 @@ input[type='checkbox']:where(:not(:host *, .wa-off, .wa-off-deep *)),
}
/* Set cursor for input and labels */
input[type='checkbox']:where(:not(:host *, .wa-off, .wa-off-deep *)),
label:has(input[type='checkbox']):where(:not(:host *, .wa-off, .wa-off-deep *)),
input[type='checkbox']:where(:not(:host *, .wa-off, .wa-off-deep *)) + label,
input[type='checkbox']:where(:not(:host *)),
label:has(input[type='checkbox']):where(:not(:host *)),
input[type='checkbox']:where(:not(:host *)) + label,
:host [part~='base'] {
cursor: pointer;
}
/* Checked */
input[type='checkbox']:is(:checked, :indeterminate):where(:not(:host *, .wa-off, .wa-off-deep *)),
input[type='checkbox']:is(:checked, :indeterminate):where(:not(:host *)),
[part~='base'] .control:has(:checked, :indeterminate) /* scoping this rule to :host breaks in Firefox */ {
color: var(--checked-icon-color);
border-color: var(--border-color-checked);
@@ -78,15 +78,15 @@ input[type='checkbox']:is(:checked, :indeterminate):where(:not(:host *, .wa-off,
}
/* Focus */
input[type='checkbox']:focus-visible:where(:not(:host *, .wa-off, .wa-off-deep *)),
input[type='checkbox']:focus-visible:where(:not(:host *)),
[part~='base'] .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 */
input[type='checkbox']:disabled:where(:not(:host *, .wa-off, .wa-off-deep *)),
label:has(input[type='checkbox']:disabled):where(:not(:host *, .wa-off, .wa-off-deep *)),
input[type='checkbox']:disabled:where(:not(:host *)),
label:has(input[type='checkbox']:disabled):where(:not(:host *)),
:host [part~='base']:has(input:disabled) {
opacity: 0.5;
cursor: not-allowed;

6
src/styles/native/details.css
View File

@@ -1,4 +1,4 @@
details:where(:not(:host *, .wa-off, .wa-off-deep *)),
details:where(:not(:host *)),
:host {
--icon-color: var(--wa-color-text-quiet);
--spacing: var(--wa-space-m);
@@ -19,7 +19,7 @@ details:where(:not(:host *, .wa-off, .wa-off-deep *)),
}
}
details:where(:not(:host *, .wa-off, .wa-off-deep *)) summary,
details:where(:not(:host *)) summary,
:host summary /* nesting these summary styles in the rule above breaks in Firefox and Safari */ {
display: flex;
align-items: center;
@@ -43,7 +43,7 @@ details:where(:not(:host *, .wa-off, .wa-off-deep *)) summary,
}
}
details:not(:host *, .wa-off, .wa-off-deep *) {
details:not(:host *) {
summary::after {
content: '';
background-color: var(--icon-color);