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

package/dist/cjs/packages/resultpage/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,24 +26,24 @@
   /* #ifndef dynamic*/
   display: inline-flex;
   /* #endif */
-  margin-bottom: var(--nutui-resultpage-icon-margin-bottom, 12px);
+  margin-bottom: var(--nutui-resultpage-icon-margin-bottom, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-resultpage-icon .nut-icon {
-  height: var(--nutui-resultpage-icon-size, 36px);
-  width: var(--nutui-resultpage-icon-size, 36px);
+  height: var(--nutui-resultpage-icon-size, calc(36px * var(--nut-scale-f, 1)));
+  width: var(--nutui-resultpage-icon-size, calc(36px * var(--nut-scale-f, 1)));
 }
 .nut-resultpage-title {
-  width: var(--nutui-resultpage-width, 240px);
-  margin-bottom: var(--nutui-resultpage-title-margin-bottom, 12px);
-  font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, 18px));
+  width: var(--nutui-resultpage-width, calc(240px * var(--nut-scale-f, 1)));
+  margin-bottom: var(--nutui-resultpage-title-margin-bottom, calc(12px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-resultpage-title-color, var(--nutui-color-title, #1a1a1a));
   font-weight: var(--nutui-font-weight-bold, 600);
   text-align: center;
 }
 .nut-resultpage-description {
-  width: var(--nutui-resultpage-width, 240px);
-  line-height: var(--nutui-resultpage-description-line-height, 20px);
-  font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, 14px));
+  width: var(--nutui-resultpage-width, calc(240px * var(--nut-scale-f, 1)));
+  line-height: var(--nutui-resultpage-description-line-height, calc(20px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-resultpage-description-color, var(--nutui-color-text, #505259));
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -44,12 +54,12 @@
 .nut-resultpage-actions {
   display: flex;
   flex-direction: row;
-  margin-top: var(--nutui-resultpage-actions-margin-top, 16px);
+  margin-top: var(--nutui-resultpage-actions-margin-top, calc(16px * var(--nut-scale-f, 1)));
 }
 .nut-resultpage-actions .nut-button-children {
   white-space: nowrap;
 }
 .nut-resultpage-action {
-  margin-left: 6px;
-  margin-right: 6px;
+  margin-left: calc(6px * var(--nut-scale-f, 1));
+  margin-right: calc(6px * var(--nut-scale-f, 1));
 }

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

@@ -45,7 +45,7 @@
     }
   }
   &-action {
-    margin-left: 6px;
-    margin-right: 6px;
+    margin-left: scale-px(6px);
+    margin-right: scale-px(6px);
   }
 }

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

@@ -50,6 +50,6 @@
   white-space: nowrap;
 }
 .nut-resultpage-action {
-  margin-left: 6px;
-  margin-right: 6px;
+  margin-left: scale-px(6px);
+  margin-right: scale-px(6px);
 }

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

@@ -45,7 +45,7 @@
     }
   }
   &-action {
-    margin-left: 6px;
-    margin-right: 6px;
+    margin-left: scale-px(6px);
+    margin-right: scale-px(6px);
   }
 }

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

@@ -50,6 +50,6 @@
   white-space: nowrap;
 }
 .nut-resultpage-action {
-  margin-left: 6px;
-  margin-right: 6px;
+  margin-left: scale-px(6px);
+  margin-right: scale-px(6px);
 }

package/dist/cjs/packages/row/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/safearea/safearea.js

@@ -9,21 +9,12 @@ Object.defineProperty(exports, "SafeArea", {
     }
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-var _object_spread = require("@swc/helpers/_/_object_spread");
-var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
-var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var classPrefix = 'nut-safe-area';
 var SafeArea = function SafeArea(props) {
-    var className = props.className, style = props.style, position = props.position, rest = (0, _object_without_properties._)(props, [
-        "className",
-        "style",
-        "position"
-    ]);
-    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread_props._)((0, _object_spread._)({}, rest), {
-        className: (0, _classnames.default)(classPrefix, "".concat(classPrefix, "-position-").concat(position), className),
-        style: style
-    }));
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        className: (0, _classnames.default)(classPrefix, "".concat(classPrefix, "-position-").concat(props.position))
+    });
 };
 SafeArea.displayName = 'NutSafeArea';

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

