Feat: Add disabled fieldsets

This commit is contained in:
Lucas Larroche 2022-03-06 21:45:05 +07:00 committed by GitHub
commit d56a20bd0f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 42 additions and 29 deletions

View file

@ -924,7 +924,8 @@ input[type=reset]:focus {
0 0 0 var(--outline-width) var(--secondary-focus);
}
:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),
a[role=button]:not([href]) {
opacity: 0.5;
pointer-events: none;
@ -1079,10 +1080,12 @@ textarea:focus {
input:not([type=submit]):not([type=button]):not([type=reset])[disabled],
select[disabled],
textarea[disabled] {
textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity);
pointer-events: none;
}
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1027,7 +1027,8 @@ input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
--color: var(--contrast-hover);
}
:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),
a[role=button]:not([href]) {
opacity: 0.5;
pointer-events: none;
@ -1182,10 +1183,12 @@ textarea:focus {
input:not([type=submit]):not([type=button]):not([type=reset])[disabled],
select[disabled],
textarea[disabled] {
textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity);
pointer-events: none;
}
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {

File diff suppressed because one or more lines are too long

View file

@ -894,7 +894,8 @@ input[type=reset]:focus {
0 0 0 var(--outline-width) var(--secondary-focus);
}
:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),
a[role=button]:not([href]) {
opacity: 0.5;
pointer-events: none;
@ -1049,10 +1050,12 @@ textarea:focus {
input:not([type=submit]):not([type=button]):not([type=reset])[disabled],
select[disabled],
textarea[disabled] {
textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity);
pointer-events: none;
}
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -954,7 +954,8 @@ input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
--color: var(--contrast-hover);
}
:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),
a[role=button]:not([href]) {
opacity: 0.5;
pointer-events: none;
@ -1108,10 +1109,12 @@ textarea:focus {
input:not([type=submit]):not([type=button]):not([type=reset])[disabled],
select[disabled],
textarea[disabled] {
textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity);
pointer-events: none;
}
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -175,7 +175,8 @@ input[type="reset"],
// Button [disabled]
// Links without href are disabled by default
:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
:where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
a[role="button"]:not([href]) {
opacity: 0.5;
pointer-events: none;

View file

@ -198,14 +198,14 @@ textarea {
}
// Disabled
input:not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
&[disabled] {
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
select[disabled],
textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea) {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity);
}
pointer-events: none;
}
// Aria-invalid