extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-30 09:48:58 +01: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));
outline: none;
text-decoration: none;
box-shadow: var(--form-hover-ring);
box-shadow: var(--form-ring-hover);
}
.auto-suggest-link:focus {
@ -62,7 +62,7 @@
color: rgb(var(--form-input-text-focus-active));
outline: none;
text-decoration: none;
box-shadow: var(--form-focus-ring-accent);
box-shadow: var(--form-ring-accent);
}
.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));
color: rgb(var(--form-label-hover));
outline: none;
box-shadow: var(--form-hover-ring);
box-shadow: var(--form-ring-hover);
}
select:focus,
@ -69,7 +69,7 @@ select:active {
color: rgb(var(--form-label-focus-active));
outline: none;
z-index: 2;
box-shadow: var(--form-focus-ring-accent);
box-shadow: var(--form-ring-accent);
}
select:disabled,
@ -115,7 +115,7 @@ textarea:hover {
border-color: rgb(var(--form-input-border-hover));
color: rgb(var(--form-input-text-hover));
outline: none;
box-shadow: var(--form-hover-ring);
box-shadow: var(--form-ring-hover);
}
textarea:focus,
@ -124,7 +124,7 @@ textarea:active {
border-color: rgb(var(--form-input-border-focus-active));
color: rgb(var(--form-input-text-focus-active));
outline: none;
box-shadow: var(--form-focus-ring-accent);
box-shadow: var(--form-ring-accent);
}
textarea:disabled {
@ -206,7 +206,7 @@ input[type="text"]:hover {
border-color: rgb(var(--form-input-border-hover));
color: rgb(var(--form-input-text-hover));
outline: none;
box-shadow: var(--form-hover-ring);
box-shadow: var(--form-ring-hover);
}
input[type="email"]:focus,
@ -226,7 +226,7 @@ input[type="text"]:active {
color: rgb(var(--form-input-text-focus-active));
outline: none;
z-index: 2;
box-shadow: var(--form-focus-ring-accent);
box-shadow: var(--form-ring-accent);
}
input[type="email"]:disabled,
@ -389,18 +389,18 @@ input[type="radio"]+label .label-icon {
border-radius: 50%;
}
input[type="checkbox"]:focus+label .label-icon,
input[type="checkbox"]:hover+label .label-icon,
input[type="radio"]:focus+label .label-icon,
input[type="radio"]:hover+label .label-icon {
background-color: rgb(var(--form-icon-focus-hover));
box-shadow: var(--form-hover-ring);
input[type="checkbox"]:focus+label .label-icon,
input[type="radio"]:hover+label .label-icon,
input[type="radio"]:focus+label .label-icon {
background-color: rgb(var(--form-icon-hover));
box-shadow: var(--form-ring-hover);
}
input[type="checkbox"]:active+label .label-icon,
input[type="radio"]:active+label .label-icon {
background-color: rgb(var(--form-icon-active));
box-shadow: var(--form-focus-ring-accent);
box-shadow: var(--form-ring-accent);
transition: none;
}
@ -409,6 +409,13 @@ input[type="radio"]:checked+label .label-icon {
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:hover+label .label-icon,
input[type="checkbox"]:disabled:focus+label .label-icon,
@ -538,12 +545,12 @@ input[type="color"] {
input[type="color"]:hover {
outline: none;
box-shadow: var(--form-hover-ring);
box-shadow: var(--form-ring-hover);
}
input[type="color"]:focus {
outline: none;
box-shadow: var(--form-focus-ring);
box-shadow: var(--form-ring-focus);
}
input[type="color"]:disabled {
@ -559,21 +566,31 @@ input[type="color"]:disabled:focus {
input[type="color"]::-webkit-color-swatch-wrapper {
border: 0;
padding: 0;
outline: none;
}
input[type="color"]::-webkit-color-swatch {
border: 0;
padding: 0;
outline: none;
}
input[type="color"]::-moz-color-swatch-wrapper {
border: 0;
padding: 0;
outline: none;
}
input[type="color"]::-moz-color-swatch {
border: 0;
padding: 0;
outline: none;
}
input[type="color"]::-moz-focus-inner {
border: 0;
padding: 0;
outline: none;
}
/* range */
@ -663,16 +680,20 @@ input[type="range"]:active::-webkit-slider-thumb {
outline: none;
}
input[type="range"]:focus::-webkit-slider-thumb,
input[type="range"]:hover::-webkit-slider-thumb {
background-color: rgb(var(--form-range-thumb-background-focus-hover));
box-shadow: var(--form-hover-ring);
background-color: rgb(var(--form-range-thumb-background-hover));
box-shadow: var(--form-ring-hover);
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 {
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 {
@ -748,16 +769,20 @@ input[type="range"]:active::-moz-range-thumb {
outline: none;
}
input[type="range"]:focus::-moz-range-thumb,
input[type="range"]:hover::-moz-range-thumb {
background-color: rgb(var(--form-range-thumb-background-focus-hover));
box-shadow: var(--form-hover-ring);
background-color: rgb(var(--form-range-thumb-background-hover));
box-shadow: var(--form-ring-hover);
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 {
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 {

14
src/css/variables.css
View File

@ -103,7 +103,8 @@
--form-group-text-border-disabled: var(--theme-gray-01);
--form-border-disabled: var(--theme-gray-02);
--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-checked: var(--theme-style-text);
--form-icon-disabled: var(--theme-gray-04);
@ -127,14 +128,15 @@
--form-helper-disabled: var(--theme-gray-04);
--form-thumb-size: 1.25em;
--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-disabled: var(--theme-gray-03);
--form-range-track-background: var(--theme-gray-06);
--form-range-track-background-focus-hover: var(--theme-gray-04);
--form-range-track-background-active: var(--theme-gray-03);
--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-disabled: 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-disabled: var(--theme-gray-04);
--form-dropdown-background: var(--theme-gray-02);
--form-hover-ring: 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-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-hover: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
--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-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-background: var(--theme-gray-02);
--button-background-focus-hover: var(--theme-gray-03);