@@ -3,18 +3,12 @@
   width: 100%;
 
   &-position-top {
-    padding-top: calc(
-      constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
-    );
     padding-top: calc(
       env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
     );
   }
 
   &-position-bottom {
-    padding-bottom: calc(
-      constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
-    );
     padding-bottom: calc(
       env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
     );

package/dist/cjs/packages/safearea/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,10 +17,8 @@
   width: 100%;
 }
 .nut-safe-area-position-top {
-  padding-top: calc(constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1));
   padding-top: calc(env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1));
 }
 .nut-safe-area-position-bottom {
-  padding-bottom: calc(constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1));
   padding-bottom: calc(env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1));
 }

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

@@ -3,18 +3,12 @@
   width: 100%;
 
   &-position-top {
-    padding-top: calc(
-      constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
-    );
     padding-top: calc(
       env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
     );
   }
 
   &-position-bottom {
-    padding-bottom: calc(
-      constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
-    );
     padding-bottom: calc(
       env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
     );

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

@@ -7,10 +7,8 @@
   width: 100%;
 }
 .nut-safe-area-position-top {
-  padding-top: calc(constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1));
   padding-top: calc(env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1));
 }
 .nut-safe-area-position-bottom {
-  padding-bottom: calc(constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1));
   padding-bottom: calc(env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1));
 }

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

@@ -3,18 +3,12 @@
   width: 100%;
 
   &-position-top {
-    padding-top: calc(
-      constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
-    );
     padding-top: calc(
       env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)
     );
   }
 
   &-position-bottom {
-    padding-bottom: calc(
-      constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
-    );
     padding-bottom: calc(
       env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)
     );

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

@@ -7,10 +7,8 @@
   width: 100%;
 }
 .nut-safe-area-position-top {
-  padding-top: calc(constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1));
   padding-top: calc(env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1));
 }
 .nut-safe-area-position-bottom {
-  padding-bottom: calc(constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1));
   padding-bottom: calc(env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1));
 }

package/dist/cjs/packages/searchbar/searchbar.js

