mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 16:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: disabled checkboxes and radios without :has

Browse source
This commit is contained in:
Lucas Larroche 2023-03-19 10:03:00 +07:00
parent e022c7098e
commit dd799056c7
2 changed files with 6 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

5
scss/forms/_basics.scss
View file

@ -220,6 +220,7 @@
input:not([type="submit"], [type="button"], [type="reset"])[disabled], input:not([type="submit"], [type="button"], [type="reset"])[disabled],
select[disabled], select[disabled],
textarea[disabled], textarea[disabled],
label[aria-disabled="true"],
:where(fieldset[disabled]) :where(fieldset[disabled])
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) { :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
#{$✨}background-color: var(#{$✨}form-element-disabled-background-color); #{$✨}background-color: var(#{$✨}form-element-disabled-background-color);
@ -228,6 +229,10 @@
pointer-events: none; pointer-events: none;
} }
label[aria-disabled="true"] input[disabled] {
opacity: 1;
}
// Aria-invalid // Aria-invalid
:where(input, select, textarea) { :where(input, select, textarea) {
&:not( &:not(

16
scss/forms/_checkbox-radio-switch.scss
View file

@ -7,6 +7,7 @@
*/ */
// Labels // Labels
// Not working in Firefox, which doesn't support the `:has()` pseudo-class
label { label {
&:has([type="checkbox"], [type="radio"]) { &:has([type="checkbox"], [type="radio"]) {
width: fit-content; width: fit-content;
@ -14,21 +15,6 @@
} }
} }
// Disabled labels
label:has([disabled]),
[type="checkbox"][disabled] + label,
[type="radio"][disabled] + label {
opacity: var(#{$✨}form-element-disabled-opacity);
pointer-events: none;
}
label:has([disabled]) {
[type="checkbox"],
[type="radio"] {
opacity: initial;
}
}
[type="checkbox"], [type="checkbox"],
[type="radio"] { [type="radio"] {
-webkit-appearance: none; -webkit-appearance: none;