extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-06 14:10:12 +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;
color: rgb(var(--form-input-text));
font-size: 1em;
line-height: 1.8;
font-family: var(--font-regular);
line-height: 2;
height: 10em;
min-height: 2.5em;
min-width: 0;
@ -406,7 +406,6 @@ input[type="radio"]:hover+label:before {
input[type="checkbox"]:active+label:before,
input[type="radio"]:active+label:before {
color: rgb(var(--form-icon-active));
transform: scale(0.9);
}
input[type="checkbox"]:checked+label:before,
@ -414,22 +413,12 @@ input[type="radio"]:checked+label:before {
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="radio"]:disabled+label:before {
color: rgb(var(--form-icon-disabled));
cursor: default;
}
input[type="checkbox"]:disabled:active+label:before,
input[type="radio"]:disabled:active+label:before {
transform: none;
}
/* color */
input[type="color"] {
background-color: transparent;
@ -555,8 +544,8 @@ input[type="range"]::-webkit-slider-thumb {
border-width: 0;
border-radius: 50%;
position: relative;
height: 1.5em;
width: 1.5em;
height: var(--form-thumb-size);
width: var(--form-thumb-size);
cursor: pointer;
box-sizing: border-box;
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-radius: 50%;
position: relative;
height: 1.5em;
width: 1.5em;
height: var(--form-thumb-size);
width: var(--form-thumb-size);
cursor: pointer;
box-sizing: border-box;
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);
}
.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"]:focus+label,
.input-button input[type="radio"]:hover+label,
@ -951,7 +930,7 @@ input[type="range"]:disabled::-moz-range-progress {
.form-grid {
background-color: rgb(var(--form-grid-background));
padding: 0.75em;
padding: calc(var(--form-thumb-size) / 2);
display: inline-grid;
overflow: hidden;
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);
}
.form-grid-viewport {
width: 12vw;
height: 12vh;
min-width: 5em;
min-height: 5em;
}
.form-grid .input-wrap {
padding: 0;
}
@ -1003,8 +975,8 @@ input[type="range"]:disabled::-moz-range-progress {
.form-grid input[type="radio"]+label {
background-color: transparent;
display: block;
width: 2.5em;
height: 2.5em;
width: calc(var(--form-thumb-size) * 1.75);
height: calc(var(--form-thumb-size) * 1.75);
position: relative;
transition: none;
z-index: 1;
@ -1015,13 +987,14 @@ input[type="range"]:disabled::-moz-range-progress {
content: "";
background-color: rgb(var(--form-grid-input-background));
margin: 0;
font-size: 1em;
display: block;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
width: 0.5em;
height: 0.5em;
width: calc(var(--form-thumb-size) / 2);
height: calc(var(--form-thumb-size) / 2);
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);
}
@ -1038,6 +1011,8 @@ input[type="range"]:disabled::-moz-range-progress {
.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));
width: var(--form-thumb-size);
height: var(--form-thumb-size);
box-shadow: var(--form-focus-ring-accent);
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="radio"]:checked+label:before {
background-color: rgb(var(--form-grid-input-background-checked));
width: 1em;
height: 1em;
width: var(--form-thumb-size);
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%);
}
@ -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: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: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 {
background-color: rgb(var(--form-grid-input-background-disabled));
width: var(--form-thumb-size);
height: var(--form-thumb-size);
box-shadow: none;
}

1
src/css/variables.css
View File

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

2
src/style-guide.html
View File

@ -50,7 +50,7 @@
</div>
<div class="input-wrap">
<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>
<hr>
<div class="button-wrap form-inline">