extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-22 13:58:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve radio and checkbox accessibility

Browse Source
This commit is contained in:
zombieFox 2019-11-09 14:30:06 +00:00
parent 990094e0ed
commit 0f5fbd3b49
2 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/css/form.css
View File

@ -326,6 +326,9 @@ input[type="radio"] {
input[type="checkbox"]+label, input[type="checkbox"]+label,
input[type="radio"]+label { input[type="radio"]+label {
padding: 0.5em;
margin: -0.25em -0.5em;
border-radius: var(--theme-radius);
color: rgb(var(--form-label)); color: rgb(var(--form-label));
font-size: 1em; font-size: 1em;
font-family: var(--font-regular); font-family: var(--font-regular);
@ -334,19 +337,21 @@ input[type="radio"]+label {
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
transition: transform var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast); transition: transform var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
} }
input[type="checkbox"]:focus+label,
input[type="checkbox"]:hover+label, input[type="checkbox"]:hover+label,
input[type="radio"]:focus+label, input[type="checkbox"]:focus+label,
input[type="radio"]:hover+label { input[type="radio"]:hover+label,
input[type="radio"]:focus+label {
color: rgb(var(--form-label-hover)); color: rgb(var(--form-label-hover));
box-shadow: var(--form-hover-ring);
} }
input[type="checkbox"]:active+label, input[type="checkbox"]:active+label,
input[type="radio"]:active+label { input[type="radio"]:active+label {
color: rgb(var(--form-label-focus-active)); color: rgb(var(--form-label-focus-active));
box-shadow: var(--form-focus-ring-accent);
} }
input[type="checkbox"]:checked+label, input[type="checkbox"]:checked+label,
@ -355,8 +360,13 @@ input[type="radio"]:checked+label {
} }
input[type="checkbox"]:disabled+label, input[type="checkbox"]:disabled+label,
input[type="radio"]:disabled+label { input[type="checkbox"]:disabled:hover+label,
input[type="checkbox"]:disabled:focus+label,
input[type="radio"]:disabled+label,
input[type="radio"]:disabled:hover+label,
input[type="radio"]:disabled:focus+label {
color: rgb(var(--form-label-disabled)); color: rgb(var(--form-label-disabled));
box-shadow: none;
cursor: default; cursor: default;
} }
@ -974,6 +984,8 @@ input[type="range"]:disabled::-moz-range-progress {
.form-grid input[type="checkbox"]+label, .form-grid input[type="checkbox"]+label,
.form-grid input[type="radio"]+label { .form-grid input[type="radio"]+label {
background-color: transparent; background-color: transparent;
padding: 0;
margin: 0;
display: block; display: block;
width: calc(var(--form-thumb-size) * 1.75); width: calc(var(--form-thumb-size) * 1.75);
height: calc(var(--form-thumb-size) * 1.75); height: calc(var(--form-thumb-size) * 1.75);
@ -982,6 +994,13 @@ input[type="range"]:disabled::-moz-range-progress {
z-index: 1; z-index: 1;
} }
.form-grid input[type="checkbox"]:hover+label,
.form-grid input[type="checkbox"]:focus+label,
.form-grid input[type="radio"]:hover+label,
.form-grid input[type="radio"]:focus+label {
box-shadow: none;
}
.form-grid input[type="checkbox"]+label:before, .form-grid input[type="checkbox"]+label:before,
.form-grid input[type="radio"]+label:before { .form-grid input[type="radio"]+label:before {
content: ""; content: "";

4
src/css/variables.css
View File

@ -103,8 +103,8 @@
--form-group-text-border-disabled: var(--theme-gray-01); --form-group-text-border-disabled: var(--theme-gray-01);
--form-border-disabled: var(--theme-gray-02); --form-border-disabled: var(--theme-gray-02);
--form-icon: var(--theme-gray-08); --form-icon: var(--theme-gray-08);
--form-icon-hover-focus: var(--theme-gray-20); --form-icon-hover-focus: var(--theme-gray-16);
--form-icon-active: var(--theme-accent); --form-icon-active: var(--theme-style-text);
--form-icon-checked: var(--theme-style-text); --form-icon-checked: var(--theme-style-text);
--form-icon-disabled: var(--theme-gray-04); --form-icon-disabled: var(--theme-gray-04);
--form-placeholder: var(--theme-gray-06); --form-placeholder: var(--theme-gray-06);