extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-26 04:21:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve form element focus states

Browse Source
This commit is contained in:
zombieFox 2019-11-17 12:58:46 +00:00
parent 6979a36c2a
commit 67d55a8e58
3 changed files with 57 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/auto-suggest.css
View File

@ -54,7 +54,7 @@
color: rgb(var(--form-input-text-hover)); color: rgb(var(--form-input-text-hover));
outline: none; outline: none;
text-decoration: none; text-decoration: none;
box-shadow: var(--form-hover-ring); box-shadow: var(--form-ring-hover);
} }
.auto-suggest-link:focus { .auto-suggest-link:focus {
@ -62,7 +62,7 @@
color: rgb(var(--form-input-text-focus-active)); color: rgb(var(--form-input-text-focus-active));
outline: none; outline: none;
text-decoration: none; text-decoration: none;
box-shadow: var(--form-focus-ring-accent); box-shadow: var(--form-ring-accent);
} }
.auto-suggest-link:active { .auto-suggest-link:active {

69
src/css/form.css
View File

@ -56,7 +56,7 @@ select:hover {
border-color: rgb(var(--form-input-border-hover)); border-color: rgb(var(--form-input-border-hover));
color: rgb(var(--form-label-hover)); color: rgb(var(--form-label-hover));
outline: none; outline: none;
box-shadow: var(--form-hover-ring); box-shadow: var(--form-ring-hover);
} }
select:focus, select:focus,
@ -69,7 +69,7 @@ select:active {
color: rgb(var(--form-label-focus-active)); color: rgb(var(--form-label-focus-active));
outline: none; outline: none;
z-index: 2; z-index: 2;
box-shadow: var(--form-focus-ring-accent); box-shadow: var(--form-ring-accent);
} }
select:disabled, select:disabled,
@ -115,7 +115,7 @@ textarea:hover {
border-color: rgb(var(--form-input-border-hover)); border-color: rgb(var(--form-input-border-hover));
color: rgb(var(--form-input-text-hover)); color: rgb(var(--form-input-text-hover));
outline: none; outline: none;
box-shadow: var(--form-hover-ring); box-shadow: var(--form-ring-hover);
} }
textarea:focus, textarea:focus,
@ -124,7 +124,7 @@ textarea:active {
border-color: rgb(var(--form-input-border-focus-active)); border-color: rgb(var(--form-input-border-focus-active));
color: rgb(var(--form-input-text-focus-active)); color: rgb(var(--form-input-text-focus-active));
outline: none; outline: none;
box-shadow: var(--form-focus-ring-accent); box-shadow: var(--form-ring-accent);
} }
textarea:disabled { textarea:disabled {
@ -206,7 +206,7 @@ input[type="text"]:hover {
border-color: rgb(var(--form-input-border-hover)); border-color: rgb(var(--form-input-border-hover));
color: rgb(var(--form-input-text-hover)); color: rgb(var(--form-input-text-hover));
outline: none; outline: none;
box-shadow: var(--form-hover-ring); box-shadow: var(--form-ring-hover);
} }
input[type="email"]:focus, input[type="email"]:focus,
@ -226,7 +226,7 @@ input[type="text"]:active {
color: rgb(var(--form-input-text-focus-active)); color: rgb(var(--form-input-text-focus-active));
outline: none; outline: none;
z-index: 2; z-index: 2;
box-shadow: var(--form-focus-ring-accent); box-shadow: var(--form-ring-accent);
} }
input[type="email"]:disabled, input[type="email"]:disabled,
@ -389,18 +389,18 @@ input[type="radio"]+label .label-icon {
border-radius: 50%; border-radius: 50%;
} }
input[type="checkbox"]:focus+label .label-icon,
input[type="checkbox"]:hover+label .label-icon, input[type="checkbox"]:hover+label .label-icon,
input[type="radio"]:focus+label .label-icon, input[type="checkbox"]:focus+label .label-icon,
input[type="radio"]:hover+label .label-icon { input[type="radio"]:hover+label .label-icon,
background-color: rgb(var(--form-icon-focus-hover)); input[type="radio"]:focus+label .label-icon {
box-shadow: var(--form-hover-ring); background-color: rgb(var(--form-icon-hover));
box-shadow: var(--form-ring-hover);
} }
input[type="checkbox"]:active+label .label-icon, input[type="checkbox"]:active+label .label-icon,
input[type="radio"]:active+label .label-icon { input[type="radio"]:active+label .label-icon {
background-color: rgb(var(--form-icon-active)); background-color: rgb(var(--form-icon-active));
box-shadow: var(--form-focus-ring-accent); box-shadow: var(--form-ring-accent);
transition: none; transition: none;
} }
@ -409,6 +409,13 @@ input[type="radio"]:checked+label .label-icon {
background-color: rgb(var(--form-icon-checked)); background-color: rgb(var(--form-icon-checked));
} }
input[type="checkbox"]:checked:focus+label .label-icon,
input[type="checkbox"]:checked:active+label .label-icon,
input[type="radio"]:checked:focus+label .label-icon,
input[type="radio"]:checked:active+label .label-icon {
box-shadow: var(--form-ring-accent);
}
input[type="checkbox"]:disabled+label .label-icon, input[type="checkbox"]:disabled+label .label-icon,
input[type="checkbox"]:disabled:hover+label .label-icon, input[type="checkbox"]:disabled:hover+label .label-icon,
input[type="checkbox"]:disabled:focus+label .label-icon, input[type="checkbox"]:disabled:focus+label .label-icon,
@ -538,12 +545,12 @@ input[type="color"] {
input[type="color"]:hover { input[type="color"]:hover {
outline: none; outline: none;
box-shadow: var(--form-hover-ring); box-shadow: var(--form-ring-hover);
} }
input[type="color"]:focus { input[type="color"]:focus {
outline: none; outline: none;
box-shadow: var(--form-focus-ring); box-shadow: var(--form-ring-focus);
} }
input[type="color"]:disabled { input[type="color"]:disabled {
@ -559,21 +566,31 @@ input[type="color"]:disabled:focus {
input[type="color"]::-webkit-color-swatch-wrapper { input[type="color"]::-webkit-color-swatch-wrapper {
border: 0; border: 0;
padding: 0; padding: 0;
outline: none;
} }
input[type="color"]::-webkit-color-swatch { input[type="color"]::-webkit-color-swatch {
border: 0; border: 0;
padding: 0; padding: 0;
outline: none;
} }
input[type="color"]::-moz-color-swatch-wrapper { input[type="color"]::-moz-color-swatch-wrapper {
border: 0; border: 0;
padding: 0; padding: 0;
outline: none;
} }
input[type="color"]::-moz-color-swatch { input[type="color"]::-moz-color-swatch {
border: 0; border: 0;
padding: 0; padding: 0;
outline: none;
}
input[type="color"]::-moz-focus-inner {
border: 0;
padding: 0;
outline: none;
} }
/* range */ /* range */
@ -663,16 +680,20 @@ input[type="range"]:active::-webkit-slider-thumb {
outline: none; outline: none;
} }
input[type="range"]:focus::-webkit-slider-thumb,
input[type="range"]:hover::-webkit-slider-thumb { input[type="range"]:hover::-webkit-slider-thumb {
background-color: rgb(var(--form-range-thumb-background-focus-hover)); background-color: rgb(var(--form-range-thumb-background-hover));
box-shadow: var(--form-hover-ring); box-shadow: var(--form-ring-hover);
outline: none; outline: none;
} }
input[type="range"]:focus::-webkit-slider-thumb {
background-color: rgb(var(--form-range-thumb-background-focus));
box-shadow: var(--form-ring-accent);
}
input[type="range"]:active::-webkit-slider-thumb { input[type="range"]:active::-webkit-slider-thumb {
background-color: rgb(var(--form-range-thumb-background-active)); background-color: rgb(var(--form-range-thumb-background-active));
box-shadow: var(--form-focus-ring-accent); box-shadow: var(--form-ring-accent);
} }
input[type="range"]:disabled::-webkit-slider-thumb { input[type="range"]:disabled::-webkit-slider-thumb {
@ -748,16 +769,20 @@ input[type="range"]:active::-moz-range-thumb {
outline: none; outline: none;
} }
input[type="range"]:focus::-moz-range-thumb,
input[type="range"]:hover::-moz-range-thumb { input[type="range"]:hover::-moz-range-thumb {
background-color: rgb(var(--form-range-thumb-background-focus-hover)); background-color: rgb(var(--form-range-thumb-background-hover));
box-shadow: var(--form-hover-ring); box-shadow: var(--form-ring-hover);
outline: none; outline: none;
} }
input[type="range"]:focus::-moz-range-thumb {
background-color: rgb(var(--form-range-thumb-background-focus));
box-shadow: var(--form-ring-accent);
}
input[type="range"]:active::-moz-range-thumb { input[type="range"]:active::-moz-range-thumb {
background-color: rgb(var(--form-range-thumb-background-active)); background-color: rgb(var(--form-range-thumb-background-active));
box-shadow: var(--form-focus-ring-accent); box-shadow: var(--form-ring-accent);
} }
input[type="range"]:disabled::-moz-range-thumb { input[type="range"]:disabled::-moz-range-thumb {

14
src/css/variables.css
View File

@ -103,7 +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-focus-hover: var(--theme-gray-18); --form-icon-hover: var(--theme-gray-16);
--form-icon-focus: var(--theme-gray-18);
--form-icon-active: var(--theme-style-text); --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);
@ -127,14 +128,15 @@
--form-helper-disabled: var(--theme-gray-04); --form-helper-disabled: var(--theme-gray-04);
--form-thumb-size: 1.25em; --form-thumb-size: 1.25em;
--form-range-thumb-background: var(--theme-gray-16); --form-range-thumb-background: var(--theme-gray-16);
--form-range-thumb-background-focus-hover: var(--theme-gray-18); --form-range-thumb-background-hover: var(--theme-gray-18);
--form-range-thumb-background-focus: var(--theme-style-text);
--form-range-thumb-background-active: var(--theme-style-text); --form-range-thumb-background-active: var(--theme-style-text);
--form-range-thumb-background-disabled: var(--theme-gray-03); --form-range-thumb-background-disabled: var(--theme-gray-03);
--form-range-track-background: var(--theme-gray-06); --form-range-track-background: var(--theme-gray-06);
--form-range-track-background-focus-hover: var(--theme-gray-04); --form-range-track-background-focus-hover: var(--theme-gray-04);
--form-range-track-background-active: var(--theme-gray-03); --form-range-track-background-active: var(--theme-gray-03);
--form-range-track-background-disabled: var(--theme-gray-02); --form-range-track-background-disabled: var(--theme-gray-02);
--form-range-progress-background: var(--theme-gray-14); --form-range-progress-background: var(--theme-gray-08);
--form-range-progress-background-active: var(--theme-accent); --form-range-progress-background-active: var(--theme-accent);
--form-range-progress-background-disabled: var(--theme-gray-02); --form-range-progress-background-disabled: var(--theme-gray-02);
--form-grid-background: var(--theme-gray-02); --form-grid-background: var(--theme-gray-02);
@ -147,9 +149,9 @@
--form-grid-border-checked: var(--theme-accent); --form-grid-border-checked: var(--theme-accent);
--form-grid-border-disabled: var(--theme-gray-04); --form-grid-border-disabled: var(--theme-gray-04);
--form-dropdown-background: var(--theme-gray-02); --form-dropdown-background: var(--theme-gray-02);
--form-hover-ring: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06)); --form-ring-hover: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
--form-focus-ring: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-10)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-gray-10), 0.25); --form-ring-focus: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-10)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-gray-10), 0.25);
--form-focus-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25); --form-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
/* button */ /* button */
--button-background: var(--theme-gray-02); --button-background: var(--theme-gray-02);
--button-background-focus-hover: var(--theme-gray-03); --button-background-focus-hover: var(--theme-gray-03);