[design] improve colour input button

Author: zombieFox

src/css/form.css

@@ -984,9 +984,9 @@ input[type="range"]:disabled::-moz-range-progress{
 margin:0;
 position: absolute;
 top:50%;
-right:0.5em;
-width:1em;
-height:1em;
+right:1em;
+width:calc(var(--form-thumb-size) *0.8);
+height:calc(var(--form-thumb-size) *0.8);
 z-index:1;
 border-radius:50%;
 transform:translateY(-50%);
@@ -1010,7 +1010,7 @@ input[type="range"]:disabled::-moz-range-progress{
 }
 
 .input-color-dotinput[type="color"]+label{
-padding-right:2.25em;
+padding-right:calc(calc(var(--form-thumb-size) *0.8) +2em);
 position: relative;
 }
 

src/style-guide.html

@@ -99,9 +99,17 @@
 <labelfor="style-guide-radio-6"><spanclass="label-icon"></span> Hidden Radio Button 3</label>
 </div>
 </div>
+<divclass="input-wrap input-button input-hide form-inline">
+<inputid="style-guide-input-color-1" type="color" tabindex="1" value="#fa8200">
+<labelfor="style-guide-input-color-1">Hidden Input Colour Button</label>
+</div>
 <divclass="input-wrap input-button input-color-dot form-inline">
-<inputid="style-guide-input-button-3" type="color" tabindex="1">
-<labelfor="style-guide-input-button-3">Input Colour Button</label>
+<inputid="style-guide-input-color-2" type="color" tabindex="1" value="#fa8200">
+<labelfor="style-guide-input-color-2">Input Colour Button</label>
+</div>
+<divclass="input-wrap input-button input-color-dot input-color-dot-accent form-inline">
+<inputid="style-guide-input-color-3" type="color" tabindex="1" value="#fa8200">
+<labelfor="style-guide-input-color-3">Input Colour Accent Button</label>
 </div>
 <divclass="button-wrap form-inline">
 <divclass="form-dropdown form-dropdown-inline">