[design] improve form grid styles

Author: zombieFox

src/css/form.css

@@ -92,8 +92,8 @@ textarea{
 margin:001em0;
 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,30 +406,19 @@ 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,
 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-buttoninput[type="checkbox"]:active+label:before,
-.input-buttoninput[type="radio"]:active+label:before{
-transform:scale(1.3);
-}
-
-.input-buttoninput[type="checkbox"]:checked:focus+label:before,
-.input-buttoninput[type="radio"]:checked:focus+label:before{
-transform:scale(1.7);
-}
-
 .input-buttoninput[type="checkbox"]:hover+label,
 .input-buttoninput[type="checkbox"]:focus+label,
 .input-buttoninput[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-gridinput[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,29 +1011,45 @@ input[type="range"]:disabled::-moz-range-progress{
 .form-gridinput[type="checkbox"]:active+label:before,
 .form-gridinput[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%);
 }
 
 .form-gridinput[type="checkbox"]:checked+label:before,
 .form-gridinput[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-gridinput[type="checkbox"]:checked:active+label:before,
+.form-gridinput[type="radio"]:checked:active+label:before{
+background-color:rgb(var(--form-grid-input-background-active));
 transform:scale(1) translate(-50%,-50%);
 }
 
 .form-gridinput[type="checkbox"]:disabled+label:before,
 .form-gridinput[type="checkbox"]:disabled:focus+label:before,
 .form-gridinput[type="checkbox"]:disabled:hover+label:before,
 .form-gridinput[type="checkbox"]:disabled:active+label:before,
-.form-gridinput[type="checkbox"]:disabled:checked+label:before,
 .form-gridinput[type="radio"]:disabled+label:before,
 .form-gridinput[type="radio"]:disabled:focus+label:before,
 .form-gridinput[type="radio"]:disabled:hover+label:before,
-.form-gridinput[type="radio"]:disabled:active+label:before,
+.form-gridinput[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-gridinput[type="checkbox"]:disabled:checked+label:before,
 .form-gridinput[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;
 }
 

src/css/variables.css

@@ -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);

src/style-guide.html

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