From cf915f08af1508fc3bf60af28736128cbfc3f7fa Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Sat, 9 Nov 2019 12:58:26 +0000
Subject: [PATCH] [design] improve form grid styles

---
 src/css/form.css      | 73 ++++++++++++++++++-------------------------
 src/css/variables.css |  1 +
 src/style-guide.html  |  2 +-
 3 files changed, 33 insertions(+), 43 deletions(-)

diff --git a/src/css/form.css b/src/css/form.css
index 176f3997..abb92153 100755
--- a/src/css/form.css
+++ b/src/css/form.css
@@ -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;
 }
 
diff --git a/src/css/variables.css b/src/css/variables.css
index 23dc9bd0..9fdb4749 100644
--- a/src/css/variables.css
+++ b/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);
diff --git a/src/style-guide.html b/src/style-guide.html
index 4495a40d..7a028d5b 100644
--- a/src/style-guide.html
+++ b/src/style-guide.html
@@ -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">