[design] improve form radio and checkbox scroll performace

Author: zombieFox

src/css/form.css

@@ -368,107 +368,126 @@ input[type="radio"]:disabled:focus+label{
 
 input[type="checkbox"]+label .label-icon,
 input[type="radio"]+label .label-icon{
-content:"";
 margin-right:1em;
-border-style: solid;
-border-width:var(--layout-line-width);
-border-color:rgb(var(--form-icon));
 width:var(--form-thumb-size);
 height:var(--form-thumb-size);
 position: relative;
 top:0.125em;
 display: block;
 flex-grow:0;
 flex-shrink:0;
+z-index:1;
+}
+
+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"]: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{
+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));
 box-shadow:var(--form-hover-ring);
 }
 
-input[type="checkbox"]:active+label .label-icon,
-input[type="radio"]:active+label .label-icon{
+input[type="checkbox"]:active+label .label-icon:before,
+input[type="radio"]:active+label .label-icon:before{
 border-color:rgb(var(--form-icon-active));
 box-shadow:var(--form-focus-ring-accent);
 }
 
-input[type="checkbox"]:checked+label .label-icon,
-input[type="radio"]:checked+label .label-icon{
+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"]+label .label-icon{
+input[type="checkbox"]+label .label-icon:before{
 border-radius:0.25em;
 }
 
-input[type="radio"]+label .label-icon{
+input[type="radio"]+label .label-icon:before{
 border-radius:50%;
 }
 
-input[type="checkbox"]:checked+label .label-icon,
-input[type="radio"]:checked+label .label-icon{
+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,
+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"]:disabled+label .label-icon,
-input[type="checkbox"]:disabled:hover+label .label-icon,
-input[type="checkbox"]: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{
-border-color:rgb(var(--form-icon-disabled));
-box-shadow: none;
-}
-
 input[type="checkbox"]+label .label-icon:after,
 input[type="radio"]+label .label-icon:after{
 content:"";
 position: absolute;
-top:50%;
-left:50%;
 display: block;
-opacity:0;
-transition:opacityvar(--layout-timing-extra-fast),background-colorvar(--layout-timing-extra-fast), transform var(--layout-timing-fast);
+z-index:3;
+transition:transformvar(--layout-timing-extra-fast),opacityvar(--layout-timing-extra-fast);
 }
 
 input[type="checkbox"]+label .label-icon:after{
-border-right:calc(var(--layout-line-width) /2) solid rgb(var(--form-icon-symbol));
-border-bottom:calc(var(--layout-line-width) /2) solid rgb(var(--form-icon-symbol));
-width:calc(var(--form-thumb-size) /4);
-height:calc(var(--form-thumb-size) /2);
-transform:translate(-50%,-50%) rotate(0deg);
+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%);
 }
 
 input[type="checkbox"]:checked+label .label-icon:after{
-transform:translate(-45%,-60%) rotate(45deg);
+opacity:1;
+transform:rotate(45deg) translate(-54%,-58%);
 }
 
 input[type="radio"]+label .label-icon:after{
 background-color:rgb(var(--form-icon-symbol));
 border-radius:50%;
-width:calc(var(--form-thumb-size) /5);
-height:calc(var(--form-thumb-size) /5);
-transform:translate(-50%,-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"]:checked+label .label-icon:after,
 input[type="radio"]:checked+label .label-icon:after{
 opacity:1;
 }
 
-input[type="checkbox"]:disabled+label .label-icon:after{
+input[type="checkbox"]:disabled+label .label-icon:before{
 border-color:rgb(var(--form-icon-symbol-disabled));
 }
 
-input[type="radio"]:disabled+label .label-icon:after{
+input[type="radio"]:disabled+label .label-icon:before{
 background-color:rgb(var(--form-icon-symbol-disabled));
 }