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

package/dist/es/packages/ellipsis/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 */
@@ -16,7 +26,7 @@
 
 .nut-ellipsis-copy {
   position: absolute;
-  top: -999999px;
+  top: calc(-999999px * var(--nut-scale-f, 1));
 }
 
 .nut-ellipsis-width {

package/dist/es/packages/ellipsis/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 */
@@ -16,7 +26,7 @@
 
 .nut-ellipsis-copy {
   position: absolute;
-  top: -999999px;
+  top: calc(-999999px * var(--nut-scale-f, 1));
 }
 
 .nut-ellipsis-width {

package/dist/es/packages/ellipsis/style-jmapp/ellipsis.scss

@@ -14,7 +14,7 @@
 
 .nut-ellipsis-copy {
   position: absolute;
-  top: -999999px;
+  top: scale-px(-999999px);
 }
 
 .nut-ellipsis-width {

package/dist/es/packages/ellipsis/style-jmapp/style.css

@@ -16,7 +16,7 @@
 
 .nut-ellipsis-copy {
   position: absolute;
-  top: -999999px;
+  top: scale-px(-999999px);
 }
 
 .nut-ellipsis-width {

package/dist/es/packages/ellipsis/style-jrkf/ellipsis.scss

@@ -14,7 +14,7 @@
 
 .nut-ellipsis-copy {
   position: absolute;
-  top: -999999px;
+  top: scale-px(-999999px);
 }
 
 .nut-ellipsis-width {

package/dist/es/packages/ellipsis/style-jrkf/style.css

@@ -16,7 +16,7 @@
 
 .nut-ellipsis-copy {
   position: absolute;
-  top: -999999px;
+  top: scale-px(-999999px);
 }
 
 .nut-ellipsis-width {

package/dist/es/packages/empty/style/empty.scss

@@ -47,16 +47,16 @@
   &-actions-base {
     display: flex;
     flex-direction: row;
-    margin-top: 24px;
+    margin-top: scale-px(24px);
   }
   &-actions-small {
     display: flex;
     flex-direction: row;
-    margin-top: 16px;
+    margin-top: scale-px(16px);
   }
 
   &-action {
-    margin-right: 6px;
-    margin-left: 6px;
+    margin-right: scale-px(6px);
+    margin-left: scale-px(6px);
   }
 }

package/dist/es/packages/empty/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 */
@@ -9,12 +19,12 @@
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  padding: var(--nutui-empty-padding, 32px 40px);
+  padding: var(--nutui-empty-padding, calc(32px * var(--nut-scale-f, 1)) calc(40px * var(--nut-scale-f, 1)));
   background-color: var(--nutui-empty-background-color, var(--nutui-color-background-overlay, #ffffff));
 }
 .nut-empty-base {
-  width: var(--nutui-empty-image-size, 160px);
-  height: var(--nutui-empty-image-size, 160px);
+  width: var(--nutui-empty-image-size, calc(160px * var(--nut-scale-f, 1)));
+  height: var(--nutui-empty-image-size, calc(160px * var(--nut-scale-f, 1)));
 }
 .nut-empty-base img,
 .nut-empty-base image {
@@ -22,8 +32,8 @@
   height: 100%;
 }
 .nut-empty-small {
-  width: var(--nutui-empty-image-small-size, 120px);
-  height: var(--nutui-empty-image-small-size, 120px);
+  width: var(--nutui-empty-image-small-size, calc(120px * var(--nut-scale-f, 1)));
+  height: var(--nutui-empty-image-small-size, calc(120px * var(--nut-scale-f, 1)));
 }
 .nut-empty-small img,
 .nut-empty-small image {
@@ -33,27 +43,27 @@
 .nut-empty-title {
   margin-top: var(--nutui-empty-title-margin-top, 0px);
   font-weight: var(--nutui-font-weight-bold, 600);
-  margin-bottom: var(--nutui-empty-title-margin-bottom, 12px);
+  margin-bottom: var(--nutui-empty-title-margin-bottom, calc(12px * var(--nut-scale-f, 1)));
   color: var(--nutui-color-title, #1a1a1a);
-  font-size: var(--nutui-font-size-l, 15px);
-  line-height: var(--nutui-empty-title-line-height, var(--nutui-font-size-l, 15px));
+  font-size: var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: var(--nutui-empty-title-line-height, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-empty-description {
   color: var(--nutui-color-text, #505259);
-  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))));
   line-height: var(--nutui-empty-description-line-height, 1);
 }
 .nut-empty-actions-base {
   display: flex;
   flex-direction: row;
-  margin-top: 24px;
+  margin-top: calc(24px * var(--nut-scale-f, 1));
 }
 .nut-empty-actions-small {
   display: flex;
   flex-direction: row;
-  margin-top: 16px;
+  margin-top: calc(16px * var(--nut-scale-f, 1));
 }
 .nut-empty-action {
-  margin-right: 6px;
-  margin-left: 6px;
+  margin-right: calc(6px * var(--nut-scale-f, 1));
+  margin-left: calc(6px * var(--nut-scale-f, 1));
 }

package/dist/es/packages/empty/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,8 +29,8 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  height: var(--nutui-button-default-height, 32px);
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  height: var(--nutui-button-default-height, calc(32px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   font-weight: var(--nutui-font-weight, 400);
   text-align: center;
   cursor: pointer;
@@ -31,13 +41,13 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
   background: var(--nutui-button-default-background-color, transparent);
-  border-width: var(--nutui-button-border-width, 0.5px);
+  border-width: var(--nutui-button-border-width, calc(0.5px * var(--nut-scale-f, 1)));
 }
 .nut-button-text {
-  margin-left: var(--nutui-button-text-icon-margin, 4px);
+  margin-left: var(--nutui-button-text-icon-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-button-text-right {
-  margin-right: var(--nutui-button-text-icon-margin, 4px);
+  margin-right: var(--nutui-button-text-icon-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-button-children {
   display: flex;
@@ -60,6 +70,9 @@
   /* #ifdef dynamic*/
   pointer-events: none;
   /* #endif */
+  /* #ifndef dynamic*/
+  pointer-events: auto;
+  /* #endif */
 }
 .nut-button::after {
   border: none;
@@ -79,9 +92,9 @@
   /* #endif */
 }
 .nut-button-wrap .nut-icon {
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
-  width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
-  height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-loading::before, .nut-button-disabled::before {
   display: none;
@@ -91,14 +104,14 @@
   color: #ffffff;
 }
 .nut-button.nut-button-icononly {
-  width: var(--nutui-button-default-height, 32px);
+  width: var(--nutui-button-default-height, calc(32px * var(--nut-scale-f, 1)));
   padding: 0;
 }
 .nut-button-round {
-  border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, 6px));
+  border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, calc(6px * var(--nut-scale-f, 1))));
 }
 .nut-button-default {
-  padding: var(--nutui-button-default-padding, 0px 12px);
+  padding: var(--nutui-button-default-padding, 0px calc(12px * var(--nut-scale-f, 1)));
   border-style: solid;
   border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
@@ -116,75 +129,75 @@
   border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-button-normal {
-  padding: var(--nutui-button-normal-padding, 0px 12px);
+  padding: var(--nutui-button-normal-padding, 0px calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-button-xlarge {
-  height: var(--nutui-button-xlarge-height, 48px);
-  padding: var(--nutui-button-xlarge-padding, 0px 24px);
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
-  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
+  height: var(--nutui-button-xlarge-height, calc(48px * var(--nut-scale-f, 1)));
+  padding: var(--nutui-button-xlarge-padding, 0px calc(24px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
 }
 .nut-button-xlarge .nut-button-text {
-  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-button-xlarge .nut-button-text-right {
-  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-button-xlarge .nut-icon {
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
-  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
-  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-xlarge-children {
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-large {
-  height: var(--nutui-button-large-height, 40px);
-  padding: var(--nutui-button-large-padding, 0px 16px);
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15px));
-  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
+  height: var(--nutui-button-large-height, calc(40px * var(--nut-scale-f, 1)));
+  padding: var(--nutui-button-large-padding, 0px calc(16px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
 }
 .nut-button-large .nut-button-text {
-  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-button-large .nut-button-text-right {
-  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
 }
 .nut-button-large .nut-icon {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15px));
-  width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15px));
-  height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-large-children {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-small {
-  height: var(--nutui-button-small-height, 28px);
-  padding: var(--nutui-button-small-padding, 0px 8px);
-  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
-  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
+  height: var(--nutui-button-small-height, calc(28px * var(--nut-scale-f, 1)));
+  padding: var(--nutui-button-small-padding, 0px calc(8px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, calc(6px * var(--nut-scale-f, 1))));
 }
 .nut-button-small .nut-icon {
-  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
-  width: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
-  height: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  width: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  height: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-small-children {
-  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-mini {
-  height: var(--nutui-button-mini-height, 24px);
-  padding: var(--nutui-button-mini-padding, 0px 8px);
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
-  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
+  height: var(--nutui-button-mini-height, calc(24px * var(--nut-scale-f, 1)));
+  padding: var(--nutui-button-mini-padding, 0px calc(8px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
 }
 .nut-button-mini .nut-icon {
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
-  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
-  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-mini-children {
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-primary {
   color: var(--nutui-button-primary-color, #ffffff);
@@ -369,11 +382,11 @@
 [dir=rtl] .nut-button-text,
 .nut-rtl .nut-button-text {
   margin-left: 0;
-  margin-right: var(--nutui-button-text-icon-margin, 4px);
+  margin-right: var(--nutui-button-text-icon-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-button-text.right,
 .nut-rtl .nut-button-text.right {
-  margin-left: var(--nutui-button-text-icon-margin, 4px);
+  margin-left: var(--nutui-button-text-icon-margin, calc(4px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-button::before,
 .nut-rtl .nut-button::before {
@@ -389,12 +402,12 @@
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  padding: var(--nutui-empty-padding, 32px 40px);
+  padding: var(--nutui-empty-padding, calc(32px * var(--nut-scale-f, 1)) calc(40px * var(--nut-scale-f, 1)));
   background-color: var(--nutui-empty-background-color, var(--nutui-color-background-overlay, #ffffff));
 }
 .nut-empty-base {
-  width: var(--nutui-empty-image-size, 160px);
-  height: var(--nutui-empty-image-size, 160px);
+  width: var(--nutui-empty-image-size, calc(160px * var(--nut-scale-f, 1)));
+  height: var(--nutui-empty-image-size, calc(160px * var(--nut-scale-f, 1)));
 }
 .nut-empty-base img,
 .nut-empty-base image {
@@ -402,8 +415,8 @@
   height: 100%;
 }
 .nut-empty-small {
-  width: var(--nutui-empty-image-small-size, 120px);
-  height: var(--nutui-empty-image-small-size, 120px);
+  width: var(--nutui-empty-image-small-size, calc(120px * var(--nut-scale-f, 1)));
+  height: var(--nutui-empty-image-small-size, calc(120px * var(--nut-scale-f, 1)));
 }
 .nut-empty-small img,
 .nut-empty-small image {
@@ -413,27 +426,27 @@
 .nut-empty-title {
   margin-top: var(--nutui-empty-title-margin-top, 0px);
   font-weight: var(--nutui-font-weight-bold, 600);
-  margin-bottom: var(--nutui-empty-title-margin-bottom, 12px);
+  margin-bottom: var(--nutui-empty-title-margin-bottom, calc(12px * var(--nut-scale-f, 1)));
   color: var(--nutui-color-title, #1a1a1a);
-  font-size: var(--nutui-font-size-l, 15px);
-  line-height: var(--nutui-empty-title-line-height, var(--nutui-font-size-l, 15px));
+  font-size: var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: var(--nutui-empty-title-line-height, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-empty-description {
   color: var(--nutui-color-text, #505259);
-  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))));
   line-height: var(--nutui-empty-description-line-height, 1);
 }
 .nut-empty-actions-base {
   display: flex;
   flex-direction: row;
-  margin-top: 24px;
+  margin-top: calc(24px * var(--nut-scale-f, 1));
 }
 .nut-empty-actions-small {
   display: flex;
   flex-direction: row;
-  margin-top: 16px;
+  margin-top: calc(16px * var(--nut-scale-f, 1));
 }
 .nut-empty-action {
-  margin-right: 6px;
-  margin-left: 6px;
+  margin-right: calc(6px * var(--nut-scale-f, 1));
+  margin-left: calc(6px * var(--nut-scale-f, 1));
 }

package/dist/es/packages/empty/style-jmapp/empty.scss

@@ -47,16 +47,16 @@
   &-actions-base {
     display: flex;
     flex-direction: row;
-    margin-top: 24px;
+    margin-top: scale-px(24px);
   }
   &-actions-small {
     display: flex;
     flex-direction: row;
-    margin-top: 16px;
+    margin-top: scale-px(16px);
   }
 
   &-action {
-    margin-right: 6px;
-    margin-left: 6px;
+    margin-right: scale-px(6px);
+    margin-left: scale-px(6px);
   }
 }

package/dist/es/packages/empty/style-jmapp/style.css

@@ -46,14 +46,14 @@
 .nut-empty-actions-base {
   display: flex;
   flex-direction: row;
-  margin-top: 24px;
+  margin-top: scale-px(24px);
 }
 .nut-empty-actions-small {
   display: flex;
   flex-direction: row;
-  margin-top: 16px;
+  margin-top: scale-px(16px);
 }
 .nut-empty-action {
-  margin-right: 6px;
-  margin-left: 6px;
+  margin-right: scale-px(6px);
+  margin-left: scale-px(6px);
 }

package/dist/es/packages/empty/style-jrkf/empty.scss

@@ -47,16 +47,16 @@
   &-actions-base {
     display: flex;
     flex-direction: row;
-    margin-top: 24px;
+    margin-top: scale-px(24px);
   }
   &-actions-small {
     display: flex;
     flex-direction: row;
-    margin-top: 16px;
+    margin-top: scale-px(16px);
   }
 
   &-action {
-    margin-right: 6px;
-    margin-left: 6px;
+    margin-right: scale-px(6px);
+    margin-left: scale-px(6px);
   }
 }

package/dist/es/packages/empty/style-jrkf/style.css

@@ -46,14 +46,14 @@
 .nut-empty-actions-base {
   display: flex;
   flex-direction: row;
-  margin-top: 24px;
+  margin-top: scale-px(24px);
 }
 .nut-empty-actions-small {
   display: flex;
   flex-direction: row;
-  margin-top: 16px;
+  margin-top: scale-px(16px);
 }
 .nut-empty-action {
-  margin-right: 6px;
-  margin-left: 6px;
+  margin-right: scale-px(6px);
+  margin-left: scale-px(6px);
 }