From 31fbd06bff947c9e410d1bc67a477be5d232249b Mon Sep 17 00:00:00 2001
From: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>
Date: Wed, 25 May 2022 11:17:50 +0800
Subject: [PATCH] =?UTF-8?q?styles=EF=BC=9A=E4=BF=AE=E5=A4=8Dcheckbox?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=A8=A1=E5=BC=8F=E4=B8=8B=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E8=A2=AB=E9=81=AE=E6=8C=A1=E9=97=AE=E9=A2=98=20(#4441)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scss/components/form/_checks.scss | 91 ++++++++++++++++---------------
 1 file changed, 47 insertions(+), 44 deletions(-)

diff --git a/scss/components/form/_checks.scss b/scss/components/form/_checks.scss
index c800e4b02..2d18a0fb0 100644
--- a/scss/components/form/_checks.scss
+++ b/scss/components/form/_checks.scss
@@ -230,14 +230,12 @@
         }
       }
 
-      &:checked[disabled] + i{
+      &:checked[disabled] + i {
         width: var(--Checkbox-inner-size);
         height: var(--Checkbox-inner-size);
         background: var(--Checkbox-onDisabled-bg);
       }
-
     }
-
   }
   &--button.#{$ns}Checkbox--checkbox {
     text-align: center;
@@ -256,67 +254,72 @@
     border-radius: calc(var(--Checkbox-borderRadius) * 2);
     min-width: var(--Checkbox-button-min-width);
 
-    &:hover:not(:disabled){
+    &:hover:not(:disabled) {
       color: var(--Checkbox-onHover-color);
     }
 
     &:hover {
       input:checked + i {
         background: transparent;
-            border-color: var(--Button--primary-onHover-bg) transparent transparent var(--Button--primary-onHover-bg);
+        border-color: var(--Button--primary-onHover-bg) transparent transparent
+          var(--Button--primary-onHover-bg);
       }
     }
 
     &:active {
       input:checked + i {
         background: transparent;
-        border-color: var(--Switch-checked-onHover-bgColor) transparent transparent var(--Switch-checked-onHover-bgColor);
+        border-color: var(--Switch-checked-onHover-bgColor) transparent
+          transparent var(--Switch-checked-onHover-bgColor);
       }
     }
 
     input {
-        &:checked + i {
-          background: transparent;
+      &:checked + i {
+        background: transparent;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
+        border-width: px2rem(8px);
+        border-color: var(--Checkbox-onHover-color) transparent transparent
+          var(--Checkbox-onHover-color);
+        border-radius: 0;
+
+        &:before {
+          position: absolute;
           top: 0;
           left: 0;
-          width: 0;
-          height: 0;
-          border-width: px2rem(8px);
-          border-color: var(--Checkbox-onHover-color) transparent transparent var(--Checkbox-onHover-color);
-          border-radius: 0;
-
-          &:before {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: var(--Checkbox--full-inner-size);
-            height: calc(var(--Checkbox--full-inner-size) / 2);
-            transform: translate(-80%, -160%) rotate(-50deg);
-            background: transparent;
-          }
-        }
-
-        &[disabled] + i {
-          border-color: var(--Checkbox-onDisabled-color);
+          width: var(--Checkbox--full-inner-size);
+          height: calc(var(--Checkbox--full-inner-size) / 2);
+          transform: translate(-80%, -160%) rotate(-50deg);
           background: transparent;
-            &:before {
-              background: transparent;
-          }
         }
+      }
 
-        &:checked[disabled] + i {
+      &[disabled] + i {
+        border-color: var(--Checkbox-onDisabled-color);
+        background: transparent;
+        &:before {
           background: transparent;
-          border-width: px2rem(8px);
-          border-color: var(--Checkbox-onHover-color) transparent transparent var(--Checkbox-onHover-color);
         }
+      }
+
+      &:checked[disabled] + i {
+        background: transparent;
+        border-width: px2rem(8px);
+        border-color: var(--Checkbox-onHover-color) transparent transparent
+          var(--Checkbox-onHover-color);
+      }
     }
     > i {
       position: absolute;
       top: 0;
-      left:0;
+      left: 0;
       margin-left: 0;
       border: 0;
       border-style: solid;
+      background: transparent;
 
       + span {
         max-width: px2rem(100px);
@@ -330,14 +333,14 @@
     border-color: var(--Checkbox-onHover-color);
     color: var(--Checkbox-onHover-color);
 
-      &:hover {
-        border-color: var(--menu-active-color);
-        color: var(--menu-active-color);
-      }
-      &:active {
-        border-color: var(--Switch-checked-onHover-bgColor);
-        color: var(--Switch-checked-onHover-bgColor);
-      }
+    &:hover {
+      border-color: var(--menu-active-color);
+      color: var(--menu-active-color);
+    }
+    &:active {
+      border-color: var(--Switch-checked-onHover-bgColor);
+      color: var(--Switch-checked-onHover-bgColor);
+    }
   }
   &--button--disabled--unchecked.#{$ns}Checkbox--checkbox.#{$ns}Checkbox--full {
     i {
@@ -391,7 +394,7 @@
       border-radius: 50%;
     }
 
-    &.#{$ns}Checkbox--button--disabled--unchecked.#{$ns}Checkbox--full{
+    &.#{$ns}Checkbox--button--disabled--unchecked.#{$ns}Checkbox--full {
       background: none;
 
       i {
@@ -464,7 +467,7 @@
     display: block;
     margin-bottom: var(--Form-label-paddingTop);
   }
-  
+
   .#{$ns}Checkbox--button {
     margin-bottom: 0;