[design] improve form radio and checkbox

Author: zombieFox

src/css/form.css

@@ -368,6 +368,7 @@ input[type="radio"]:disabled:focus+label{
 
 input[type="checkbox"]+label .label-icon,
 input[type="radio"]+label .label-icon{
+background-color:rgb(var(--form-icon));
 margin-right:1em;
 width:var(--form-thumb-size);
 height:var(--form-thumb-size);
@@ -377,117 +378,139 @@ input[type="radio"]+label .label-icon{
 flex-grow:0;
 flex-shrink:0;
 z-index:1;
+box-shadow: none;
+transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
 }
 
-input[type="checkbox"]+label .label-icon:before,
-input[type="radio"]+label .label-icon:before{
-content:"";
-border-style: solid;
-border-width:var(--layout-line-width);
-border-color:rgb(var(--form-icon));
-width:100%;
-height:100%;
-position: absolute;
-top:0;
-left:0;
-display: block;
-z-index:2;
-transition: border-color var(--layout-timing-extra-fast), border-width var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
+input[type="checkbox"]+label .label-icon{
+border-radius:0.25em;
 }
 
-input[type="checkbox"]:focus+label .label-icon:before,
-input[type="checkbox"]:hover+label .label-icon:before,
-input[type="radio"]:focus+label .label-icon:before,
-input[type="radio"]:hover+label .label-icon:before{
-border-color:rgb(var(--form-icon-focus-hover));
+input[type="radio"]+label .label-icon{
+border-radius:50%;
+}
+
+input[type="checkbox"]:focus+label .label-icon,
+input[type="checkbox"]:hover+label .label-icon,
+input[type="radio"]:focus+label .label-icon,
+input[type="radio"]:hover+label .label-icon{
+background-color:rgb(var(--form-icon-focus-hover));
 box-shadow:var(--form-hover-ring);
 }
 
-input[type="checkbox"]:active+label .label-icon:before,
-input[type="radio"]:active+label .label-icon:before{
-border-color:rgb(var(--form-icon-active));
+input[type="checkbox"]:active+label .label-icon,
+input[type="radio"]:active+label .label-icon{
+background-color:rgb(var(--form-icon-active));
 box-shadow:var(--form-focus-ring-accent);
+transition: none;
 }
 
-input[type="checkbox"]:checked+label .label-icon:before,
-input[type="radio"]:checked+label .label-icon:before{
-border-color:rgb(var(--form-icon-checked));
+input[type="checkbox"]:checked+label .label-icon,
+input[type="radio"]:checked+label .label-icon{
+background-color:rgb(var(--form-icon-checked));
+}
+
+input[type="checkbox"]:disabled+label .label-icon,
+input[type="checkbox"]:disabled:hover+label .label-icon,
+input[type="checkbox"]:disabled:focus+label .label-icon,
+input[type="checkbox"]:checked:disabled+label .label-icon,
+input[type="checkbox"]:checked:disabled:hover+label .label-icon,
+input[type="checkbox"]:checked:disabled:focus+label .label-icon,
+input[type="radio"]:disabled+label .label-icon,
+input[type="radio"]:disabled:hover+label .label-icon,
+input[type="radio"]:disabled:focus+label .label-icon,
+input[type="radio"]:checked:disabled+label .label-icon,
+input[type="radio"]:checked:disabled:hover+label .label-icon,
+input[type="radio"]:checked:disabled:focus+label .label-icon{
+background-color:rgb(var(--form-icon-disabled));
+box-shadow: none;
 }
 
 input[type="checkbox"]+label .label-icon:before{
-border-radius:0.25em;
-}
-
-input[type="radio"]+label .label-icon:before{
-border-radius:50%;
+content:"";
+border-right:0.2em solid rgb(var(--form-icon-symbol));
+border-bottom:0.2em solid rgb(var(--form-icon-symbol));
+box-sizing: content-box;
+top:50%;
+left:50%;
+width:15%;
+height:35%;
+transform-origin: left top;
+transform:scale(0) rotate(45deg) translate(-55%,-60%);
+display: block;
+position: absolute;
+z-index:2;
+transition: background-color var(--layout-timing-extra-fast), transform var(--layout-timing-extra-fast);
 }
 
-input[type="checkbox"]:disabled+label .label-icon:before,
-input[type="checkbox"]:disabled:hover+label .label-icon:before,
-input[type="checkbox"]:disabled:focus+label .label-icon:before,
-input[type="radio"]:disabled+label .label-icon:before,
-input[type="radio"]:disabled:hover+label .label-icon:before,
-input[type="radio"]:disabled:focus+label .label-icon:before{
-border-color:rgb(var(--form-icon-disabled));
-box-shadow: none;
+input[type="checkbox"]:checked+label .label-icon:before{
+transform:scale(1) rotate(45deg) translate(-55%,-60%);
 }
 
-input[type="checkbox"]:checked+label .label-icon:before,
-input[type="radio"]:checked+label .label-icon:before{
-border-top-width:calc(var(--form-thumb-size) /2);
-border-bottom-width:calc(var(--form-thumb-size) /2);
-border-left-width:calc(var(--form-thumb-size) /2);
-border-right-width:calc(var(--form-thumb-size) /2);
+input[type="checkbox"]:checked:active+label .label-icon:before{
+transform:scale(0.8) rotate(45deg) translate(-55%,-60%);
 }
 
 input[type="checkbox"]+label .label-icon:after,
 input[type="radio"]+label .label-icon:after{
 content:"";
-position: absolute;
+background-color:rgb(var(--form-icon-symbol));
+width:100%;
+height:100%;
 display: block;
+position: absolute;
+top:0;
+left:0;
+transform:scale(0.7);
+transform-origin: center;
 z-index:3;
-transition:transformvar(--layout-timing-extra-fast),opacityvar(--layout-timing-extra-fast);
+transition:background-colorvar(--layout-timing-extra-fast),transformvar(--layout-timing-extra-fast);
 }
 
 input[type="checkbox"]+label .label-icon:after{
-border-right:0.2em solid rgb(var(--form-icon-symbol));
-border-bottom:0.2em solid rgb(var(--form-icon-symbol));
-box-sizing: content-box;
-top:50%;
-left:50%;
-width:0.2em;
-height:0.5em;
-opacity:0;
-transform-origin: left top;
-transform:rotate(0deg) translate(-54%,-58%);
+border-radius:0.25em;
 }
 
-input[type="checkbox"]:checked+label .label-icon:after{
-opacity:1;
-transform:rotate(45deg) translate(-54%,-58%);
+input[type="radio"]+label .label-icon:after{
+border-radius:70%;
 }
 
-input[type="radio"]+label .label-icon:after{
-background-color:rgb(var(--form-icon-symbol));
-border-radius:50%;
-top:50%;
-left:50%;
-width:0.25em;
-height:0.25em;
-transform:translate(-54%,-58%);
-opacity:0;
-transition: opacity var(--layout-timing-extra-fast);
+input[type="checkbox"]:active+label .label-icon:after,
+input[type="radio"]:active+label .label-icon:after{
+transform:scale(0.6);
+transition: none;
 }
 
+input[type="checkbox"]:checked+label .label-icon:after,
 input[type="radio"]:checked+label .label-icon:after{
-opacity:1;
+background-color:rgb(var(--form-icon-symbol-active));
+border-radius:50%;
 }
 
-input[type="checkbox"]:disabled+label .label-icon:before{
-border-color:rgb(var(--form-icon-symbol-disabled));
+input[type="checkbox"]:checked+label .label-icon:after{
+transform:scale(0);
 }
 
-input[type="radio"]:disabled+label .label-icon:before{
+input[type="radio"]:checked+label .label-icon:after{
+transform:scale(0.3);
+}
+
+input[type="checkbox"]:disabled+label .label-icon:after,
+input[type="checkbox"]:disabled:hover+label .label-icon:after,
+input[type="checkbox"]:disabled:focus+label .label-icon:after,
+input[type="checkbox"]:disabled:active+label .label-icon:after,
+input[type="checkbox"]:checked:disabled+label .label-icon:after,
+input[type="checkbox"]:checked:disabled:hover+label .label-icon:after,
+input[type="checkbox"]:checked:disabled:focus+label .label-icon:after,
+input[type="checkbox"]:checked:disabled:active+label .label-icon:after,
+input[type="radio"]:disabled+label .label-icon:after,
+input[type="radio"]:disabled:hover+label .label-icon:after,
+input[type="radio"]:disabled:focus+label .label-icon:after,
+input[type="radio"]:disabled:active+label .label-icon:after,
+input[type="radio"]:checked:disabled+label .label-icon:after,
+input[type="radio"]:checked:disabled:hover+label .label-icon:after,
+input[type="radio"]:checked:disabled:focus+label .label-icon:after,
+input[type="radio"]:checked:disabled:active+label .label-icon:after{
 background-color:rgb(var(--form-icon-symbol-disabled));
 }
 

src/css/variables.css

@@ -105,9 +105,10 @@
 --form-icon:var(--theme-gray-08);
 --form-icon-focus-hover:var(--theme-gray-18);
 --form-icon-active:var(--theme-style-text);
---form-icon-disabled:var(--theme-gray-04);
 --form-icon-checked:var(--theme-style-text);
---form-icon-symbol:var(--theme-gray-02);
+--form-icon-disabled:var(--theme-gray-04);
+--form-icon-symbol:var(--theme-gray-01);
+--form-icon-symbol-active:var(--theme-gray-01);
 --form-icon-symbol-disabled:var(--theme-gray-01);
 --form-placeholder:var(--theme-gray-06);
 --form-placeholder-focus-hover:var(--theme-gray-10);