@nutui/nutui-react-taro 3.0.21-cpp → 3.1.0-beta.2

package/dist/cjs/packages/tabbar/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 */
@@ -19,17 +29,17 @@
   justify-content: center;
   align-items: center;
   background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
-  padding: var(--nutui-badge-icon-padding, 2px);
+  padding: var(--nutui-badge-icon-padding, calc(2px * var(--nut-scale-f, 1)));
   text-align: center;
   z-index: var(--nutui-badge-z-index, 1);
 }
 .nut-badge-icon .nut-icon {
-  width: var(--nutui-badge-icon-size, 10px);
-  height: var(--nutui-badge-icon-size, 10px);
-  font-size: var(--nutui-badge-icon-size, 10px);
+  width: var(--nutui-badge-icon-size, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  height: var(--nutui-badge-icon-size, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  font-size: var(--nutui-badge-icon-size, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-badge-sup, .nut-badge-icon {
-  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, calc(14px * var(--nut-scale-f, 1))));
 }
 .nut-badge-sup::after, .nut-badge-icon::after {
   content: "";
@@ -39,8 +49,8 @@
   left: -50%;
   right: -50%;
   transform: scale(0.5);
-  border: var(--nutui-badge-border, 1px solid #ffffff);
-  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+  border: var(--nutui-badge-border, calc(1px * var(--nut-scale-f, 1)) solid #ffffff);
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, calc(14px * var(--nut-scale-f, 1))));
 }
 .nut-badge-sup {
   /* #ifdef dynamic*/
@@ -50,11 +60,11 @@
   display: inline-flex;
   /* #endif */
   text-align: center;
-  min-width: var(--nutui-badge-min-width, 6px);
-  padding: var(--nutui-badge-padding, 1px 4px);
+  min-width: var(--nutui-badge-min-width, calc(6px * var(--nut-scale-f, 1)));
+  padding: var(--nutui-badge-padding, calc(1px * var(--nut-scale-f, 1)) calc(4px * var(--nut-scale-f, 1)));
   box-sizing: border-box;
   color: var(--nutui-badge-color, #ffffff);
-  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9px));
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, calc(9px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   line-height: 12px;
   white-space: nowrap;
   font-weight: normal;
@@ -69,8 +79,8 @@
   font-family: "JDZH-Regular";
 }
 .nut-badge-one {
-  height: var(--nutui-badge-height, 14px);
-  width: var(--nutui-badge-height, 14px);
+  height: var(--nutui-badge-height, calc(14px * var(--nut-scale-f, 1)));
+  width: var(--nutui-badge-height, calc(14px * var(--nut-scale-f, 1)));
 }
 .nut-badge-content {
   position: absolute;
@@ -81,30 +91,30 @@
   border-radius: 50%;
 }
 .nut-badge-dot::after {
-  border: var(--nutui-badge-dot-border, 1px solid #ffffff);
+  border: var(--nutui-badge-dot-border, calc(1px * var(--nut-scale-f, 1)) solid #ffffff);
   border-radius: 50%;
 }
 .nut-badge-dot-normal {
-  min-width: var(--nutui-badge-dot-width, 6px);
-  width: var(--nutui-badge-dot-width, 6px);
-  height: var(--nutui-badge-dot-width, 6px);
+  min-width: var(--nutui-badge-dot-width, calc(6px * var(--nut-scale-f, 1)));
+  width: var(--nutui-badge-dot-width, calc(6px * var(--nut-scale-f, 1)));
+  height: var(--nutui-badge-dot-width, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-badge-dot-small {
-  min-width: var(--nutui-badge-dot-small-width, 4px);
-  width: var(--nutui-badge-dot-small-width, 4px);
-  height: var(--nutui-badge-dot-small-width, 4px);
+  min-width: var(--nutui-badge-dot-small-width, calc(4px * var(--nut-scale-f, 1)));
+  width: var(--nutui-badge-dot-small-width, calc(4px * var(--nut-scale-f, 1)));
+  height: var(--nutui-badge-dot-small-width, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-badge-dot-large {
-  min-width: var(--nutui-badge-dot-large-width, 8px);
-  width: var(--nutui-badge-dot-large-width, 8px);
-  height: var(--nutui-badge-dot-large-width, 8px);
+  min-width: var(--nutui-badge-dot-large-width, calc(8px * var(--nut-scale-f, 1)));
+  width: var(--nutui-badge-dot-large-width, calc(8px * var(--nut-scale-f, 1)));
+  height: var(--nutui-badge-dot-large-width, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-badge-outline {
   background: #ffffff;
   color: var(--nutui-badge-outline-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-badge-outline::after {
-  border: var(--nutui-badge-outline-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  border: var(--nutui-badge-outline-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-tabbar-item {
@@ -119,7 +129,7 @@
 .nut-tabbar-item .nut-icon {
   width: 24px;
   height: 24px;
-  font-size: 24px;
+  font-size: var(--nutui-font-size-xxl, calc(24px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   /* #ifdef harmony dynamic*/
   color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
   /* #endif*/
@@ -130,9 +140,9 @@
 .nut-tabbar-item-text {
   display: block;
   color: var(--nutui-color-text, #505259);
-  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10px));
-  line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10px));
-  margin-top: var(--nutui-tabbar-text-margin-top, 4px);
+  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  margin-top: var(--nutui-tabbar-text-margin-top, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-tabbar-item .nut-image-default {
   width: 38px;
@@ -144,9 +154,9 @@
   padding: 0;
 }
 .nut-tabbar-item-large .nut-tabbar-item-text {
-  font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 15px));
+  font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   margin-top: 0;
-  line-height: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 15px));
+  line-height: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400));
 }
 .nut-tabbar-item-active {
@@ -163,7 +173,7 @@
 }
 
 .nut-tabbar {
-  border: 0px;
+  border: 0;
   box-shadow: var(--nutui-tabbar-box-shadow, none);
   border-bottom: var(--nutui-tabbar-border-bottom, 0);
   border-top: var(--nutui-tabbar-border-top, 0);
@@ -171,14 +181,14 @@
   background: var(--nutui-color-background-overlay, #ffffff);
 }
 .nut-tabbar-wrap {
-  height: var(--nutui-tabbar-height, 46px);
+  height: var(--nutui-tabbar-height, calc(46px * var(--nut-scale-f, 1)));
   display: flex;
 }
 .nut-tabbar-wrap-3 {
-  padding: 0 16px;
+  padding: 0 calc(16px * var(--nut-scale-f, 1));
 }
 .nut-tabbar-wrap-2 {
-  padding: 0 32px;
+  padding: 0 calc(32px * var(--nut-scale-f, 1));
 }
 .nut-tabbar-wrap-horizontal {
   align-items: center;
@@ -188,20 +198,20 @@
   justify-content: center;
 }
 .nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-icon {
-  width: 20px;
-  height: 20px;
+  width: calc(20px * var(--nut-scale-f, 1));
+  height: calc(20px * var(--nut-scale-f, 1));
 }
 .nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-tabbar-item-text {
-  margin: 0 4px 0 6px;
-  font-size: 14px;
+  margin: 0 calc(4px * var(--nut-scale-f, 1)) 0 calc(6px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-badge-sup::after {
   border: 0;
 }
 .nut-tabbar-fixed {
   position: fixed;
-  bottom: 0px;
-  left: 0px;
+  bottom: 0;
+  left: 0;
 }
 
 [dir=rtl] .nut-tabbar:last-child,
@@ -212,5 +222,5 @@
 [dir=rtl] .nut-tabbar-fixed,
 .nut-rtl .nut-tabbar-fixed {
   left: auto;
-  right: 0px;
+  right: 0;
 }

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

@@ -1,5 +1,5 @@
 .nut-tabbar {
-  border: 0px;
+  border: 0;
   box-shadow: $tabbar-box-shadow;
   border-bottom: $tabbar-border-bottom;
   border-top: $tabbar-border-top;
@@ -11,11 +11,11 @@
     display: flex;
 
     &-3 {
-      padding: 0 16px;
+      padding: 0 scale-px(16px);
     }
 
     &-2 {
-      padding: 0 32px;
+      padding: 0 scale-px(32px);
     }
 
     &-horizontal {
@@ -24,12 +24,12 @@
         flex-direction: row;
         justify-content: center;
         .nut-icon {
-          width: 20px;
-          height: 20px;
+          width: scale-px(20px);
+          height: scale-px(20px);
         }
         .nut-tabbar-item-text {
-          margin: 0 4px 0 6px;
-          font-size: 14px;
+          margin: 0 scale-px(4px) 0 scale-px(6px);
+          font-size: $font-size-base;
         }
         .nut-badge-sup {
           &::after {
@@ -42,8 +42,8 @@
 
   &-fixed {
     position: fixed;
-    bottom: 0px;
-    left: 0px;
+    bottom: 0;
+    left: 0;
   }
 }
 
@@ -56,6 +56,6 @@
 
   &-fixed {
     left: auto;
-    right: 0px;
+    right: 0;
   }
 }

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

@@ -3,7 +3,7 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-tabbar {
-  border: 0px;
+  border: 0;
   box-shadow: var(--nutui-tabbar-box-shadow, none);
   border-bottom: var(--nutui-tabbar-border-bottom, none);
   border-top: var(--nutui-tabbar-border-top, none);
@@ -15,10 +15,10 @@
   display: flex;
 }
 .nut-tabbar-wrap-3 {
-  padding: 0 16px;
+  padding: 0 scale-px(16px);
 }
 .nut-tabbar-wrap-2 {
-  padding: 0 32px;
+  padding: 0 scale-px(32px);
 }
 .nut-tabbar-wrap-horizontal {
   align-items: center;
@@ -28,20 +28,20 @@
   justify-content: center;
 }
 .nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-icon {
-  width: 20px;
-  height: 20px;
+  width: scale-px(20px);
+  height: scale-px(20px);
 }
 .nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-tabbar-item-text {
-  margin: 0 4px 0 6px;
-  font-size: 14px;
+  margin: 0 scale-px(4px) 0 scale-px(6px);
+  font-size: var(--nutui-font-text);
 }
 .nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-badge-sup::after {
   border: 0;
 }
 .nut-tabbar-fixed {
   position: fixed;
-  bottom: 0px;
-  left: 0px;
+  bottom: 0;
+  left: 0;
 }
 
 [dir=rtl] .nut-tabbar:last-child,
@@ -52,5 +52,5 @@
 [dir=rtl] .nut-tabbar-fixed,
 .nut-rtl .nut-tabbar-fixed {
   left: auto;
-  right: 0px;
+  right: 0;
 }

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

@@ -1,5 +1,5 @@
 .nut-tabbar {
-  border: 0px;
+  border: 0;
   box-shadow: $tabbar-box-shadow;
   border-bottom: $tabbar-border-bottom;
   border-top: $tabbar-border-top;
@@ -11,11 +11,11 @@
     display: flex;
 
     &-3 {
-      padding: 0 16px;
+      padding: 0 scale-px(16px);
     }
 
     &-2 {
-      padding: 0 32px;
+      padding: 0 scale-px(32px);
     }
 
     &-horizontal {
@@ -24,12 +24,12 @@
         flex-direction: row;
         justify-content: center;
         .nut-icon {
-          width: 20px;
-          height: 20px;
+          width: scale-px(20px);
+          height: scale-px(20px);
         }
         .nut-tabbar-item-text {
-          margin: 0 4px 0 6px;
-          font-size: 14px;
+          margin: 0 scale-px(4px) 0 scale-px(6px);
+          font-size: $font-size-base;
         }
         .nut-badge-sup {
           &::after {
@@ -42,8 +42,8 @@
 
   &-fixed {
     position: fixed;
-    bottom: 0px;
-    left: 0px;
+    bottom: 0;
+    left: 0;
   }
 }
 
@@ -56,6 +56,6 @@
 
   &-fixed {
     left: auto;
-    right: 0px;
+    right: 0;
   }
 }

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

@@ -3,7 +3,7 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-tabbar {
-  border: 0px;
+  border: 0;
   box-shadow: var(--nutui-tabbar-box-shadow, none);
   border-bottom: var(--nutui-tabbar-border-bottom, none);
   border-top: var(--nutui-tabbar-border-top, none);
@@ -15,10 +15,10 @@
   display: flex;
 }
 .nut-tabbar-wrap-3 {
-  padding: 0 16px;
+  padding: 0 scale-px(16px);
 }
 .nut-tabbar-wrap-2 {
-  padding: 0 32px;
+  padding: 0 scale-px(32px);
 }
 .nut-tabbar-wrap-horizontal {
   align-items: center;
@@ -28,20 +28,20 @@
   justify-content: center;
 }
 .nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-icon {
-  width: 20px;
-  height: 20px;
+  width: scale-px(20px);
+  height: scale-px(20px);
 }
 .nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-tabbar-item-text {
-  margin: 0 4px 0 6px;
-  font-size: 14px;
+  margin: 0 scale-px(4px) 0 scale-px(6px);
+  font-size: var(--nutui-font-text);
 }
 .nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-badge-sup::after {
   border: 0;
 }
 .nut-tabbar-fixed {
   position: fixed;
-  bottom: 0px;
-  left: 0px;
+  bottom: 0;
+  left: 0;
 }
 
 [dir=rtl] .nut-tabbar:last-child,
@@ -52,5 +52,5 @@
 [dir=rtl] .nut-tabbar-fixed,
 .nut-rtl .nut-tabbar-fixed {
   left: auto;
-  right: 0px;
+  right: 0;
 }

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

@@ -1,5 +1,5 @@
 .nut-tabbar {
-  border: 0px;
+  border: 0;
   box-shadow: $tabbar-box-shadow;
   border-bottom: $tabbar-border-bottom;
   border-top: $tabbar-border-top;
@@ -11,11 +11,11 @@
     display: flex;
 
     &-3 {
-      padding: 0 16px;
+      padding: 0 scale-px(16px);
     }
 
     &-2 {
-      padding: 0 32px;
+      padding: 0 scale-px(32px);
     }
 
     &-horizontal {
@@ -24,12 +24,12 @@
         flex-direction: row;
         justify-content: center;
         .nut-icon {
-          width: 20px;
-          height: 20px;
+          width: scale-px(20px);
+          height: scale-px(20px);
         }
         .nut-tabbar-item-text {
-          margin: 0 4px 0 6px;
-          font-size: 14px;
+          margin: 0 scale-px(4px) 0 scale-px(6px);
+          font-size: $font-size-base;
         }
         .nut-badge-sup {
           &::after {
@@ -42,8 +42,8 @@
 
   &-fixed {
     position: fixed;
-    bottom: 0px;
-    left: 0px;
+    bottom: 0;
+    left: 0;
   }
 }
 
@@ -56,6 +56,6 @@
 
   &-fixed {
     left: auto;
-    right: 0px;
+    right: 0;
   }
 }

package/dist/cjs/packages/tabbaritem/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,14 +17,14 @@
   flex-direction: column;
   align-items: center;
   flex: 1;
-  padding: 6px 0 2px;
+  padding: calc(6px * var(--nut-scale-f, 1)) 0 calc(2px * var(--nut-scale-f, 1));
   color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
   height: 100%;
 }
 .nut-tabbar-item .nut-icon {
-  width: 24px;
-  height: 24px;
-  font-size: 24px;
+  width: calc(24px * var(--nut-scale-f, 1));
+  height: calc(24px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-xxl, calc(24px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   /* #ifdef harmony dynamic*/
   color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
   /* #endif*/
@@ -25,23 +35,23 @@
 .nut-tabbar-item-text {
   display: block;
   color: var(--nutui-color-text, #505259);
-  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10px));
-  line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10px));
-  margin-top: var(--nutui-tabbar-text-margin-top, 4px);
+  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, calc(10px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  margin-top: var(--nutui-tabbar-text-margin-top, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-tabbar-item .nut-image-default {
-  width: 38px;
-  height: 38px;
-  border-radius: 38px;
+  width: calc(38px * var(--nut-scale-f, 1));
+  height: calc(38px * var(--nut-scale-f, 1));
+  border-radius: calc(38px * var(--nut-scale-f, 1));
 }
 .nut-tabbar-item-large {
   justify-content: center;
   padding: 0;
 }
 .nut-tabbar-item-large .nut-tabbar-item-text {
-  font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 15px));
+  font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   margin-top: 0;
-  line-height: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 15px));
+  line-height: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400));
 }
 .nut-tabbar-item-active {