@nutui/nutui-react-taro 3.0.21-cpp → 4.0.0-beta.1

package/dist/cjs/packages/checkbox/style/checkbox.scss

@@ -1,18 +1,29 @@
 .nut-checkbox {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
+  min-height: scale-px(32px);
+
+  &.nut-checkbox-nolabel {
+    min-width: scale-px(32px);
+    justify-content: center;
+  }
 
   &-icon {
     color: $color-text-disabled;
+    background-color: $color-background-overlay;
+    transition-duration: 0.3s;
+    transition-property: color, border-color, background-color;
     font-size: $checkbox-icon-font-size;
+    border-radius: 50%;
     flex-shrink: 0;
   }
 
   &-icon-wrap {
     font-size: 0px;
-    line-height: 0px;
+    line-height: 0;
     border-radius: 50%;
-    box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
+    box-shadow: none;
   }
 
   &-icon-checked {
@@ -21,9 +32,12 @@
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
     border-radius: 50%;
+    box-shadow: none;
 
     &.nut-checkbox-icon-disabled {
       color: $color-primary-disabled-special;
+      background-color: $color-background-overlay;
+      box-shadow: none;
     }
   }
 
@@ -41,17 +55,19 @@
   &-icon-indeterminate {
     color: $color-primary;
     background-color: $white;
-    box-shadow: 0px 2px 4px 0px #ff0f2333;
+    box-shadow: none;
     border-radius: 50%;
 
     &.nut-checkbox-icon-disabled {
       color: $color-primary-disabled-special;
+      background-color: $color-background-overlay;
+      box-shadow: none;
     }
   }
 
   &-icon-disabled {
     color: $color-text-disabled;
-    background-color: $white;
+    background-color: $color-background-overlay;
     border-radius: 50%;
     box-shadow: none;
   }
@@ -74,14 +90,14 @@
     display: inline-flex;
     /* #endif */
     align-items: center;
-    min-height: 32px;
+    min-height: scale-px(32px);
     padding: $checkbox-button-padding;
     font-size: $checkbox-button-font-size;
     background: $checkbox-button-background;
     border-radius: $checkbox-button-border-radius;
     color: $checkbox-label-color;
     box-sizing: border-box;
-    border: 1px solid $checkbox-button-background;
+    border: scale-px(1px) solid $checkbox-button-background;
     overflow: hidden;
 
     &-active {
@@ -92,7 +108,7 @@
 
     &-disabled {
       color: $color-text-disabled;
-      border: 1px solid $checkbox-button-background;
+      border: scale-px(1px) solid $checkbox-button-background;
     }
 
     &-icon {
@@ -101,35 +117,35 @@
       bottom: 0;
       width: 0;
       height: 0;
-      border-top: 10px solid transparent;
-      border-left: 10px solid transparent;
-      border-bottom: 10px solid $color-primary;
-      border-right: 10px solid $color-primary;
+      border-top: $icon-size-10 solid transparent;
+      border-left: $icon-size-10 solid transparent;
+      border-bottom: $icon-size-10 solid $color-primary;
+      border-right: $icon-size-10 solid $color-primary;
       display: flex;
       align-items: flex-end;
       justify-content: flex-end;
     }
 
     .nut-checkbox-button-icon-checked {
-      width: 12px;
-      height: 12px;
+      width: scale-px(12px);
+      height: scale-px(12px);
       position: absolute;
       color: $white;
       right: 0;
       bottom: 0;
-      transform: translate(-1px, -2px);
+      transform: translate(scale-px(-1px), scale-px(-2px));
     }
 
     .nut-icon {
       position: absolute;
-      font-size: 12px;
-      width: 12px;
-      height: 12px;
+      font-size: $font-size-s;
+      width: scale-px(12px);
+      height: scale-px(12px);
 
       &:before {
         top: auto;
-        bottom: -22px;
-        margin-left: 6px;
+        bottom: scale-px(-22px);
+        margin-left: scale-px(6px);
       }
     }
   }
@@ -137,7 +153,7 @@
   .nut-checkbox-button-active.nut-checkbox-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: 1px solid $color-text-disabled;
+    border: scale-px(1px) solid $color-text-disabled;
   }
 
   &-list-item {
@@ -174,19 +190,19 @@
     &-icon {
       right: auto;
       left: 0;
-      border-right: 10px solid transparent;
-      border-left: 10px solid $color-primary;
+      border-right: scale-px(10px) solid transparent;
+      border-left: scale-px(10px) solid $color-primary;
 
       &-checked {
         left: auto;
         right: 50%;
-        transform: translate(3px, -3px);
+        transform: translate(scale-px(3px), scale-px(-3px));
       }
 
       .nut-icon {
         &:before {
           margin-left: 0;
-          margin-right: 6px;
+          margin-right: scale-px(6px);
         }
       }
     }

package/dist/cjs/packages/checkbox/style/style.css

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
@@ -5,17 +15,27 @@
 .nut-checkbox {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
+  min-height: calc(32px * var(--nut-scale-f, 1));
+}
+.nut-checkbox.nut-checkbox-nolabel {
+  min-width: calc(32px * var(--nut-scale-f, 1));
+  justify-content: center;
 }
 .nut-checkbox-icon {
   color: var(--nutui-color-text-disabled, #c2c4cc);
-  font-size: var(--nutui-checkbox-icon-font-size, var(--nutui-font-size-icon, 16px));
+  background-color: var(--nutui-color-background-overlay, #ffffff);
+  transition-duration: 0.3s;
+  transition-property: color, border-color, background-color;
+  font-size: var(--nutui-checkbox-icon-font-size, var(--nutui-font-size-icon, calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1)))));
+  border-radius: 50%;
   flex-shrink: 0;
 }
 .nut-checkbox-icon-wrap {
   font-size: 0px;
-  line-height: 0px;
+  line-height: 0;
   border-radius: 50%;
-  box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
+  box-shadow: none;
 }
 .nut-checkbox-icon-checked {
   color: var(--nutui-color-primary, #ff0f23);
@@ -23,13 +43,16 @@
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
   border-radius: 50%;
+  box-shadow: none;
 }
 .nut-checkbox-icon-checked.nut-checkbox-icon-disabled {
-  color: var(--nutui-color-primary-disabled-special, #ffadbe);
+  color: var(--nutui-color-primary-disabled-special, #ff91a5);
+  background-color: var(--nutui-color-background-overlay, #ffffff);
+  box-shadow: none;
 }
 .nut-checkbox-label {
-  margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4px));
-  font-size: var(--nutui-checkbox-label-font-size, var(--nutui-font-size-s, 12px));
+  margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
+  font-size: var(--nutui-checkbox-label-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-checkbox-label-color, var(--nutui-color-title, #1a1a1a));
   flex-shrink: 0;
 }
@@ -39,15 +62,17 @@
 .nut-checkbox-icon-indeterminate {
   color: var(--nutui-color-primary, #ff0f23);
   background-color: #ffffff;
-  box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
+  box-shadow: none;
   border-radius: 50%;
 }
 .nut-checkbox-icon-indeterminate.nut-checkbox-icon-disabled {
-  color: var(--nutui-color-primary-disabled-special, #ffadbe);
+  color: var(--nutui-color-primary-disabled-special, #ff91a5);
+  background-color: var(--nutui-color-background-overlay, #ffffff);
+  box-shadow: none;
 }
 .nut-checkbox-icon-disabled {
   color: var(--nutui-color-text-disabled, #c2c4cc);
-  background-color: #ffffff;
+  background-color: var(--nutui-color-background-overlay, #ffffff);
   border-radius: 50%;
   box-shadow: none;
 }
@@ -55,7 +80,7 @@
   flex-direction: row-reverse;
 }
 .nut-checkbox-reverse .nut-checkbox-label {
-  margin-right: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4px));
+  margin-right: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
   margin-left: 0;
 }
 .nut-checkbox-button {
@@ -67,24 +92,24 @@
   display: inline-flex;
   /* #endif */
   align-items: center;
-  min-height: 32px;
-  padding: var(--nutui-checkbox-button-padding, 5px 18px);
-  font-size: var(--nutui-checkbox-button-font-size, var(--nutui-font-size-s, 12px));
+  min-height: calc(32px * var(--nut-scale-f, 1));
+  padding: var(--nutui-checkbox-button-padding, calc(5px * var(--nut-scale-f, 1)) calc(18px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-checkbox-button-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   background: var(--nutui-color-background, #f2f3f5);
-  border-radius: var(--nutui-checkbox-button-border-radius, 15px);
+  border-radius: var(--nutui-checkbox-button-border-radius, calc(15px * var(--nut-scale-f, 1)));
   color: var(--nutui-checkbox-label-color, var(--nutui-color-title, #1a1a1a));
   box-sizing: border-box;
-  border: 1px solid var(--nutui-color-background, #f2f3f5);
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-background, #f2f3f5);
   overflow: hidden;
 }
 .nut-checkbox-button-active {
-  background: var(--nutui-color-primary-light-pressed, #ffebf1);
+  background: var(--nutui-color-primary-light-pressed, #ffe8ee);
   color: var(--nutui-color-primary, #ff0f23);
-  border: var(--nutui-checkbox-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  border: var(--nutui-checkbox-button-active-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));
 }
 .nut-checkbox-button-disabled {
   color: var(--nutui-color-text-disabled, #c2c4cc);
-  border: 1px solid var(--nutui-color-background, #f2f3f5);
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-background, #f2f3f5);
 }
 .nut-checkbox-button-icon {
   position: absolute;
@@ -92,44 +117,44 @@
   bottom: 0;
   width: 0;
   height: 0;
-  border-top: 10px solid transparent;
-  border-left: 10px solid transparent;
-  border-bottom: 10px solid var(--nutui-color-primary, #ff0f23);
-  border-right: 10px solid var(--nutui-color-primary, #ff0f23);
+  border-top: var(--nutui-icon-size-10, calc(10px * var(--nut-scale-icon, var(--nut-scale-f, 1)))) solid transparent;
+  border-left: var(--nutui-icon-size-10, calc(10px * var(--nut-scale-icon, var(--nut-scale-f, 1)))) solid transparent;
+  border-bottom: var(--nutui-icon-size-10, calc(10px * var(--nut-scale-icon, var(--nut-scale-f, 1)))) solid var(--nutui-color-primary, #ff0f23);
+  border-right: var(--nutui-icon-size-10, calc(10px * var(--nut-scale-icon, var(--nut-scale-f, 1)))) solid var(--nutui-color-primary, #ff0f23);
   display: flex;
   align-items: flex-end;
   justify-content: flex-end;
 }
 .nut-checkbox-button .nut-checkbox-button-icon-checked {
-  width: 12px;
-  height: 12px;
+  width: calc(12px * var(--nut-scale-f, 1));
+  height: calc(12px * var(--nut-scale-f, 1));
   position: absolute;
   color: #ffffff;
   right: 0;
   bottom: 0;
-  transform: translate(-1px, -2px);
+  transform: translate(calc(-1px * var(--nut-scale-f, 1)), calc(-2px * var(--nut-scale-f, 1)));
 }
 .nut-checkbox-button .nut-icon {
   position: absolute;
-  font-size: 12px;
-  width: 12px;
-  height: 12px;
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  width: calc(12px * var(--nut-scale-f, 1));
+  height: calc(12px * var(--nut-scale-f, 1));
 }
 .nut-checkbox-button .nut-icon:before {
   top: auto;
-  bottom: -22px;
-  margin-left: 6px;
+  bottom: calc(-22px * var(--nut-scale-f, 1));
+  margin-left: calc(6px * var(--nut-scale-f, 1));
 }
 .nut-checkbox .nut-checkbox-button-active.nut-checkbox-button-disabled {
   background: var(--nutui-color-text-disabled, #c2c4cc);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-checkbox-list-item {
   display: flex;
   justify-content: space-between;
-  padding: var(--nutui-checkbox-list-item-padding, 12px 12px 12px 0);
-  border-top: var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  padding: var(--nutui-checkbox-list-item-padding, calc(12px * var(--nut-scale-f, 1)) calc(12px * var(--nut-scale-f, 1)) calc(12px * var(--nut-scale-f, 1)) 0);
+  border-top: var(--nutui-checkbox-list-item-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-checkbox-list-item .nut-checkbox-label {
   flex: none;
@@ -141,28 +166,28 @@
 [dir=rtl] .nut-checkbox-label,
 .nut-rtl .nut-checkbox-label {
   margin-left: 0;
-  margin-right: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4px));
+  margin-right: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
 }
 [dir=rtl] .nut-checkbox-reverse .nut-checkbox-label,
 .nut-rtl .nut-checkbox-reverse .nut-checkbox-label {
-  margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4px));
+  margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
   margin-right: 0;
 }
 [dir=rtl] .nut-checkbox-button-icon,
 .nut-rtl .nut-checkbox-button-icon {
   right: auto;
   left: 0;
-  border-right: 10px solid transparent;
-  border-left: 10px solid var(--nutui-color-primary, #ff0f23);
+  border-right: calc(10px * var(--nut-scale-f, 1)) solid transparent;
+  border-left: calc(10px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23);
 }
 [dir=rtl] .nut-checkbox-button-icon-checked,
 .nut-rtl .nut-checkbox-button-icon-checked {
   left: auto;
   right: 50%;
-  transform: translate(3px, -3px);
+  transform: translate(calc(3px * var(--nut-scale-f, 1)), calc(-3px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-checkbox-button-icon .nut-icon:before,
 .nut-rtl .nut-checkbox-button-icon .nut-icon:before {
   margin-left: 0;
-  margin-right: 6px;
+  margin-right: calc(6px * var(--nut-scale-f, 1));
 }

package/dist/cjs/packages/checkbox/style/style.harmony.css

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
@@ -17,8 +27,8 @@
   justify-content: space-between;
 }
 .nut-checkboxgroup-vertical .nut-checkbox-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
-  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+  border: var(--nutui-radio-button-active-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-color-primary-light-pressed, #ffe8ee);
 }
 .nut-checkboxgroup-horizontal {
   display: flex;
@@ -36,14 +46,14 @@
   margin-right: 20px;
 }
 .nut-checkboxgroup-horizontal .nut-checkbox-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
-  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+  border: var(--nutui-radio-button-active-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-color-primary-light-pressed, #ffe8ee);
 }
 .nut-checkboxgroup-list {
   flex-grow: 1;
-  border-bottom: var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  border-top: var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  padding: var(--nutui-checkbox-list-padding, 0 0 0 12px);
+  border-bottom: var(--nutui-checkbox-list-item-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-top: var(--nutui-checkbox-list-item-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  padding: var(--nutui-checkbox-list-padding, 0 0 0 calc(12px * var(--nut-scale-f, 1)));
   background: var(--nutui-checkbox-list-background-color, #ffffff);
   box-sizing: border-box;
 }
@@ -76,17 +86,27 @@
 .nut-checkbox {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
+  min-height: calc(32px * var(--nut-scale-f, 1));
+}
+.nut-checkbox.nut-checkbox-nolabel {
+  min-width: calc(32px * var(--nut-scale-f, 1));
+  justify-content: center;
 }
 .nut-checkbox-icon {
   color: var(--nutui-color-text-disabled, #c2c4cc);
-  font-size: var(--nutui-checkbox-icon-font-size, var(--nutui-font-size-icon, 16px));
+  background-color: var(--nutui-color-background-overlay, #ffffff);
+  transition-duration: 0.3s;
+  transition-property: color, border-color, background-color;
+  font-size: var(--nutui-checkbox-icon-font-size, var(--nutui-font-size-icon, calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1)))));
+  border-radius: 50%;
   flex-shrink: 0;
 }
 .nut-checkbox-icon-wrap {
   font-size: 0px;
-  line-height: 0px;
+  line-height: 0;
   border-radius: 50%;
-  box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
+  box-shadow: none;
 }
 .nut-checkbox-icon-checked {
   color: var(--nutui-color-primary, #ff0f23);
@@ -94,13 +114,16 @@
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
   border-radius: 50%;
+  box-shadow: none;
 }
 .nut-checkbox-icon-checked.nut-checkbox-icon-disabled {
-  color: var(--nutui-color-primary-disabled-special, #ffadbe);
+  color: var(--nutui-color-primary-disabled-special, #ff91a5);
+  background-color: var(--nutui-color-background-overlay, #ffffff);
+  box-shadow: none;
 }
 .nut-checkbox-label {
-  margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4px));
-  font-size: var(--nutui-checkbox-label-font-size, var(--nutui-font-size-s, 12px));
+  margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
+  font-size: var(--nutui-checkbox-label-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-checkbox-label-color, var(--nutui-color-title, #1a1a1a));
   flex-shrink: 0;
 }
@@ -110,15 +133,17 @@
 .nut-checkbox-icon-indeterminate {
   color: var(--nutui-color-primary, #ff0f23);
   background-color: #ffffff;
-  box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
+  box-shadow: none;
   border-radius: 50%;
 }
 .nut-checkbox-icon-indeterminate.nut-checkbox-icon-disabled {
-  color: var(--nutui-color-primary-disabled-special, #ffadbe);
+  color: var(--nutui-color-primary-disabled-special, #ff91a5);
+  background-color: var(--nutui-color-background-overlay, #ffffff);
+  box-shadow: none;
 }
 .nut-checkbox-icon-disabled {
   color: var(--nutui-color-text-disabled, #c2c4cc);
-  background-color: #ffffff;
+  background-color: var(--nutui-color-background-overlay, #ffffff);
   border-radius: 50%;
   box-shadow: none;
 }
@@ -126,7 +151,7 @@
   flex-direction: row-reverse;
 }
 .nut-checkbox-reverse .nut-checkbox-label {
-  margin-right: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4px));
+  margin-right: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
   margin-left: 0;
 }
 .nut-checkbox-button {
@@ -138,24 +163,24 @@
   display: inline-flex;
   /* #endif */
   align-items: center;
-  min-height: 32px;
-  padding: var(--nutui-checkbox-button-padding, 5px 18px);
-  font-size: var(--nutui-checkbox-button-font-size, var(--nutui-font-size-s, 12px));
+  min-height: calc(32px * var(--nut-scale-f, 1));
+  padding: var(--nutui-checkbox-button-padding, calc(5px * var(--nut-scale-f, 1)) calc(18px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-checkbox-button-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   background: var(--nutui-color-background, #f2f3f5);
-  border-radius: var(--nutui-checkbox-button-border-radius, 15px);
+  border-radius: var(--nutui-checkbox-button-border-radius, calc(15px * var(--nut-scale-f, 1)));
   color: var(--nutui-checkbox-label-color, var(--nutui-color-title, #1a1a1a));
   box-sizing: border-box;
-  border: 1px solid var(--nutui-color-background, #f2f3f5);
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-background, #f2f3f5);
   overflow: hidden;
 }
 .nut-checkbox-button-active {
-  background: var(--nutui-color-primary-light-pressed, #ffebf1);
+  background: var(--nutui-color-primary-light-pressed, #ffe8ee);
   color: var(--nutui-color-primary, #ff0f23);
-  border: var(--nutui-checkbox-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  border: var(--nutui-checkbox-button-active-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));
 }
 .nut-checkbox-button-disabled {
   color: var(--nutui-color-text-disabled, #c2c4cc);
-  border: 1px solid var(--nutui-color-background, #f2f3f5);
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-background, #f2f3f5);
 }
 .nut-checkbox-button-icon {
   position: absolute;
@@ -163,44 +188,44 @@
   bottom: 0;
   width: 0;
   height: 0;
-  border-top: 10px solid transparent;
-  border-left: 10px solid transparent;
-  border-bottom: 10px solid var(--nutui-color-primary, #ff0f23);
-  border-right: 10px solid var(--nutui-color-primary, #ff0f23);
+  border-top: var(--nutui-icon-size-10, calc(10px * var(--nut-scale-icon, var(--nut-scale-f, 1)))) solid transparent;
+  border-left: var(--nutui-icon-size-10, calc(10px * var(--nut-scale-icon, var(--nut-scale-f, 1)))) solid transparent;
+  border-bottom: var(--nutui-icon-size-10, calc(10px * var(--nut-scale-icon, var(--nut-scale-f, 1)))) solid var(--nutui-color-primary, #ff0f23);
+  border-right: var(--nutui-icon-size-10, calc(10px * var(--nut-scale-icon, var(--nut-scale-f, 1)))) solid var(--nutui-color-primary, #ff0f23);
   display: flex;
   align-items: flex-end;
   justify-content: flex-end;
 }
 .nut-checkbox-button .nut-checkbox-button-icon-checked {
-  width: 12px;
-  height: 12px;
+  width: calc(12px * var(--nut-scale-f, 1));
+  height: calc(12px * var(--nut-scale-f, 1));
   position: absolute;
   color: #ffffff;
   right: 0;
   bottom: 0;
-  transform: translate(-1px, -2px);
+  transform: translate(calc(-1px * var(--nut-scale-f, 1)), calc(-2px * var(--nut-scale-f, 1)));
 }
 .nut-checkbox-button .nut-icon {
   position: absolute;
-  font-size: 12px;
-  width: 12px;
-  height: 12px;
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  width: calc(12px * var(--nut-scale-f, 1));
+  height: calc(12px * var(--nut-scale-f, 1));
 }
 .nut-checkbox-button .nut-icon:before {
   top: auto;
-  bottom: -22px;
-  margin-left: 6px;
+  bottom: calc(-22px * var(--nut-scale-f, 1));
+  margin-left: calc(6px * var(--nut-scale-f, 1));
 }
 .nut-checkbox .nut-checkbox-button-active.nut-checkbox-button-disabled {
   background: var(--nutui-color-text-disabled, #c2c4cc);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-checkbox-list-item {
   display: flex;
   justify-content: space-between;
-  padding: var(--nutui-checkbox-list-item-padding, 12px 12px 12px 0);
-  border-top: var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  padding: var(--nutui-checkbox-list-item-padding, calc(12px * var(--nut-scale-f, 1)) calc(12px * var(--nut-scale-f, 1)) calc(12px * var(--nut-scale-f, 1)) 0);
+  border-top: var(--nutui-checkbox-list-item-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-checkbox-list-item .nut-checkbox-label {
   flex: none;
@@ -212,28 +237,28 @@
 [dir=rtl] .nut-checkbox-label,
 .nut-rtl .nut-checkbox-label {
   margin-left: 0;
-  margin-right: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4px));
+  margin-right: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
 }
 [dir=rtl] .nut-checkbox-reverse .nut-checkbox-label,
 .nut-rtl .nut-checkbox-reverse .nut-checkbox-label {
-  margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4px));
+  margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
   margin-right: 0;
 }
 [dir=rtl] .nut-checkbox-button-icon,
 .nut-rtl .nut-checkbox-button-icon {
   right: auto;
   left: 0;
-  border-right: 10px solid transparent;
-  border-left: 10px solid var(--nutui-color-primary, #ff0f23);
+  border-right: calc(10px * var(--nut-scale-f, 1)) solid transparent;
+  border-left: calc(10px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23);
 }
 [dir=rtl] .nut-checkbox-button-icon-checked,
 .nut-rtl .nut-checkbox-button-icon-checked {
   left: auto;
   right: 50%;
-  transform: translate(3px, -3px);
+  transform: translate(calc(3px * var(--nut-scale-f, 1)), calc(-3px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-checkbox-button-icon .nut-icon:before,
 .nut-rtl .nut-checkbox-button-icon .nut-icon:before {
   margin-left: 0;
-  margin-right: 6px;
+  margin-right: calc(6px * var(--nut-scale-f, 1));
 }