@@ -140,6 +140,7 @@ var SearchBar = function SearchBar(props) {
     var renderField = function renderField() {
         var inputCls = (0, _classnames.default)("".concat(classPrefix, "-input"));
         return /*#__PURE__*/ _react.default.createElement("input", (0, _object_spread._)({
+            type: "search",
             className: inputCls,
             ref: searchInputRef,
             value: value || '',
@@ -176,7 +177,8 @@ var SearchBar = function SearchBar(props) {
         }));
     }, [
         value,
-        onItemClick
+        onItemClick,
+        forceFocus
     ]);
     var renderLeftIn = (0, _react.useCallback)(function() {
         if (!leftIn) return null;
@@ -217,8 +219,7 @@ var SearchBar = function SearchBar(props) {
         if (!value || !clearable) return null;
         return /*#__PURE__*/ _react.default.createElement("div", {
             className: "".concat(classPrefix, "-clear ").concat(classPrefix, "-icon"),
-            onClick: clearaVal,
-            "aria-label": "清除"
+            onClick: clearaVal
         }, /*#__PURE__*/ _react.default.createElement(_iconsreact.MaskClose, null));
     }, [
         value,

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

@@ -25,7 +25,7 @@
     height: $searchbar-input-height;
     background: $searchbar-content-background;
     border-radius: $searchbar-content-border-radius;
-    border: 1px solid $color-primary;
+    border: scale-px(1px) solid $color-primary;
   }
 
   &-icon {
@@ -40,7 +40,7 @@
   }
 
   &-rightin {
-    font-size: 15px;
+    font-size: $font-size-l;
     font-weight: 500;
     color: $color-primary;
 
@@ -74,8 +74,8 @@
     &.nut-searchbar-icon {
       position: relative;
       .nut-icon {
-        width: 12px;
-        height: 12px;
+        width: $icon-size-12;
+        height: $icon-size-12;
         color: var(--nutui-black-5);
         margin-right: $searchbar-inner-gap;
       }
@@ -95,27 +95,27 @@
     flex-direction: row;
     z-index: 2;
     background-color: #fff;
-    top: 9px;
-    left: 6px;
-    font-size: 12px;
-    line-height: 12px;
+    top: scale-px(9px);
+    left: scale-px(6px);
+    font-size: $font-size-s;
+    line-height: scale-px(12px);
 
     .nut-searchbar-value {
       display: flex;
       flex-direction: row;
       align-items: center;
-      padding: 4px 8px;
+      padding: scale-px(4px) scale-px(8px);
       background-color: #f7f8fc;
-      border-radius: 4px;
-      margin-right: 2px;
+      border-radius: scale-px(4px);
+      margin-right: scale-px(2px);
     }
 
     .nut-icon {
-      width: 6px;
-      height: 6px;
-      font-size: 6px;
+      width: $icon-size-6;
+      height: $icon-size-6;
+      font-size: $icon-size-6;
       color: #c2c4cc;
-      margin-left: 4px;
+      margin-left: scale-px(4px);
     }
   }
 
@@ -130,8 +130,8 @@
     align-items: center;
 
     &.nut-icon {
-      width: 20px;
-      height: 20px;
+      width: scale-px(20px);
+      height: scale-px(20px);
     }
   }
 
@@ -193,10 +193,10 @@
   }
 
   &-focus {
-    padding: 5px $searchbar-gap;
+    padding: scale-px(5px) $searchbar-gap;
 
     .nut-searchbar-content {
-      border: 0.5px solid #ff5c67;
+      border: scale-px(0.5px) solid #ff5c67;
     }
   }
 }

package/dist/cjs/packages/searchbar/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 */
@@ -6,17 +16,17 @@
   display: flex;
   align-items: center;
   width: var(--nutui-searchbar-width, 100%);
-  padding: var(--nutui-searchbar-padding, 1px 8px);
+  padding: var(--nutui-searchbar-padding, calc(1px * var(--nut-scale-f, 1)) calc(8px * var(--nut-scale-f, 1)));
   background: var(--nutui-searchbar-background, var(--nutui-color-background-sunken, #f7f8fc));
   color: var(--nutui-searchbar-color, var(--nutui-color-title, #1a1a1a));
-  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   box-sizing: border-box;
   justify-content: center;
 }
 .nut-searchbar .nut-icon {
-  width: var(--nutui-searchbar-icon-size, 20px);
-  height: var(--nutui-searchbar-icon-size, 20px);
-  font-size: var(--nutui-searchbar-icon-size, 20px);
+  width: var(--nutui-searchbar-icon-size, calc(20px * var(--nut-scale-f, 1)));
+  height: var(--nutui-searchbar-icon-size, calc(20px * var(--nut-scale-f, 1)));
+  font-size: var(--nutui-searchbar-icon-size, calc(20px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-content {
   position: relative;
@@ -24,11 +34,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 var(--nutui-searchbar-gap, 12px);
-  height: var(--nutui-searchbar-input-height, 38px);
+  padding: 0 var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
+  height: var(--nutui-searchbar-input-height, calc(38px * var(--nut-scale-f, 1)));
   background: var(--nutui-searchbar-content-background, var(--nutui-color-background-overlay, #ffffff));
-  border-radius: var(--nutui-searchbar-content-border-radius, 8px);
-  border: 1px solid var(--nutui-color-primary, #ff0f23);
+  border-radius: var(--nutui-searchbar-content-border-radius, calc(8px * var(--nut-scale-f, 1)));
+  border: calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary, #ff0f23);
 }
 .nut-searchbar-icon {
   display: flex;
@@ -37,10 +47,10 @@
   color: var(--nutui-color-primary, #ff0f23);
 }
 .nut-searchbar-leftin {
-  margin-right: var(--nutui-searchbar-inner-gap, 8px);
+  margin-right: var(--nutui-searchbar-inner-gap, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-rightin {
-  font-size: 15px;
+  font-size: var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1))));
   font-weight: 500;
   color: var(--nutui-color-primary, #ff0f23);
 }
@@ -59,7 +69,7 @@
   width: 100%;
   padding: 0;
   margin: 0;
-  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a));
   caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-primary, #ff0f23));
   background: transparent;
@@ -69,10 +79,10 @@
   position: relative;
 }
 .nut-searchbar-clear.nut-searchbar-icon .nut-icon {
-  width: 12px;
-  height: 12px;
+  width: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+  height: var(--nutui-icon-size-12, calc(12px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
   color: var(--nutui-black-5);
-  margin-right: var(--nutui-searchbar-inner-gap, 8px);
+  margin-right: var(--nutui-searchbar-inner-gap, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-clear.nut-searchbar-icon::after {
   content: "";
@@ -87,26 +97,26 @@
   flex-direction: row;
   z-index: 2;
   background-color: #fff;
-  top: 9px;
-  left: 6px;
-  font-size: 12px;
-  line-height: 12px;
+  top: calc(9px * var(--nut-scale-f, 1));
+  left: calc(6px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1))));
+  line-height: calc(12px * var(--nut-scale-f, 1));
 }
 .nut-searchbar-values .nut-searchbar-value {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 4px 8px;
+  padding: calc(4px * var(--nut-scale-f, 1)) calc(8px * var(--nut-scale-f, 1));
   background-color: #f7f8fc;
-  border-radius: 4px;
-  margin-right: 2px;
+  border-radius: calc(4px * var(--nut-scale-f, 1));
+  margin-right: calc(2px * var(--nut-scale-f, 1));
 }
 .nut-searchbar-values .nut-icon {
-  width: 6px;
-  height: 6px;
-  font-size: 6px;
+  width: var(--nutui-icon-size-6, calc(6px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+  height: var(--nutui-icon-size-6, calc(6px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
+  font-size: var(--nutui-icon-size-6, calc(6px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
   color: #c2c4cc;
-  margin-left: 4px;
+  margin-left: calc(4px * var(--nut-scale-f, 1));
 }
 .nut-searchbar-left, .nut-searchbar-right {
   /* #ifdef dynamic*/
@@ -118,67 +128,67 @@
   align-items: center;
 }
 .nut-searchbar-left.nut-icon, .nut-searchbar-right.nut-icon {
-  width: 20px;
-  height: 20px;
+  width: calc(20px * var(--nut-scale-f, 1));
+  height: calc(20px * var(--nut-scale-f, 1));
 }
 .nut-searchbar-left {
-  margin-right: var(--nutui-searchbar-gap, 12px);
+  margin-right: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-left > div, .nut-searchbar-left > span, .nut-searchbar-left > i, .nut-searchbar-left > svg,
 .nut-searchbar-left .nut-icon {
-  margin-right: var(--nutui-searchbar-gap, 12px);
+  margin-right: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > i:last-child, .nut-searchbar-left > svg:last-child,
 .nut-searchbar-left .nut-icon:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right {
-  margin-left: var(--nutui-searchbar-gap, 12px);
+  margin-left: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-right > div, .nut-searchbar-right > span, .nut-searchbar-right > i, .nut-searchbar-right > svg,
 .nut-searchbar-right .nut-icon {
-  margin-left: var(--nutui-searchbar-gap, 12px);
+  margin-left: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > i:first-child, .nut-searchbar-right > svg:first-child,
 .nut-searchbar-right .nut-icon:first-child {
   margin-left: 0;
 }
 .nut-searchbar-left > text, .nut-searchbar-left > view {
-  margin-right: var(--nutui-searchbar-gap, 12px);
+  margin-right: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-left > text:last-child, .nut-searchbar-left > view:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right > text, .nut-searchbar-right > view {
-  margin-left: var(--nutui-searchbar-gap, 12px);
+  margin-left: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
   margin-left: 0;
 }
 .nut-searchbar-round {
-  border-radius: var(--nutui-searchbar-content-round-border-radius, 19px);
+  border-radius: var(--nutui-searchbar-content-round-border-radius, calc(19px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-disabled {
   cursor: not-allowed;
 }
 .nut-searchbar-focus {
-  padding: 5px var(--nutui-searchbar-gap, 12px);
+  padding: calc(5px * var(--nut-scale-f, 1)) var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 .nut-searchbar-focus .nut-searchbar-content {
-  border: 0.5px solid #ff5c67;
+  border: calc(0.5px * var(--nut-scale-f, 1)) solid #ff5c67;
 }
 
 [dir=rtl] .nut-searchbar-left,
 .nut-rtl .nut-searchbar-left {
   margin-right: 0;
-  margin-left: var(--nutui-searchbar-gap, 12px);
+  margin-left: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-searchbar-left > div, [dir=rtl] .nut-searchbar-left > span, [dir=rtl] .nut-searchbar-left > svg,
 .nut-rtl .nut-searchbar-left > div,
 .nut-rtl .nut-searchbar-left > span,
 .nut-rtl .nut-searchbar-left > svg {
   margin-right: 0;
-  margin-left: var(--nutui-searchbar-gap, 12px);
+  margin-left: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-searchbar-left > div.nut-icon, [dir=rtl] .nut-searchbar-left > span.nut-icon, [dir=rtl] .nut-searchbar-left > svg.nut-icon,
 .nut-rtl .nut-searchbar-left > div.nut-icon,
@@ -196,14 +206,14 @@
 [dir=rtl] .nut-searchbar-right,
 .nut-rtl .nut-searchbar-right {
   margin-left: 0;
-  margin-right: var(--nutui-searchbar-gap, 12px);
+  margin-right: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-searchbar-right > div, [dir=rtl] .nut-searchbar-right > span, [dir=rtl] .nut-searchbar-right > svg,
 .nut-rtl .nut-searchbar-right > div,
 .nut-rtl .nut-searchbar-right > span,
 .nut-rtl .nut-searchbar-right > svg {
   margin-left: 0;
-  margin-right: var(--nutui-searchbar-gap, 12px);
+  margin-right: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-searchbar-right > div:first-child, [dir=rtl] .nut-searchbar-right > span:first-child, [dir=rtl] .nut-searchbar-right > svg:first-child,
 .nut-rtl .nut-searchbar-right > div:first-child,
@@ -216,7 +226,7 @@
 .nut-rtl .nut-searchbar-left > text,
 .nut-rtl .nut-searchbar-left > view {
   margin-right: 0;
-  margin-left: var(--nutui-searchbar-gap, 12px);
+  margin-left: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-searchbar-left > text:last-child, [dir=rtl] .nut-searchbar-left > view:last-child,
 .nut-rtl .nut-searchbar-left > text:last-child,
@@ -228,7 +238,7 @@
 .nut-rtl .nut-searchbar-right > text,
 .nut-rtl .nut-searchbar-right > view {
   margin-left: 0;
-  margin-right: var(--nutui-searchbar-gap, 12px);
+  margin-right: var(--nutui-searchbar-gap, calc(12px * var(--nut-scale-f, 1)));
 }
 [dir=rtl] .nut-searchbar-right > text:first-child, [dir=rtl] .nut-searchbar-right > view:first-child,
 .nut-rtl .nut-searchbar-right > text:first-child,