extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-27 10:34:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve form grid styles

Browse Source
This commit is contained in:
zombieFox 2019-11-07 16:41:05 +00:00
parent 1596362884
commit d669589545
2 changed files with 51 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/css/form.css
View File

@ -421,7 +421,7 @@ input[type="radio"]:checked:focus+label:before {
input[type="checkbox"]:disabled+label:before,
input[type="radio"]:disabled+label:before {
color: rgb(var(--forform-icon-disabled));
color: rgb(var(--form-icon-disabled));
cursor: default;
}
@ -948,7 +948,6 @@ input[type="range"]:disabled::-moz-range-progress {
background-color: rgb(var(--form-grid-background));
padding: calc(var(--layout-line-width) * 4);
display: inline-grid;
grid-gap: var(--layout-line-width);
overflow: hidden;
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
}
@ -997,101 +996,67 @@ input[type="range"]:disabled::-moz-range-progress {
.form-grid input[type="checkbox"]+label,
.form-grid input[type="radio"]+label {
background-color: rgb(var(--form-grid-input-background));
background-color: transparent;
display: block;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
width: 2.5em;
height: 2.5em;
position: relative;
transition: none;
z-index: 1;
transform: scale(1);
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
}
.form-grid input[type="checkbox"]:focus+label,
.form-grid input[type="checkbox"]:hover+label,
.form-grid input[type="radio"]:focus+label,
.form-grid input[type="radio"]:hover+label {
background-color: rgb(var(--form-grid-input-background-focus-hover));
box-shadow: var(--form-hover-ring);
z-index: 2;
}
.form-grid input[type="checkbox"]:active+label,
.form-grid input[type="radio"]:active+label {
background-color: rgb(var(--form-grid-input-background-active));
box-shadow: var(--form-focus-ring-accent);
z-index: 2;
}
.form-grid input[type="checkbox"]:checked+label,
.form-grid input[type="radio"]:checked+label {
background-color: rgb(var(--form-grid-input-background-checked));
z-index: 2;
}
.form-grid input[type="checkbox"]:checked:focus+label,
.form-grid input[type="checkbox"]:checked:hover+label,
.form-grid input[type="radio"]:checked:focus+label,
.form-grid input[type="radio"]:checked:hover+label {
background-color: rgb(var(--form-grid-input-background-focus-hover));
box-shadow: var(--form-hover-ring);
z-index: 2;
}
.form-grid input[type="checkbox"]:checked:active+label,
.form-grid input[type="radio"]:checked:active+label {
background-color: rgb(var(--form-grid-input-background-active));
box-shadow: var(--form-focus-ring-accent);
z-index: 2;
}
.form-grid input[type="checkbox"]:disabled:focus+label,
.form-grid input[type="checkbox"]:disabled:hover+label,
.form-grid input[type="radio"]:disabled:focus+label,
.form-grid input[type="radio"]:disabled:hover+label {
background-color: transparent;
box-shadow: none;
}
.form-grid input[type="checkbox"]:disabled:active+label,
.form-grid input[type="radio"]:disabled:active+label {
background-color: transparent;
}
.form-grid input[type="checkbox"]:disabled:checked+label,
.form-grid input[type="radio"]:disabled:checked+label {
background-color: rgb(var(--form-checkbox-radio-disabled-label));
}
.form-grid input[type="checkbox"]:disabled+label,
.form-grid input[type="checkbox"]:disabled:focus+label,
.form-grid input[type="checkbox"]:disabled:hover+label,
.form-grid input[type="checkbox"]:disabled:active+label,
.form-grid input[type="radio"]:disabled+label,
.form-grid input[type="radio"]:disabled:focus+label,
.form-grid input[type="radio"]:disabled:hover+label,
.form-grid input[type="radio"]:disabled:active+label {
background-color: transparent;
}
.form-grid input[type="checkbox"]:disabled:checked+label,
.form-grid input[type="radio"]:disabled:checked+label {
background-color: rgb(var(--form-checkbox-radio-disabled-label));
}
.form-grid input[type="checkbox"]+label:before,
.form-grid input[type="radio"]+label:before {
content: none;
content: "";
background-color: rgb(var(--form-grid-input-background));
margin: 0;
display: block;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
width: 0.5em;
height: 0.5em;
transform: scale(1) translate(-50%, -50%);
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), width var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast);
}
.form-grid input[type="checkbox"]:focus+label:before,
.form-grid input[type="checkbox"]:hover+label:before,
.form-grid input[type="radio"]:focus+label:before,
.form-grid input[type="radio"]:hover+label:before {
transform: scale(1);
background-color: rgb(var(--form-grid-input-background-focus-hover));
box-shadow: var(--form-hover-ring);
transform: scale(1) translate(-50%, -50%);
}
.form-grid input[type="checkbox"]:active+label:before,
.form-grid input[type="radio"]:active+label:before {
background-color: rgb(var(--form-grid-input-background-active));
box-shadow: var(--form-focus-ring-accent);
transform: scale(1) translate(-50%, -50%);
}
.form-grid input[type="checkbox"]:checked+label:before,
.form-grid input[type="radio"]:checked+label:before {
background-color: rgb(var(--form-grid-input-background-checked));
width: 1em;
height: 1em;
transform: scale(1) translate(-50%, -50%);
}
.form-grid input[type="checkbox"]:disabled+label:before,
.form-grid input[type="checkbox"]:disabled:focus+label:before,
.form-grid input[type="checkbox"]:disabled:hover+label:before,
.form-grid input[type="checkbox"]:disabled:active+label:before,
.form-grid input[type="checkbox"]:disabled:checked+label:before,
.form-grid input[type="radio"]:disabled+label:before,
.form-grid input[type="radio"]:disabled:focus+label:before,
.form-grid input[type="radio"]:disabled:hover+label:before,
.form-grid input[type="radio"]:disabled:active+label:before,
.form-grid input[type="radio"]:disabled:checked+label:before {
background-color: rgb(var(--form-grid-input-background-disabled));
box-shadow: none;
}
.form-indent {

8
src/css/variables.css
View File

@ -134,14 +134,14 @@
--form-range-progress-background-focus-hover: var(--theme-accent);
--form-range-progress-background-active: var(--theme-accent);
--form-range-progress-background-disabled: var(--theme-gray-02);
--form-grid-input-background: var(--theme-gray-12);
--form-grid-input-background: var(--theme-gray-03);
--form-grid-input-background-focus-hover: var(--theme-gray-16);
--form-grid-input-background-active: var(--theme-style-text);
--form-grid-input-background-checked: var(--theme-gray-14);
--form-grid-input-background-disabled: var(--theme-gray-04);
--form-grid-input-background-disabled: var(--theme-gray-03);
--form-grid-background: var(--theme-gray-02);
--form-grid-background-hover: var(--theme-gray-02);
--form-grid-background-focus: var(--theme-gray-02);
--form-grid-background-hover: var(--theme-gray-01);
--form-grid-background-focus: var(--theme-gray-01);
--form-grid-background-disabled: var(--theme-gray-01);
--form-grid-border: var(--theme-gray-08);
--form-grid-border-hover-focus: var(--theme-gray-20);