@nutui/nutui-react 3.0.20-beta.0 → 3.1.0-beta.1

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

@@ -1,12 +1,22 @@
+: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 */
 /* #endif */
 .nut-radiogroup .nut-radio {
-  margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
+  margin: 0 var(--nutui-radiogroup-radio-margin, calc(20px * var(--nut-scale-f, 1))) var(--nutui-radiogroup-radio-margin-bottom, calc(5px * var(--nut-scale-f, 1))) 0;
 }
 .nut-radiogroup .nut-radio-label {
-  margin: var(--nutui-radiogroup-radio-label-margin, 0 5px);
+  margin: var(--nutui-radiogroup-radio-label-margin, 0 calc(5px * var(--nut-scale-f, 1)));
 }
 .nut-radiogroup .nut-radio-button {
   background-color: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
@@ -19,33 +29,33 @@
   justify-content: space-between;
 }
 .nut-radiogroup-vertical .nut-radio-button {
-  border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radiogroup-vertical .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  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, #ffebf1);
 }
 .nut-radiogroup-horizontal {
   display: flex;
 }
 .nut-radiogroup-horizontal .nut-radio-button {
-  border: 1px solid #ffffff;
+  border: calc(1px * var(--nut-scale-f, 1)) solid #ffffff;
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  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, #ffebf1);
 }
 .nut-radiogroup-horizontal .nut-radio:last-child {
-  margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
+  margin: 0 var(--nutui-radiogroup-radio-margin, calc(20px * var(--nut-scale-f, 1))) var(--nutui-radiogroup-radio-margin-bottom, calc(5px * var(--nut-scale-f, 1))) 0;
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-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);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,
 .nut-rtl .nut-radiogroup .nut-radio {
-  margin-left: var(--nutui-radiogroup-radio-margin, 20px);
+  margin-left: var(--nutui-radiogroup-radio-margin, calc(20px * var(--nut-scale-f, 1)));
   margin-right: 0;
 }

package/dist/cjs/packages/radiogroup/style-jmapp/radiogroup.scss

@@ -23,7 +23,7 @@
       }
 
       &-button {
-        border: 1px solid $radio-button-background;
+        border: scale-px(1px) solid $radio-button-background;
       }
 
       &-button-active {
@@ -38,7 +38,7 @@
 
     .nut-radio {
       &-button {
-        border: 1px solid $white;
+        border: scale-px(1px) solid $white;
       }
 
       &-button-active {
@@ -55,7 +55,7 @@
   .nut-radio-button-active.nut-radio-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: 1px solid $color-text-disabled;
+    border: scale-px(1px) solid $color-text-disabled;
   }
 }
 

package/dist/cjs/packages/radiogroup/style-jmapp/style.css

@@ -19,7 +19,7 @@
   justify-content: space-between;
 }
 .nut-radiogroup-vertical .nut-radio-button {
-  border: 1px solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
+  border: scale-px(1px) solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
 }
 .nut-radiogroup-vertical .nut-radio-button-active {
   border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary-light-pressed));
@@ -29,7 +29,7 @@
   display: flex;
 }
 .nut-radiogroup-horizontal .nut-radio-button {
-  border: 1px solid #ffffff;
+  border: scale-px(1px) solid #ffffff;
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
   border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary-light-pressed));
@@ -41,7 +41,7 @@
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
   background: var(--nutui-color-text-disabled);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled);
+  border: scale-px(1px) solid var(--nutui-color-text-disabled);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,

package/dist/cjs/packages/radiogroup/style-jrkf/radiogroup.scss

