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

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

@@ -6,7 +6,7 @@
   width: var(--nutui-hoverbutton-item-size, 40px);
   height: var(--nutui-hoverbutton-item-size, 40px);
   border-radius: var(--nutui-hoverbutton-item-size, 40px);
-  border: 1px solid var(--nutui-hoverbutton-item-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
+  border: scale-px(1px) solid var(--nutui-hoverbutton-item-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
   background-color: var(--nutui-hoverbutton-item-background, var(--nutui-gray-1, #ffffff));
 }
 .nut-hoverbutton-item-container:active, .nut-hoverbutton-item-container-active {
@@ -25,33 +25,33 @@
 }
 .nut-hoverbutton-item-container-icontext .nut-icon {
   display: block;
-  width: 14px;
-  height: 14px;
-  font-size: 14px;
+  width: scale-px(14px);
+  height: scale-px(14px);
+  font-size: var(--nutui-font-text);
 }
 .nut-hoverbutton-item-icon {
-  width: 20px;
-  height: 20px;
-  margin: 9px;
+  width: scale-px(20px);
+  height: scale-px(20px);
+  margin: scale-px(9px);
   color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7, #1a1a1a));
   fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7, #1a1a1a));
 }
 .nut-hoverbutton-item-icon .nut-icon {
   display: block;
-  width: 20px;
-  height: 20px;
-  font-size: 20px;
+  width: scale-px(20px);
+  height: scale-px(20px);
+  font-size: var(--nutui-font-size-2xl, 20px);
 }
 .nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
   color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-6, #595959));
   fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-6, #595959));
 }
 .nut-hoverbutton-item-text-icon {
-  width: 14px;
-  height: 5px;
+  width: scale-px(14px);
+  height: scale-px(5px);
 }
 .nut-hoverbutton-item-text {
-  font-size: 10px;
-  margin-top: 5px;
-  line-height: 9px;
+  font-size: var(--nutui-font-text-mini);
+  margin-top: scale-px(5px);
+  line-height: scale-px(9px);
 }

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

@@ -3,7 +3,7 @@
     width: $hoverbutton-item-size;
     height: $hoverbutton-item-size;
     border-radius: $hoverbutton-item-size;
-    border: 1px solid $hoverbutton-item-border-color;
+    border: scale-px(1px) solid $hoverbutton-item-border-color;
     background-color: $hoverbutton-item-background;
 
     &:active,
@@ -26,25 +26,25 @@
 
       .nut-icon {
         display: block;
-        width: 14px;
-        height: 14px;
-        font-size: 14px;
+        width: scale-px(14px);
+        height: scale-px(14px);
+        font-size: $font-size-base;
       }
     }
   }
 
   &-icon {
-    width: 20px;
-    height: 20px;
-    margin: 9px;
+    width: scale-px(20px);
+    height: scale-px(20px);
+    margin: scale-px(9px);
     color: $hoverbutton-item-icon-color;
     fill: $hoverbutton-item-icon-color;
 
     .nut-icon {
       display: block;
-      width: 20px;
-      height: 20px;
-      font-size: 20px;
+      width: scale-px(20px);
+      height: scale-px(20px);
+      font-size: $font-size-2xl;
     }
   }
 
@@ -54,13 +54,13 @@
   }
 
   &-text-icon {
-    width: 14px;
-    height: 5px;
+    width: scale-px(14px);
+    height: scale-px(5px);
   }
 
   &-text {
-    font-size: 10px;
-    margin-top: 5px;
-    line-height: 9px;
+    font-size: $font-size-xxs;
+    margin-top: scale-px(5px);
+    line-height: scale-px(9px);
   }
 }

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

@@ -6,7 +6,7 @@
   width: var(--nutui-hoverbutton-item-size, 40px);
   height: var(--nutui-hoverbutton-item-size, 40px);
   border-radius: var(--nutui-hoverbutton-item-size, 40px);
