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

[design] improve form grid styles

Browse Source
This commit is contained in:
zombieFox 2019-11-09 12:58:26 +00:00
parent 2c4f9b69bd
commit cf915f08af
3 changed files with 33 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/css/form.css
View File

@ -92,8 +92,8 @@ textarea {
margin: 0 0 1em 0; margin: 0 0 1em 0;
color: rgb(var(--form-input-text)); color: rgb(var(--form-input-text));
font-size: 1em; font-size: 1em;
line-height: 1.8;
font-family: var(--font-regular); font-family: var(--font-regular);
line-height: 2;
height: 10em; height: 10em;
min-height: 2.5em; min-height: 2.5em;
min-width: 0; min-width: 0;
@ -406,7 +406,6 @@ input[type="radio"]:hover+label:before {
input[type="checkbox"]:active+label:before, input[type="checkbox"]:active+label:before,
input[type="radio"]:active+label:before { input[type="radio"]:active+label:before {
color: rgb(var(--form-icon-active)); color: rgb(var(--form-icon-active));
transform: scale(0.9);
} }
input[type="checkbox"]:checked+label:before, input[type="checkbox"]:checked+label:before,
@ -414,22 +413,12 @@ input[type="radio"]:checked+label:before {
color: rgb(var(--form-icon-checked)); color: rgb(var(--form-icon-checked));
} }
input[type="checkbox"]:checked:focus+label:before,
input[type="radio"]:checked:focus+label:before {
transform: scale(1.2);
}
input[type="checkbox"]:disabled+label:before, input[type="checkbox"]:disabled+label:before,
input[type="radio"]:disabled+label:before { input[type="radio"]:disabled+label:before {
color: rgb(var(--form-icon-disabled)); color: rgb(var(--form-icon-disabled));
cursor: default; cursor: default;
} }
input[type="checkbox"]:disabled:active+label:before,
input[type="radio"]:disabled:active+label:before {
transform: none;
}
/* color */ /* color */
input[type="color"] { input[type="color"] {
background-color: transparent; background-color: transparent;
@ -555,8 +544,8 @@ input[type="range"]::-webkit-slider-thumb {
border-width: 0; border-width: 0;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
height: 1.5em; height: var(--form-thumb-size);
width: 1.5em; width: var(--form-thumb-size);
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast); transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
@ -640,8 +629,8 @@ input[type="range"]::-moz-range-thumb {
border-width: 0; border-width: 0;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
height: 1.5em; height: var(--form-thumb-size);
width: 1.5em; width: var(--form-thumb-size);
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast); transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
@ -768,16 +757,6 @@ input[type="range"]:disabled::-moz-range-progress {
transform: scale(1.5); transform: scale(1.5);
} }
.input-button input[type="checkbox"]:active+label:before,
.input-button input[type="radio"]:active+label:before {
transform: scale(1.3);
}
.input-button input[type="checkbox"]:checked:focus+label:before,
.input-button input[type="radio"]:checked:focus+label:before {
transform: scale(1.7);
}
.input-button input[type="checkbox"]:hover+label, .input-button input[type="checkbox"]:hover+label,
.input-button input[type="checkbox"]:focus+label, .input-button input[type="checkbox"]:focus+label,
.input-button input[type="radio"]:hover+label, .input-button input[type="radio"]:hover+label,
@ -951,7 +930,7 @@ input[type="range"]:disabled::-moz-range-progress {
.form-grid { .form-grid {
background-color: rgb(var(--form-grid-background)); background-color: rgb(var(--form-grid-background));
padding: 0.75em; padding: calc(var(--form-thumb-size) / 2);
display: inline-grid; display: inline-grid;
overflow: hidden; overflow: hidden;
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast); transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
@ -988,13 +967,6 @@ input[type="range"]:disabled::-moz-range-progress {
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
} }
.form-grid-viewport {
width: 12vw;
height: 12vh;
min-width: 5em;
min-height: 5em;
}
.form-grid .input-wrap { .form-grid .input-wrap {
padding: 0; padding: 0;
} }
@ -1003,8 +975,8 @@ input[type="range"]:disabled::-moz-range-progress {
.form-grid input[type="radio"]+label { .form-grid input[type="radio"]+label {
background-color: transparent; background-color: transparent;
display: block; display: block;
width: 2.5em; width: calc(var(--form-thumb-size) * 1.75);
height: 2.5em; height: calc(var(--form-thumb-size) * 1.75);
position: relative; position: relative;
transition: none; transition: none;
z-index: 1; z-index: 1;
@ -1015,13 +987,14 @@ input[type="range"]:disabled::-moz-range-progress {
content: ""; content: "";
background-color: rgb(var(--form-grid-input-background)); background-color: rgb(var(--form-grid-input-background));
margin: 0; margin: 0;
font-size: 1em;
display: block; display: block;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 0.5em; width: calc(var(--form-thumb-size) / 2);
height: 0.5em; height: calc(var(--form-thumb-size) / 2);
transform: scale(1) translate(-50%, -50%); 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); 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);
} }
@ -1038,6 +1011,8 @@ input[type="range"]:disabled::-moz-range-progress {
.form-grid input[type="checkbox"]:active+label:before, .form-grid input[type="checkbox"]:active+label:before,
.form-grid input[type="radio"]:active+label:before { .form-grid input[type="radio"]:active+label:before {
background-color: rgb(var(--form-grid-input-background-active)); background-color: rgb(var(--form-grid-input-background-active));
width: var(--form-thumb-size);
height: var(--form-thumb-size);
box-shadow: var(--form-focus-ring-accent); box-shadow: var(--form-focus-ring-accent);
transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%);
} }
@ -1045,8 +1020,14 @@ input[type="range"]:disabled::-moz-range-progress {
.form-grid input[type="checkbox"]:checked+label:before, .form-grid input[type="checkbox"]:checked+label:before,
.form-grid input[type="radio"]:checked+label:before { .form-grid input[type="radio"]:checked+label:before {
background-color: rgb(var(--form-grid-input-background-checked)); background-color: rgb(var(--form-grid-input-background-checked));
width: 1em; width: var(--form-thumb-size);
height: 1em; height: var(--form-thumb-size);
transform: scale(1) translate(-50%, -50%);
}
.form-grid input[type="checkbox"]:checked:active+label:before,
.form-grid input[type="radio"]:checked:active+label:before {
background-color: rgb(var(--form-grid-input-background-active));
transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%);
} }
@ -1054,13 +1035,21 @@ input[type="range"]:disabled::-moz-range-progress {
.form-grid input[type="checkbox"]:disabled:focus+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:hover+label:before,
.form-grid input[type="checkbox"]:disabled:active+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+label:before,
.form-grid input[type="radio"]:disabled:focus+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:hover+label:before,
.form-grid input[type="radio"]:disabled:active+label:before, .form-grid input[type="radio"]:disabled:active+label:before {
background-color: rgb(var(--form-grid-input-background-disabled));
width: calc(var(--form-thumb-size) / 2);
height: calc(var(--form-thumb-size) / 2);
box-shadow: none;
}
.form-grid input[type="checkbox"]:disabled:checked+label:before,
.form-grid input[type="radio"]:disabled:checked+label:before { .form-grid input[type="radio"]:disabled:checked+label:before {
background-color: rgb(var(--form-grid-input-background-disabled)); background-color: rgb(var(--form-grid-input-background-disabled));
width: var(--form-thumb-size);
height: var(--form-thumb-size);
box-shadow: none; box-shadow: none;
} }

1
src/css/variables.css
View File

@ -122,6 +122,7 @@
--form-feedback-border-disabled: var(--theme-gray-02); --form-feedback-border-disabled: var(--theme-gray-02);
--form-helper: var(--theme-gray-12); --form-helper: var(--theme-gray-12);
--form-helper-disabled: var(--theme-gray-04); --form-helper-disabled: var(--theme-gray-04);
--form-thumb-size: 1.25em;
--form-range-thumb-background: var(--theme-gray-14); --form-range-thumb-background: var(--theme-gray-14);
--form-range-thumb-background-focus-hover: var(--theme-gray-16); --form-range-thumb-background-focus-hover: var(--theme-gray-16);
--form-range-thumb-background-active: var(--theme-style-text); --form-range-thumb-background-active: var(--theme-style-text);

2
src/style-guide.html
View File

@ -50,7 +50,7 @@
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<label for="radius" class="style-guide-control">Radius</label> <label for="radius" class="style-guide-control">Radius</label>
<input id="radius" class="style-guide-control radius" type="range" min="0" max="500" value="0" step="20" tabindex="1"> <input id="radius" class="style-guide-control radius" type="range" min="0" max="600" value="0" step="1" tabindex="1">
</div> </div>
<hr> <hr>
<div class="button-wrap form-inline"> <div class="button-wrap form-inline">