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

Style: Add focus for aria-invalid form elements

Browse source
This commit is contained in:
Lucas Larroche 2021-11-08 01:55:20 +07:00
parent 76c1b3d9b8
commit 0b3f1656f2
24 changed files with 131 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

34
scss/content/_form-checkbox-radio.scss
View file

@ -119,35 +119,21 @@
margin-inline-end: 0;
}
}
}
// Aria-invalid
// Aria-invalid
[type="checkbox"],
[type="checkbox"]:checked,
[type="radio"],
[type="radio"]:checked,
[type="checkbox"][role="switch"],
[type="checkbox"][role="switch"]:checked {
&[aria-invalid="false"] {
--border-color: var(--form-element-valid-border-color);
&:active,
&:focus {
@if $enable-important {
--border-color: var(
--form-element-valid-active-border-color
) !important;
} @else {
--border-color: var(--form-element-valid-active-border-color);
}
}
}
&[aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color);
&:active,
&:focus {
@if $enable-important {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
} @else {
--border-color: var(--form-element-invalid-active-border-color);
}
}
}
}
}

14
scss/content/_form.scss
View file

@ -253,26 +253,26 @@ textarea {
&:active,
&:focus {
@if $enable-important {
--border-color: var(
--form-element-valid-active-border-color
) !important;
--border-color: var(--form-element-valid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
} @else {
--border-color: var(--form-element-valid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
}
}
}
&[aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color);
&:active,
&:focus {
@if $enable-important {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
--border-color: var(--form-element-invalid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
} @else {
--border-color: var(--form-element-invalid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
}
}
}

2
scss/themes/default/_dark.scss
View file

@ -66,8 +66,10 @@
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #{$red-900};
--form-element-invalid-active-border-color: #{$red-800};
--form-element-invalid-focus-color: #{rgba($red-800, 0.25)};
--form-element-valid-border-color: #{$green-800};
--form-element-valid-active-border-color: #{$green-700};
--form-element-valid-focus-color: #{rgba($green-700, 0.25)};
// Switch (input[type="checkbox"][role="switch"])
--switch-background-color: #{mix($grey-800, $grey-700)};

6
scss/themes/default/_light.scss
View file

@ -66,9 +66,11 @@
--form-element-disabled-border-color: #{$grey-300};
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #{$red-800};
--form-element-invalid-active-border-color: #{$red-900};
--form-element-invalid-active-border-color: #{$red-700};
--form-element-invalid-focus-color: #{rgba($red-700, 0.125)};
--form-element-valid-border-color: #{$green-700};
--form-element-valid-active-border-color: #{$green-800};
--form-element-valid-active-border-color: #{$green-600};
--form-element-valid-focus-color: #{rgba($green-600, 0.125)};
// Switch (input[type="checkbox"][role="switch"])
--switch-background-color: #{$grey-200};