-  border: 1px solid var(--nutui-hoverbutton-item-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
+  border: scale-px(1px) solid var(--nutui-hoverbutton-item-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
   background-color: var(--nutui-hoverbutton-item-background, var(--nutui-gray-1, #ffffff));
 }
 .nut-hoverbutton-item-container:active, .nut-hoverbutton-item-container-active {
@@ -25,33 +25,33 @@
 }
 .nut-hoverbutton-item-container-icontext .nut-icon {
   display: block;
-  width: 14px;
-  height: 14px;
-  font-size: 14px;
+  width: scale-px(14px);
+  height: scale-px(14px);
+  font-size: var(--nutui-font-text);
 }
 .nut-hoverbutton-item-icon {
-  width: 20px;
-  height: 20px;
-  margin: 9px;
+  width: scale-px(20px);
+  height: scale-px(20px);
+  margin: scale-px(9px);
   color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7, #1a1a1a));
   fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7, #1a1a1a));
 }
 .nut-hoverbutton-item-icon .nut-icon {
   display: block;
-  width: 20px;
-  height: 20px;
-  font-size: 20px;
+  width: scale-px(20px);
+  height: scale-px(20px);
+  font-size: var(--nutui-font-size-2xl, 20px);
 }
 .nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
   color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-6, #595959));
   fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-6, #595959));
 }
 .nut-hoverbutton-item-text-icon {
-  width: 14px;
-  height: 5px;
+  width: scale-px(14px);
+  height: scale-px(5px);
 }
 .nut-hoverbutton-item-text {
-  font-size: 10px;
-  margin-top: 5px;
-  line-height: 9px;
+  font-size: var(--nutui-font-text-mini);
+  margin-top: scale-px(5px);
+  line-height: scale-px(9px);
 }

package/dist/cjs/packages/image/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 */

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

@@ -11,7 +11,7 @@
   &-index {
     position: fixed;
     z-index: 2002;
-    top: 50px;
+    top: scale-px(50px);
     text-align: center;
     left: 0;
     right: 0;
@@ -20,7 +20,7 @@
 
     .arrow {
       position: absolute;
-      left: 15px;
+      left: scale-px(15px);
       transform: rotateZ(180deg);
     }
   }
@@ -39,17 +39,17 @@
     }
 
     &.top-right {
-      top: 50px;
-      right: 20px;
+      top: scale-px(50px);
+      right: scale-px(20px);
     }
 
     &.top-left {
-      top: 50px;
-      left: 20px;
+      top: scale-px(50px);
+      left: scale-px(20px);
     }
 
     &.bottom {
-      bottom: 50px;
+      bottom: scale-px(50px);
       left: 0;
       right: 0;
       text-align: center;
@@ -98,19 +98,19 @@
   &-index {
     .arrow {
       left: auto;
-      right: 15px;
+      right: scale-px(15px);
       transform: rotateZ(-180deg);
     }
   }
   &-close {
     &.top-right {
       right: auto;
-      left: 20px;
+      left: scale-px(20px);
     }
 
     &.top-left {
       left: auto;
-      right: 20px;
+      right: scale-px(20px);
     }
   }
 }

package/dist/cjs/packages/imagepreview/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 */
@@ -14,7 +24,7 @@
 .nut-imagepreview-index {
   position: fixed;
   z-index: 2002;
-  top: 50px;
+  top: calc(50px * var(--nut-scale-f, 1));
   text-align: center;
   left: 0;
   right: 0;
@@ -23,7 +33,7 @@
 }
 .nut-imagepreview-index .arrow {
   position: absolute;
-  left: 15px;
+  left: calc(15px * var(--nut-scale-f, 1));
   transform: rotateZ(180deg);
 }
 .nut-imagepreview-close {
@@ -39,15 +49,15 @@
   color: #ffffff;
 }
 .nut-imagepreview-close.top-right {
-  top: 50px;
-  right: 20px;
+  top: calc(50px * var(--nut-scale-f, 1));
+  right: calc(20px * var(--nut-scale-f, 1));
 }
 .nut-imagepreview-close.top-left {
-  top: 50px;
-  left: 20px;
+  top: calc(50px * var(--nut-scale-f, 1));
+  left: calc(20px * var(--nut-scale-f, 1));
 }
 .nut-imagepreview-close.bottom {
-  bottom: 50px;
+  bottom: calc(50px * var(--nut-scale-f, 1));
   left: 0;
   right: 0;
   text-align: center;
@@ -87,16 +97,16 @@
 [dir=rtl] .nut-imagepreview-index .arrow,
 .nut-rtl .nut-imagepreview-index .arrow {
   left: auto;
-  right: 15px;
+  right: calc(15px * var(--nut-scale-f, 1));
   transform: rotateZ(-180deg);
 }
 [dir=rtl] .nut-imagepreview-close.top-right,
 .nut-rtl .nut-imagepreview-close.top-right {
   right: auto;
-  left: 20px;
+  left: calc(20px * var(--nut-scale-f, 1));
 }
 [dir=rtl] .nut-imagepreview-close.top-left,
 .nut-rtl .nut-imagepreview-close.top-left {
   left: auto;
-  right: 20px;
+  right: calc(20px * var(--nut-scale-f, 1));
 }

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

@@ -11,7 +11,7 @@
   &-index {
     position: fixed;
     z-index: 2002;
-    top: 50px;
+    top: scale-px(50px);
     text-align: center;
     left: 0;
     right: 0;
@@ -20,7 +20,7 @@
 
     .arrow {
       position: absolute;
-      left: 15px;
+      left: scale-px(15px);
       transform: rotateZ(180deg);
     }
   }
@@ -39,17 +39,17 @@
     }
 
     &.top-right {
-      top: 50px;
-      right: 20px;
+      top: scale-px(50px);
+      right: scale-px(20px);
     }
 
     &.top-left {
-      top: 50px;
-      left: 20px;
+      top: scale-px(50px);
+      left: scale-px(20px);
     }
 
     &.bottom {
-      bottom: 50px;
+      bottom: scale-px(50px);
       left: 0;
       right: 0;
       text-align: center;
@@ -98,19 +98,19 @@
   &-index {
     .arrow {
       left: auto;
-      right: 15px;
+      right: scale-px(15px);
       transform: rotateZ(-180deg);
     }
   }
   &-close {
     &.top-right {
       right: auto;
-      left: 20px;
+      left: scale-px(20px);
     }
 
     &.top-left {
       left: auto;
-      right: 20px;
+      right: scale-px(20px);
     }
   }
 }

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

@@ -14,7 +14,7 @@
 .nut-imagepreview-index {
   position: fixed;
   z-index: 2002;
-  top: 50px;
+  top: scale-px(50px);
   text-align: center;
   left: 0;
   right: 0;
@@ -23,7 +23,7 @@
 }
 .nut-imagepreview-index .arrow {
   position: absolute;
-  left: 15px;
+  left: scale-px(15px);
   transform: rotateZ(180deg);
 }
 .nut-imagepreview-close {
@@ -39,15 +39,15 @@
   color: #ffffff;
 }
 .nut-imagepreview-close.top-right {
-  top: 50px;
-  right: 20px;
+  top: scale-px(50px);
+  right: scale-px(20px);
 }
 .nut-imagepreview-close.top-left {
-  top: 50px;
-  left: 20px;
+  top: scale-px(50px);
+  left: scale-px(20px);
 }
 .nut-imagepreview-close.bottom {
-  bottom: 50px;
+  bottom: scale-px(50px);
   left: 0;
   right: 0;
   text-align: center;
@@ -87,16 +87,16 @@
 [dir=rtl] .nut-imagepreview-index .arrow,
 .nut-rtl .nut-imagepreview-index .arrow {
   left: auto;
-  right: 15px;
+  right: scale-px(15px);
   transform: rotateZ(-180deg);
 }
 [dir=rtl] .nut-imagepreview-close.top-right,
 .nut-rtl .nut-imagepreview-close.top-right {
   right: auto;
-  left: 20px;
+  left: scale-px(20px);
 }
 [dir=rtl] .nut-imagepreview-close.top-left,
 .nut-rtl .nut-imagepreview-close.top-left {
   left: auto;
-  right: 20px;
+  right: scale-px(20px);
 }

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

@@ -11,7 +11,7 @@
   &-index {
     position: fixed;
     z-index: 2002;
-    top: 50px;
+    top: scale-px(50px);
     text-align: center;
     left: 0;
     right: 0;
@@ -20,7 +20,7 @@
 
     .arrow {
       position: absolute;
-      left: 15px;
+      left: scale-px(15px);
       transform: rotateZ(180deg);
     }
   }
@@ -39,17 +39,17 @@
     }
 
     &.top-right {
-      top: 50px;
-      right: 20px;
+      top: scale-px(50px);
+      right: scale-px(20px);
     }
 
     &.top-left {
-      top: 50px;
-      left: 20px;
+      top: scale-px(50px);
+      left: scale-px(20px);
     }
 
     &.bottom {
-      bottom: 50px;
+      bottom: scale-px(50px);
       left: 0;
       right: 0;
       text-align: center;
@@ -98,19 +98,19 @@
   &-index {
     .arrow {
       left: auto;
-      right: 15px;
+      right: scale-px(15px);
       transform: rotateZ(-180deg);
     }
   }
   &-close {
     &.top-right {
       right: auto;
-      left: 20px;
+      left: scale-px(20px);
     }
 
     &.top-left {
       left: auto;
-      right: 20px;
+      right: scale-px(20px);
     }
   }
 }

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

@@ -14,7 +14,7 @@
 .nut-imagepreview-index {
   position: fixed;
   z-index: 2002;
-  top: 50px;
+  top: scale-px(50px);
   text-align: center;
   left: 0;
   right: 0;
@@ -23,7 +23,7 @@
 }
 .nut-imagepreview-index .arrow {
   position: absolute;
-  left: 15px;
+  left: scale-px(15px);
   transform: rotateZ(180deg);
 }
 .nut-imagepreview-close {
@@ -39,15 +39,15 @@
   color: #ffffff;
 }
 .nut-imagepreview-close.top-right {
-  top: 50px;
-  right: 20px;
+  top: scale-px(50px);
+  right: scale-px(20px);
 }
 .nut-imagepreview-close.top-left {
-  top: 50px;
-  left: 20px;
+  top: scale-px(50px);
+  left: scale-px(20px);
 }
 .nut-imagepreview-close.bottom {
-  bottom: 50px;
+  bottom: scale-px(50px);
   left: 0;
   right: 0;
   text-align: center;
@@ -87,16 +87,16 @@
 [dir=rtl] .nut-imagepreview-index .arrow,
 .nut-rtl .nut-imagepreview-index .arrow {
   left: auto;
-  right: 15px;
+  right: scale-px(15px);
   transform: rotateZ(-180deg);
 }
 [dir=rtl] .nut-imagepreview-close.top-right,
 .nut-rtl .nut-imagepreview-close.top-right {
   right: auto;
-  left: 20px;
+  left: scale-px(20px);
 }
 [dir=rtl] .nut-imagepreview-close.top-left,
 .nut-rtl .nut-imagepreview-close.top-left {
   left: auto;
-  right: 20px;
+  right: scale-px(20px);
 }

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

@@ -6,7 +6,7 @@
   align-items: center;
 
   &-fixed-width {
-    width: 21px;
+    width: scale-px(21px);
   }
 
   &-dot,
@@ -21,7 +21,7 @@
     opacity: 0.4;
 
     &-0 {
-      margin-left: 0px;
+      margin-left: 0;
     }
 
     &-active {
@@ -36,11 +36,11 @@
   &-fixed-width {
     // 两个页码的时候
     .nut-indicator-dot {
-      width: 12px;
+      width: scale-px(12px);
       border-radius: $indicator-border-radius;
 
       &-active {
-        width: 6px;
+        width: scale-px(6px);
       }
     }
   }
@@ -49,17 +49,17 @@
     // 竖向固定高度
     &.nut-indicator-fixed-width {
       justify-content: flex-start;
-      height: 21px;
+      height: scale-px(21px);
       width: auto;
 
       // 竖向两个页码
       .nut-indicator-dot {
-        width: 3px;
-        height: 12px;
+        width: scale-px(3px);
+        height: scale-px(12px);
         border-radius: $indicator-border-radius;
 
         &-active {
-          height: 6px;
+          height: scale-px(6px);
         }
       }
 
@@ -67,7 +67,7 @@
         &.nut-indicator-white {
           .nut-indicator-dot {
             &-active {
-              height: 6px;
+              height: scale-px(6px);
             }
           }
         }
@@ -136,7 +136,7 @@
 
 .nut-indicator-track.nut-indicator-white {
   &:after {
-    border: 1px solid rgba(0, 0, 0, 0.06);
+    border: scale-px(1px) solid rgba(0, 0, 0, 0.06);
     background: rgba(255, 255, 255, 0.4);
   }
 }
@@ -149,11 +149,11 @@
 
   .nut-indicator {
     &-dot {
-      margin: 0px;
+      margin: 0;
       margin-top: $indicator-dot-margin;
 
       &-0 {
-        margin-top: 0px;
+        margin-top: 0;
       }
 
       &-active {
@@ -178,7 +178,7 @@
   &-dot {
     &-0 {
       margin-right: $indicator-dot-margin;
-      margin-left: 0px;
+      margin-left: 0;
     }
   }
 }