chore(ui): fix checkbox style

Author: xiejay97

packages/ui/src/components/checkbox/demos/1.Basic.md

@@ -13,15 +13,26 @@ The simplest usage.
 最简单的用法。
 
 ```tsx
-import { DCheckbox } from '@react-devui/ui';
+import { useState } from 'react';
+
+import { DButton, DCheckbox } from '@react-devui/ui';
 
 export default function Demo() {
+  const [disabled, setDisabled] = useState(false);
+
   return (
     <>
-      <DCheckbox>Checkbox</DCheckbox>
-      <DCheckbox dIndeterminate>Checkbox</DCheckbox>
-      <DCheckbox dDisabled>Checkbox</DCheckbox>
-      <DCheckbox dModel={true} dDisabled>
+      <DButton
+        onClick={() => {
+          setDisabled((prev) => !prev);
+        }}
+      >
+        Toggle disabled
+      </DButton>
+      <br />
+      <br />
+      <DCheckbox dDisabled={disabled}>Checkbox</DCheckbox>
+      <DCheckbox dIndeterminate dDisabled={disabled}>
         Checkbox
       </DCheckbox>
     </>

packages/ui/src/styles/components/checkbox.scss

@@ -37,7 +37,6 @@
 
       &::after {
         background-color: var(--#{$rd-prefix}background-color-disabled);
-        opacity: 1;
       }
     }
 
@@ -47,6 +46,10 @@
         border-left-color: var(--#{$rd-prefix}color-disabled);
       }
     }
+
+    @include e(indeterminate) {
+      background-color: var(--#{$rd-prefix}color-disabled);
+    }
   }
 
   @include when(checked) {
@@ -60,36 +63,34 @@
           animation: wave-spread 0.36s linear;
           animation-fill-mode: backwards;
         }
+
+        &::after {
+          background-color: var(--#{$rd-prefix}color-primary);
+        }
       }
 
       @include e(tick) {
         animation: checkbox-tick 133ms linear;
         animation-fill-mode: backwards;
       }
     }
-
-    @include e(state-container) {
-      &::after {
-        opacity: 1;
-      }
-    }
   }
 
   @include when(indeterminate) {
     &:not(.is-disabled) {
       @include e(input) {
         border-color: var(--#{$rd-prefix}color-primary);
       }
-    }
 
-    @include e(state-container) {
-      &::before {
-        animation: wave-spread 0.36s linear;
-        animation-fill-mode: backwards;
-      }
+      @include e(state-container) {
+        &::before {
+          animation: wave-spread 0.36s linear;
+          animation-fill-mode: backwards;
+        }
 
-      &::after {
-        opacity: 1;
+        &::after {
+          background-color: var(--#{$rd-prefix}color-primary);
+        }
       }
     }
   }
@@ -110,19 +111,18 @@
       position: absolute;
       inset: 0;
       content: '';
-      border: 1px solid var(--#{$rd-prefix}color-primary);
+      border: 1px solid transparent;
       border-radius: var(--#{$rd-prefix}border-radius);
-      opacity: 0;
     }
 
     &::after {
       position: absolute;
       inset: 0;
       content: '';
-      background-color: var(--#{$rd-prefix}color-primary);
+      background-color: transparent;
       border-radius: var(--#{$rd-prefix}border-radius);
-      opacity: 0;
-      transition: transform var(--#{$rd-prefix}animation-duration-fast) linear, opacity var(--#{$rd-prefix}animation-duration-fast) linear;
+      transition: transform var(--#{$rd-prefix}animation-duration-fast) linear,
+        background-color var(--#{$rd-prefix}animation-duration-fast) linear;
     }
   }