@@ -23,7 +23,7 @@
       }
 
       &-button {
-        border: 1px solid $radio-button-background;
+        border: scale-px(1px) solid $radio-button-background;
       }
 
       &-button-active {
@@ -38,7 +38,7 @@
 
     .nut-radio {
       &-button {
-        border: 1px solid $white;
+        border: scale-px(1px) solid $white;
       }
 
       &-button-active {
@@ -55,7 +55,7 @@
   .nut-radio-button-active.nut-radio-button-disabled {
     background: $color-text-disabled;
     color: $white;
-    border: 1px solid $color-text-disabled;
+    border: scale-px(1px) solid $color-text-disabled;
   }
 }
 

package/dist/cjs/packages/radiogroup/style-jrkf/style.css

@@ -19,7 +19,7 @@
   justify-content: space-between;
 }
 .nut-radiogroup-vertical .nut-radio-button {
-  border: 1px solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
+  border: scale-px(1px) solid var(--nutui-radio-button-background, var(--nutui-color-surface-1));
 }
 .nut-radiogroup-vertical .nut-radio-button-active {
   border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary-light, #ffe5e5));
@@ -29,7 +29,7 @@
   display: flex;
 }
 .nut-radiogroup-horizontal .nut-radio-button {
-  border: 1px solid #ffffff;
+  border: scale-px(1px) solid #ffffff;
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
   border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary-light, #ffe5e5));
@@ -41,7 +41,7 @@
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
   background: var(--nutui-color-text-disabled);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled);
+  border: scale-px(1px) solid var(--nutui-color-text-disabled);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,

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

@@ -19,13 +19,13 @@
   height: $range-height;
   margin: 0 $range-margin;
   background-color: $range-inactive-color;
-  border-radius: 2px;
+  border-radius: scale-px(2px);
   flex: 1;
   cursor: pointer;
 
   &::before {
     position: absolute;
-    inset-block: -8px;
+    inset-block: scale-px(-8px);
     inset-inline: 0;
     content: '';
   }
@@ -45,7 +45,7 @@
     max-width: 100%;
     max-height: 100%;
     background: $range-active-color;
-    border-radius: 2px;
+    border-radius: scale-px(2px);
 
     &-animate {
       transition: all 0.2s;
@@ -59,7 +59,7 @@
     height: $range-button-height;
     background: $range-button-background;
     border-radius: 50%;
-    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 scale-px(1px) scale-px(2px) 0 rgba(0, 0, 0, 0.15);
     border: $range-button-border;
     outline: none;
     align-items: center;
@@ -98,9 +98,9 @@
     &-number {
       position: relative;
       width: 200%;
-      height: 24px;
-      line-height: 14px;
-      padding: 5px 0;
+      height: scale-px(24px);
+      line-height: scale-px(14px);
+      padding: scale-px(5px) 0;
       left: 50%;
       display: flex;
       align-items: center;
@@ -130,7 +130,7 @@
   &-mark {
     position: absolute;
     width: 100%;
-    height: 14px;
+    height: scale-px(14px);
     overflow: visible;
     top: 50%;
   }
@@ -138,15 +138,15 @@
   &-mark-text-wrapper {
     position: absolute;
     height: 100%;
-    top: 14px;
+    top: scale-px(14px);
     display: inline-block;
-    transform: translateX(-10px);
+    transform: translateX(scale-px(-10px));
   }
 
   &-mark-text {
     position: absolute;
-    line-height: 16px;
-    font-size: 12px;
+    line-height: scale-px(16px);
+    font-size: $font-size-s;
     color: #999;
     text-align: center;
     word-break: keep-all;
@@ -155,11 +155,11 @@
 
   &-tick {
     position: absolute;
-    top: -20px;
-    width: 11px;
-    height: 11px;
-    left: 0px;
-    border-radius: 6px;
+    top: scale-px(-20px);
+    width: scale-px(11px);
+    height: scale-px(11px);
+    left: 0;
+    border-radius: scale-px(6px);
     background: $range-inactive-color;
 
     &-active {
@@ -171,12 +171,12 @@
 .nut-range-vertical-container {
   height: 100%;
   flex-direction: column;
-  padding: 0px 15px;
+  padding: 0 scale-px(15px);
 }
 
 .nut-range-vertical {
   width: $range-height;
-  margin: $range-margin 0px;
+  margin: $range-margin 0;
 
   &-button {
     &-wrapper,
@@ -192,7 +192,7 @@
     }
 
     &-wrapper-left {
-      top: 0px;
+      top: 0;
       left: 50%;
       /* #ifndef dynamic*/
       right: initial;
@@ -201,7 +201,7 @@
     }
 
     &-number {
-      left: 0px;
+      left: 0;
       top: 50%;
       // transform: translate3d(100%, 0, 0);
     }
@@ -209,31 +209,31 @@
 
   &-mark {
     position: absolute;
-    width: 36px;
+    width: scale-px(36px);
     height: 100%;
-    top: 0px;
+    top: 0;
     right: 50%;
     overflow: visible;
-    font-size: 12px;
-    padding: 0px;
+    font-size: $font-size-s;
+    padding: 0;
   }
 
   &-mark-hm {
-    left: -34px;
+    left: scale-px(-34px);
   }
 
   &-mark-text-wrapper {
     // width: 20px;
-    height: 16px;
+    height: scale-px(16px);
     position: absolute;
     display: inline-block;
     user-select: none;
-    transform: translateY(-11px);
+    transform: translateY(scale-px(-11px));
   }
 
   &-mark-text {
     height: 100%;
-    line-height: 16px;
+    line-height: scale-px(16px);
     color: #999;
     text-align: center;
     word-break: keep-all;
@@ -241,11 +241,11 @@
 
   &-tick {
     position: absolute;
-    top: 2px;
-    left: 31px;
-    width: 10px;
-    height: 10px;
-    border-radius: 5px;
+    top: scale-px(2px);
+    left: scale-px(31px);
+    width: scale-px(10px);
+    height: scale-px(10px);
+    border-radius: scale-px(5px);
     background: $range-inactive-color;
 
     &-active {
@@ -275,14 +275,14 @@
   }
 
   &-tick {
-    right: 0px;
+    right: 0;
     /* #ifndef dynamic*/
     left: initial;
     /* #endif */
   }
 
   &-mark-text {
-    transform: translateX(10px);
+    transform: translateX(scale-px(10px));
   }
 
   &-vertical {
@@ -316,13 +316,13 @@
 
     &-tick {
       left: auto;
-      right: 30px;
+      right: scale-px(30px);
       margin-left: 0;
-      margin-right: -0px;
+      margin-right: 0;
     }
 
     &-mark-text-wrapper {
-      transform: translateY(-11px);
+      transform: translateY(scale-px(-11px));
     }
   }
 }

package/dist/cjs/packages/range/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 */
@@ -7,7 +17,7 @@
   flex-direction: row;
   position: relative;
   width: 100%;
-  height: var(--nutui-range-height, 4px);
+  height: var(--nutui-range-height, calc(4px * var(--nut-scale-f, 1)));
   align-items: center;
   justify-content: space-between;
 }
@@ -18,21 +28,21 @@
 .nut-range {
   display: block;
   position: relative;
-  height: var(--nutui-range-height, 4px);
-  margin: 0 var(--nutui-range-margin, 15px);
+  height: var(--nutui-range-height, calc(4px * var(--nut-scale-f, 1)));
+  margin: 0 var(--nutui-range-margin, calc(15px * var(--nut-scale-f, 1)));
   background-color: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
-  border-radius: 2px;
+  border-radius: calc(2px * var(--nut-scale-f, 1));
   flex: 1;
   cursor: pointer;
 }
 .nut-range::before {
   position: absolute;
-  inset-block: -8px;
+  inset-block: calc(-8px * var(--nut-scale-f, 1));
   inset-inline: 0;
   content: "";
 }
 .nut-range-min, .nut-range-max {
-  font-size: var(--nutui-font-size-s, 12px);
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
   user-select: none;
 }
@@ -44,7 +54,7 @@
   max-width: 100%;
   max-height: 100%;
   background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
-  border-radius: 2px;
+  border-radius: calc(2px * var(--nut-scale-f, 1));
 }
 .nut-range-bar-animate {
   transition: all 0.2s;
@@ -52,20 +62,20 @@
 .nut-range-button {
   position: absolute;
   display: flex;
-  width: var(--nutui-range-button-width, 24px);
-  height: var(--nutui-range-button-height, 24px);
+  width: var(--nutui-range-button-width, calc(24px * var(--nut-scale-f, 1)));
+  height: var(--nutui-range-button-height, calc(24px * var(--nut-scale-f, 1)));
   background: var(--nutui-range-button-background, #ffffff);
   border-radius: 50%;
-  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-  border: var(--nutui-range-button-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  box-shadow: 0 calc(1px * var(--nut-scale-f, 1)) calc(2px * var(--nut-scale-f, 1)) 0 rgba(0, 0, 0, 0.15);
+  border: var(--nutui-range-button-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));
   outline: none;
   align-items: center;
   top: 50%;
   left: 50%;
 }
 .nut-range-button-wrapper, .nut-range-button-wrapper-right, .nut-range-button-wrapper-left {
-  width: var(--nutui-range-button-width, 24px);
-  height: var(--nutui-range-button-height, 24px);
+  width: var(--nutui-range-button-width, calc(24px * var(--nut-scale-f, 1)));
+  height: var(--nutui-range-button-height, calc(24px * var(--nut-scale-f, 1)));
 }
 .nut-range-button-wrapper, .nut-range-button-wrapper-right {
   touch-action: none;
@@ -86,15 +96,15 @@
 .nut-range-button-number {
   position: relative;
   width: 200%;
-  height: 24px;
-  line-height: 14px;
-  padding: 5px 0;
+  height: calc(24px * var(--nut-scale-f, 1));
+  line-height: calc(14px * var(--nut-scale-f, 1));
+  padding: calc(5px * var(--nut-scale-f, 1)) 0;
   left: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   user-select: none;
-  font-size: var(--nutui-font-size-s, 12px);
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
   text-align: center;
   vertical-align: center;
@@ -112,21 +122,21 @@
 .nut-range-mark {
   position: absolute;
   width: 100%;
-  height: 14px;
+  height: calc(14px * var(--nut-scale-f, 1));
   overflow: visible;
   top: 50%;
 }
 .nut-range-mark-text-wrapper {
   position: absolute;
   height: 100%;
-  top: 14px;
+  top: calc(14px * var(--nut-scale-f, 1));
   display: inline-block;
-  transform: translateX(-10px);
+  transform: translateX(calc(-10px * var(--nut-scale-f, 1)));
 }
 .nut-range-mark-text {
   position: absolute;
-  line-height: 16px;
-  font-size: 12px;
+  line-height: calc(16px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   color: #999;
   text-align: center;
   word-break: keep-all;
@@ -134,11 +144,11 @@
 }
 .nut-range-tick {
   position: absolute;
-  top: -20px;
-  width: 11px;
-  height: 11px;
-  left: 0px;
-  border-radius: 6px;
+  top: calc(-20px * var(--nut-scale-f, 1));
+  width: calc(11px * var(--nut-scale-f, 1));
+  height: calc(11px * var(--nut-scale-f, 1));
+  left: 0;
+  border-radius: calc(6px * var(--nut-scale-f, 1));
   background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
 }
 .nut-range-tick-active {
@@ -148,12 +158,12 @@
 .nut-range-vertical-container {
   height: 100%;
   flex-direction: column;
-  padding: 0px 15px;
+  padding: 0 calc(15px * var(--nut-scale-f, 1));
 }
 
 .nut-range-vertical {
-  width: var(--nutui-range-height, 4px);
-  margin: var(--nutui-range-margin, 15px) 0px;
+  width: var(--nutui-range-height, calc(4px * var(--nut-scale-f, 1)));
+  margin: var(--nutui-range-margin, calc(15px * var(--nut-scale-f, 1))) 0;
 }
 .nut-range-vertical-button-wrapper, .nut-range-vertical-button-wrapper-right {
   position: absolute;
@@ -165,50 +175,50 @@
   left: 50%;
 }
 .nut-range-vertical-button-wrapper-left {
-  top: 0px;
+  top: 0;
   left: 50%;
   /* #ifndef dynamic*/
   right: initial;
   /* #endif */
 }
 .nut-range-vertical-button-number {
-  left: 0px;
+  left: 0;
   top: 50%;
 }
 .nut-range-vertical-mark {
   position: absolute;
-  width: 36px;
+  width: calc(36px * var(--nut-scale-f, 1));
   height: 100%;
-  top: 0px;
+  top: 0;
   right: 50%;
   overflow: visible;
-  font-size: 12px;
-  padding: 0px;
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  padding: 0;
 }
 .nut-range-vertical-mark-hm {
-  left: -34px;
+  left: calc(-34px * var(--nut-scale-f, 1));
 }
 .nut-range-vertical-mark-text-wrapper {
-  height: 16px;
+  height: calc(16px * var(--nut-scale-f, 1));
   position: absolute;
   display: inline-block;
   user-select: none;
-  transform: translateY(-11px);
+  transform: translateY(calc(-11px * var(--nut-scale-f, 1)));
 }
 .nut-range-vertical-mark-text {
   height: 100%;
-  line-height: 16px;
+  line-height: calc(16px * var(--nut-scale-f, 1));
   color: #999;
   text-align: center;
   word-break: keep-all;
 }
 .nut-range-vertical-tick {
   position: absolute;
-  top: 2px;
-  left: 31px;
-  width: 10px;
-  height: 10px;
-  border-radius: 5px;
+  top: calc(2px * var(--nut-scale-f, 1));
+  left: calc(31px * var(--nut-scale-f, 1));
+  width: calc(10px * var(--nut-scale-f, 1));
+  height: calc(10px * var(--nut-scale-f, 1));
+  border-radius: calc(5px * var(--nut-scale-f, 1));
   background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
 }
 .nut-range-vertical-tick-active {
@@ -232,14 +242,14 @@
 }
 [dir=rtl] .nut-range-tick,
 .rtl-nut-range-tick {
-  right: 0px;
+  right: 0;
   /* #ifndef dynamic*/
   left: initial;
   /* #endif */
 }
 [dir=rtl] .nut-range-mark-text,
 .rtl-nut-range-mark-text {
-  transform: translateX(10px);
+  transform: translateX(calc(10px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-range-vertical-button-wrapper, [dir=rtl] .nut-range-vertical-button-wrapper-right,
 .rtl-nut-range-vertical-button-wrapper,
@@ -264,11 +274,11 @@
 [dir=rtl] .nut-range-vertical-tick,
 .rtl-nut-range-vertical-tick {
   left: auto;
-  right: 30px;
+  right: calc(30px * var(--nut-scale-f, 1));
   margin-left: 0;
-  margin-right: 0px;
+  margin-right: 0;
 }
 [dir=rtl] .nut-range-vertical-mark-text-wrapper,
 .rtl-nut-range-vertical-mark-text-wrapper {
-  transform: translateY(-11px);
+  transform: translateY(calc(-11px * var(--nut-scale-f, 1)));
 }