@nutui/nutui-react 2.0.0-alpha.1 → 2.0.0-alpha.10

package/dist/styles/variables.scss

@@ -401,8 +401,8 @@ $uploader-preview-close-top: var(
 ) !default;
 
 // picker（✅）（todo:react版本picker组件dom元素类名变化较大，picker.scss暂不改动）
-$picker-cancel-color: var(--nutui-picker-cancel-color, #808080) !default;
-$picker-ok-color: var(--nutui-picker-ok-color, $primary-color) !default;
+$picker-bar-cancel-color: var(--nutui-picker-cancel-color, #808080) !default;
+$picker-bar-ok-color: var(--nutui-picker-ok-color, $primary-color) !default;
 $picker-bar-cancel-font-size: var(
   --nutui-picker-bar-cancel-font-size,
   14px
@@ -442,10 +442,6 @@ $picker-item-active-line-border: var(
   --nutui-picker-item-active-line-border,
   1px solid #d8d8d8
 ) !default;
-$picker-columns-item-color: var(
-  --nutui-picker-columns-item-color,
-  $title-color
-) !default;
 $picker-mask-bg-img: var(
   --picker-mask-bg-img,
   linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)),
@@ -454,11 +450,11 @@ $picker-mask-bg-img: var(
 
 //input（✅）
 $input-border-bottom: var(--nutui-input-border-bottom, #eaf0fb) !default;
-$input-disabled-color: var(--nutui-input-disabled-color, #c8c9cc) !default;
-$input-required-color: var(
-  --nutui-input-required-color,
-  $required-color
+$input-border-bottom-width: var(
+  --nutui-input-border-bottom-width,
+  0px
 ) !default;
+$input-disabled-color: var(--nutui-input-disabled-color, #c8c9cc) !default;
 $input-font-size: var(--nutui-input-font-size, $font-size-2) !default;
 $input-padding: var(--nutui-input-padding, 10px 25px) !default;
 
@@ -660,20 +656,16 @@ $numberkeyboard-key-font-color: var(
   --nutui-numberkeyboard-key-font-color,
   #333
 ) !default;
-$numberkeyboard-key-finish-font-size: var(
-  --nutui-numberkeyboard-key-finish-font-size,
+$numberkeyboard-key-confirm-font-size: var(
+  --nutui-numberkeyboard-key-confirm-font-size,
   16px
 ) !default;
-$numberkeyboard-key-finish-font-color: var(
-  --nutui-numberkeyboard-key-finish-font-color,
+$numberkeyboard-key-confirm-font-color: var(
+  --nutui-numberkeyboard-key-confirm-font-color,
   #fff
 ) !default;
-$numberkeyboard-key-finish-background-color: var(
-  --nutui-numberkeyboard-key-finish-background-color,
-  $brand-color
-) !default;
-$numberkeyboard-key-activeFinsh-background-color: var(
-  --nutui-numberkeyboard-key-activeFinsh-background-color,
+$numberkeyboard-key-confirm-background-color: var(
+  --nutui-numberkeyboard-key-confirm-background-color,
   $brand-color
 ) !default;
 
@@ -683,11 +675,17 @@ $countdown-color: var(--nutui-countdown-color, inherit) !default;
 $countdown-font-size: var(--nutui-countdown-font-size, initial) !default;
 
 //large price（✅）
+$price-symbol-padding-right: var(
+  --nutui-price-symbol-padding-right,
+  1px
+) !default;
 $price-symbol-big-size: var(--nutui-price-symbol-big-size, 18px) !default;
 $price-integer-big-size: var(--nutui-price-integer-big-size, 24px) !default;
 $price-decimal-big-size: var(--nutui-price-decimal-big-size, 18px) !default;
 
 //normal price（✅）
+$price-line-color: var(--nutui-price-line-color, $gray2) !default;
+$price-line-font-size: var(--nutui-price-line-font-size, 12px) !default;
 $price-symbol-medium-size: var(--nutui-price-symbol-medium-size, 14px) !default;
 $price-integer-medium-size: var(
   --nutui-price-integer-medium-size,
@@ -713,9 +711,16 @@ $avatar-normal-width: var(--nutui-avatar-normal-width, 40px) !default;
 $avatar-normal-height: var(--nutui-avatar-normal-height, 40px) !default;
 
 //switch（✅）
-$switch-close-bg-color: var(--nutui-switch-close-bg-color, #ebebeb) !default;
-$switch-close--line-bg-color: var(
-  --nutui-switch-close--line-bg-color,
+$switch-inactive-background-color: var(
+  --nutui-switch-close-background-color,
+  #ebebeb
+) !default;
+$switch-active-background-color: var(
+  --nutui-switch-open-background-color,
+  $primary-color
+) !default;
+$switch-close-line-background-color: var(
+  --nutui-switch-close-line-bg-color,
   #f0f0f0
 ) !default;
 $switch-width: var(--nutui-switch-width, 36px) !default;
@@ -811,33 +816,31 @@ $notify-padding: var(--nutui-notify-padding, 12px 0) !default;
 $notify-font-size: var(--nutui-notify-font-size, 14px) !default;
 $notify-height: var(--nutui-notify-height, 44px) !default;
 $notify-line-height: var(--nutui-notify-line-height, auto) !default;
-$notify-base-background-color: linear-gradient(
-  135deg,
-  rgba(250, 44, 25, 1) 0%,
-  rgba(250, 63, 25, 1) 45%,
-  rgba(250, 89, 25, 1) 83%,
-  rgba(250, 100, 25, 1) 100%
+$notify-base-background-color: var(
+  --nutui-notify-base-background-color,
+  linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%)
 ) !default;
-$notify-primary-background-color: linear-gradient(
-  315deg,
-  rgba(73, 143, 242, 1) 0%,
-  rgba(73, 101, 242, 1) 100%
+$notify-primary-background-color: var(
+  --nutui-notify-primary-background-color,
+  linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%)
 ) !default;
-$notify-success-background-color: linear-gradient(
-  135deg,
-  rgba(38, 191, 38, 1) 0%,
-  rgba(39, 197, 48, 1) 45%,
-  rgba(40, 207, 63, 1) 83%,
-  rgba(41, 212, 70, 1) 100%
+$notify-success-background-color: var(
+  --nutui-notify-success-background-color,
+  linear-gradient(
+    135deg,
+    rgba(38, 191, 38, 1) 0%,
+    rgba(39, 197, 48, 1) 45%,
+    rgba(40, 207, 63, 1) 83%,
+    rgba(41, 212, 70, 1) 100%
+  )
 ) !default;
 $notify-danger-background-color: var(
   --nutui-notify-danger-background-color,
   rgba(250, 50, 25, 1)
 ) !default;
-$notify-warning-background-color: linear-gradient(
-  135deg,
-  rgba(255, 93, 13, 1) 0%,
-  rgba(255, 154, 13, 1) 100%
+$notify-warning-background-color: var(
+  --nutui-notify-warning-background-color,
+  linear-gradient(135deg, rgba(255, 93, 13, 1) 0%, rgba(255, 154, 13, 1) 100%)
 ) !default;
 
 // rate（✅）
@@ -851,28 +854,24 @@ $rate-icon-void-color: var(
 // tabbar（✅）
 $tabbar-height: var(--nutui-tabbar-height, 50px) !default;
 $tabbar-active-color: var(--nutui-tabbar-active-color, $primary-color) !default;
-$tabbar-unactive-color: var(
-  --nutui-tabbar-unactive-color,
-  $primary-color
-) !default;
+$tabbar-inactive-color: var(--nutui-tabbar-inactive-color, $gray1) !default;
 $tabbar-border-top: var(--nutui-tabbar-border-top, 1px solid #eee) !default;
 $tabbar-border-bottom: var(
   --nutui-tabbar-border-bottom,
   1px solid #eee
 ) !default;
 $tabbar-box-shadow: var(--nutui-tabbar-box-shadow, none) !default;
-$tabbar-item-text-font-size: var(
-  --nutui-tabbar-item-text-font-size,
+$tabbar-text-font-size: var(
+  --nutui-tabbar-text-font-size,
   $font-size-0
 ) !default;
-$tabbar-item-text-line-height: var(
-  --nutui-tabbar-item-text-line-height,
-  20px
+$tabbar-text-large-font-size: var(
+  --nutui-tabbar-text-large-font-size,
+  $font-size-large
 ) !default;
+$tabbar-text-line-height: var(--nutui-tabbar-text-line-height, 20px) !default;
 $tabbar-height: var(--nutui-tabbar-height, 50px) !default;
-$tabbar-word-margin-top: var(--nutui-tabbar-word-margin-top, 3px) !default;
-$tabbar-dot-right: var(--nutui-tabbar-dot-right, 12px) !default;
-$tabbar-dot-top: var(--nutui-tabbar-dot-top, 0) !default;
+$tabbar-text-margin-top: var(--nutui-tabbar-text-margin-top, 3px) !default;
 
 //infiniteloading（✅）
 $infiniteloading-bottom-color: var(
@@ -881,47 +880,28 @@ $infiniteloading-bottom-color: var(
 ) !default;
 
 //range（✅）
-$range-tip-font-color: var(--nutui-range-tip-font-color, $gray1) !default;
-$range-bg-color: var(--nutui-range-bg-color, rgba(#fa2c19, 0.5)) !default;
-$range-bg-color-tick: var(--nutui-range-bg-color-tick, #fa958c) !default;
-$range-bar-bg-color: linear-gradient(
-  135deg,
-  $primary-color 0%,
-  $primary-color-end 100%
-) !default;
-$range-bar-btn-bg-color: var(
-  --nutui-range-bar-btn-bg-color,
+$range-font-color: var(--nutui-range-font-color, $gray1) !default;
+$range-height: var(--nutui-range-height, 4px) !default;
+$range-margin: var(--nutui-range-margin, 15px) !default;
+$range-inactive-color: var(--nutui-range-inactive-color, #fa958c) !default;
+$range-active-color: var(--nutui-range-active-color, $primary-color) !default;
+$range-button-background: var(
+  --nutui-range-button-background,
   $primary-text-color
 ) !default;
-$range-bar-btn-width: var(--nutui-range-bar-btn-width, 24px) !default;
-$range-bar-btn-height: var(--nutui-range-bar-btn-height, 24px) !default;
-$range-bar-btn-border: var(
-  --nutui-range-bar-btn-border,
+$range-button-width: var(--nutui-range-button-width, 24px) !default;
+$range-button-height: var(--nutui-range-button-height, 24px) !default;
+$range-button-border: var(
+  --nutui-range-button-border,
   1px solid $primary-color
 ) !default;
 
 //swiper（✅）
-$swiper-pagination-bottom: var(--nutui-swiper-pagination-bottom, 12px);
-$swiper-pagination-item-background-color: var(
-  --nutui-swiper-pagination-item-background-color,
+$swiper-indicator-bottom: var(--nutui-swiper-indicator-bottom, 12px);
+$swiper-indicator-item-background-color: var(
+  --nutui-swiper-indicator-item-background-color,
   #ddd
 ) !default;
-$swiper-pagination-item-width: var(
-  --nutui-swiper-pagination-item-width,
-  8px
-) !default;
-$swiper-pagination-item-height: var(
-  --nutui-swiper-pagination-item-height,
-  3px
-) !default;
-$swiper-pagination-item-margin-right: var(
-  --nutui-swiper-pagination-item-margin-right,
-  7px
-) !default;
-$swiper-pagination-item-border-radius: var(
-  --nutui-swiper-pagination-item-border-radius,
-  2px
-) !default;
 
 //address
 $address-region-tab-line: linear-gradient(
@@ -1004,12 +984,12 @@ $steps-base-title-margin-bottom: var(
   --nutui-steps-base-title-margin-bottom,
   10px
 ) !default;
-$steps-base-content-font-size: var(
-  --nutui-steps-base-content-font-size,
+$steps-base-description-font-size: var(
+  --nutui-steps-base-description-font-size,
   12px
 ) !default;
 $steps-base-content-color: var(
-  --nutui-steps-base-content-color,
+  --nutui-steps-base-description-color,
   $title-color2
 ) !default;
 
@@ -1018,17 +998,12 @@ $steps-wait-icon-bg-color: var(
   #959fb1
 ) !default;
 $steps-wait-icon-color: var(--nutui-steps-wait-icon-color, $white) !default;
-$steps-wait-head-color: var(--nutui-steps-wait-head-color, #909ca4) !default;
-$steps-wait-head-border-color: var(
-  --nutui-steps-wait-head-border-color,
-  #909ca4
-) !default;
 $steps-wait-title-color: var(
   --nutui-steps-wait-title-color,
   $title-color2
 ) !default;
 $steps-wait-content-color: var(
-  --nutui-steps-wait-content-color,
+  --nutui-steps-wait-description-color,
   $title-color2
 ) !default;
 
@@ -1040,14 +1015,6 @@ $steps-process-icon-color: var(
   --nutui-steps-process-icon-color,
   $white
 ) !default;
-$steps-process-head-color: var(
-  --nutui-steps-process-head-color,
-  $primary-color
-) !default;
-$steps-process-head-border-color: var(
-  --nutui-steps-process-head-border-color,
-  $primary-color
-) !default;
 $steps-process-title-color: var(
   --nutui-steps-process-title-color,
   $primary-color
@@ -1061,7 +1028,7 @@ $steps-process-title-font-weight: var(
   400
 ) !default;
 $steps-process-content-color: var(
-  --nutui-steps-process-content-color,
+  --nutui-steps-process-description-color,
   $title-color2
 ) !default;
 
@@ -1073,20 +1040,12 @@ $steps-finish-icon-color: var(
   --nutui-steps-finish-icon-color,
   $primary-color
 ) !default;
-$steps-finish-head-color: var(
-  --nutui-steps-finish-head-color,
-  $primary-color
-) !default;
-$steps-finish-head-border-color: var(
-  --nutui-steps-finish-head-border-color,
-  $primary-color
-) !default;
 $steps-finish-title-color: var(
   --nutui-steps-finish-title-color,
   $primary-color
 ) !default;
 $steps-finish-content-color: var(
-  --nutui-steps-finish-content-color,
+  --nutui-steps-finish-description-color,
   $title-color2
 ) !default;
 $steps-finish-line-background: var(
@@ -1100,6 +1059,7 @@ $steps-dot-icon-border: var(
   --nutui-steps-dot-icon-border,
   2px solid $primary-text-color
 ) !default;
+$steps-dot-head-margin: var(--nutui-steps-dot-head-margin, 7px 0 0 0) !default;
 
 // dialog（✅）
 $dialog-width: var(--nutui-dialog-width, 296px) !default;
@@ -1127,9 +1087,16 @@ $dialog-content-line-height: var(
   --nutui-dialog-content-line-height,
   16px
 ) !default;
-$dialog-mask-z-index: var(--nutui-dialog-mask-z-index, $mask-z-index) !default;
-$dialog-mask-background-color: var(
-  --nutui-dialog-mask-background-color,
+$dialog-content-text-align: var(
+  --nutui-dialog-content-text-align,
+  center
+) !default;
+$dialog-overlay-z-index: var(
+  --nutui-dialog-overlay-z-index,
+  $mask-z-index
+) !default;
+$dialog-overlay-background-color: var(
+  --nutui-dialog-overlay-background-color,
   $mask-color
 ) !default;
 $dialog-outer-z-index: var(
@@ -1217,6 +1184,26 @@ $radio-icon-disable-color2: var(
   --nutui-radio-icon-disable-color2,
   $gray3
 ) !default;
+$radiogroup-radio-margin: var(
+  --nutui-radiogroup-radio-margin,
+  0 20px 5px 0
+) !default;
+$radiogroup-radio-label-margin: var(
+  --nutui-radiogroup-radio-label-margin,
+  0 5px 0 5px
+) !default;
+$radio-button-disabled-active-background: var(
+  --nutui-radio-button-disabled-active-background,
+  rgba(0, 0, 0, 0.15)
+) !default;
+$radio-button-disabled-active-color: var(
+  --nutui-radio-button-disabled-active-color,
+  rgba(0, 0, 0, 0.25)
+) !default;
+$radio-button-disabled-active-border-color: var(
+  --nutui-radio-button-disabled-active-border-color,
+  rgba(211, 211, 211, 0.15)
+) !default;
 
 // signature（✅）
 $signature-border-color: #dadada;
@@ -1257,10 +1244,7 @@ $noticebar-right-icon-width: var(
   16px
 ) !default;
 $noticebar-box-padding: var(--nutui-noticebar-box-padding, 0 16px) !default;
-$noticebar-wrapable-padding: var(
-  --nutui-noticebar-wrapable-padding,
-  16px
-) !default;
+$noticebar-wrap-padding: var(--nutui-noticebar-wrapable-padding, 16px) !default;
 $noticebar-lefticon-margin: var(
   --nutui-noticebar-lefticon-margin,
   0px 10px
@@ -1419,26 +1403,19 @@ $badge-background-color: var(
 ) !default;
 $badge-color: var(--nutui-badge-color, #fff) !default;
 $badge-font-size: var(--nutui-badge-font-size, $font-size-1) !default;
-$badge-default-background-color: var(
-  --nutui-badge-default-background-color,
-  rgba(255, 255, 255, 1)
-) !default;
 $badge-border: var(
   --nutui-badge-border,
   0px solid $primary-text-color
 ) !default;
 $badge-border-radius: var(--nutui-badge-border-radius, 14px) !default;
 $badge-padding: var(--nutui-badge-padding, 0 5px) !default;
-$badge-icon-padding: var(--nutui-badge-icon-padding, 2px) !default;
+$badge-icon-padding: var(--nutui-badge-icon-padding, 3px) !default;
 $badge-content-transform: var(
   --nutui-badge-content-transform,
   translateY(-50%) translateX(100%)
 ) !default;
 $badge-z-index: var(--nutui-badge-z-index, 1) !default;
 $badge-dot-width: var(--nutui-badge-dot-width, 7px) !default;
-$badge-dot-height: var(--nutui-badge-dot-height, 7px) !default;
-$badge-dot-border-radius: var(--nutui-badge-dot-border-radius, 7px) !default;
-$badge-dot-padding: var(--nutui-badge-dot-padding, 0px) !default;
 
 //popover（✅）
 $popover-border-radius: var(--nutui-popover-border-radius, 8px) !default;
@@ -1505,108 +1482,36 @@ $popover-menu-name-line-height: var(
   normal
 ) !default;
 
-//progressr（✅）
+//progress（✅）
+$progress-height: var(--nutui-progress-height, 10px) !default;
+$progress-color: var(
+  --nutui-progress-color,
+  linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)
+) !default;
+$progress-background: var(--nutui-progress-background, #f3f3f3) !default;
 $progress-border-radius: var(--nutui-progress-border-radius, 12px) !default;
-$progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default;
-$progress-text-font-size: var(--nutui-progress-text-font-size, 13px) !default;
-$progress-text-color: var(--nutui-progress-text-color, $title-color) !default;
-$progress-text-inner-color: var(
-  --nutui-progress-text-inner-color,
+$progress-text-color: var(
+  --nutui-progress-text-color,
   $primary-text-color
 ) !default;
-$progress-insidetext-position-top: var(
-  --nutui-progress-insidetext-position-top,
-  -4px
+$progress-text-background: var(
+  --nutui-progress-text-background,
+  $progress-color
 ) !default;
-$progress-insidetext-position-bottom: var(
-  --nutui-progress-insidetext-position-bottom,
+$progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default;
+$progress-text-font-size: var(--nutui-progress-text-font-size, 9px) !default;
+$progress-text-position-top: var(
+  --nutui-progress-text-position-top,
   -4px
 ) !default;
-$progress-insidetext-border-radius: var(
-  --nutui-progress-insidetext-border-radius,
-  5px
-) !default;
-$progress-inner-background-color: linear-gradient(
-  135deg,
-  $primary-color 0%,
-  $primary-color-end 100%
-) !default;
-$progress-insidetext-background: var(
-  --nutui-progress-insidetext-background,
-  $progress-inner-background-color
-) !default;
-$progress-outer-background-color: var(
-  --nutui-progress-outer-background-color,
-  #f3f3f3
-) !default;
-$progress-outer-border-radius: var(
-  --nutui-progress-outer-border-radius,
-  12px
+$progress-text-position-bottom: var(
+  --nutui-progress-text-position-bottom,
+  -4px
 ) !default;
-$progress-insidetext-border-radius: var(
-  --nutui-progress-insidetext-border-radius,
+$progress-text-border-radius: var(
+  --nutui-progress-text-border-radius,
   5px
 ) !default;
-$progress-insidetext-padding: var(
-  --nutui-progress-insidetext-padding,
-  3px 5px 3px 6px
-) !default;
-$progress-insidetext-top: var(--nutui-progress-insidetext-top, -42%) !default;
-$progress-small-text-top: var(--nutui-progress-small-text-top, -100%) !default;
-$progress-small-font-size: var(--nutui-progress-small-font-size, 7px) !default;
-$progress-small-padding: var(--nutui-progress-small-padding, 0 4px) !default;
-$progress-small-height: var(--nutui-progress-small-height, 5px) !default;
-$progress-small-text-font-size: var(
-  --nutui-progress-small-text-font-size,
-  7px
-) !default;
-$progress-small-text-line-height: var(
-  --nutui-progress-small-text-line-height,
-  10px
-) !default;
-$progress-small-text-padding: var(
-  --nutui-progress-small-text-padding,
-  2px 4px
-) !default;
-$progress-small-text-top: var(--nutui-progress-small-text-top, -100%) !default;
-$progress-base-font-size: var(--nutui-progress-base-font-size, 9px) !default;
-$progress-base-padding: var(--nutui-progress-base-padding, 0 5px) !default;
-$progress-base-height: var(--nutui-progress-base-height, 10px) !default;
-$progress-base-text-font-size: var(
-  --nutui-progress-base-text-font-size,
-  9px
-) !default;
-$progress-base-text-line-height: var(
-  --nutui-progress-base-text-line-height,
-  13px
-) !default;
-$progress-base-text-padding: var(
-  --nutui-progress-base-text-padding,
-  $progress-insidetext-padding
-) !default;
-$progress-base-text-top: var(
-  --nutui-progress-base-text-top,
-  $progress-insidetext-top
-) !default;
-$progress-large-font-size: var(--nutui-progress-large-font-size, 13px) !default;
-$progress-large-padding: var(--nutui-progress-large-padding, 0 5px) !default;
-$progress-large-height: var(--nutui-progress-large-height, 15px) !default;
-$progress-large-text-font-size: var(
-  --nutui-progress-large-text-font-size,
-  13px
-) !default;
-$progress-large-text-line-height: var(
-  --nutui-progress-large-text-line-height,
-  18px
-) !default;
-$progress-large-text-padding: var(
-  --nutui-progress-large-text-padding,
-  $progress-insidetext-padding
-) !default;
-$progress-large-text-top: var(
-  --nutui-progress-large-text-top,
-  $progress-insidetext-top
-) !default;
 
 //pagination（✅）
 $pagination-color: var(--nutui-pagination-color, $primary-color) !default;
@@ -1655,18 +1560,12 @@ $tabs-titles-background-color: var(
   $background-color
 ) !default;
 $tabs-titles-border-radius: var(--nutui-tabs-titles-border-radius, 0) !default;
-$tabs-titles-item-large-font-size: var(
-  --nutui-tabs-titles-item-large-font-size,
-  $font-size-3
-) !default;
+$nut-tabs-title-gap: var(--nutui-tabs-title-gap, 0) !default;
 $tabs-titles-item-font-size: var(
   --nutui-tabs-titles-item-font-size,
   $font-size-2
 ) !default;
-$tabs-titles-item-small-font-size: var(
-  --nutui-tabs-titles-item-small-font-size,
-  $font-size-1
-) !default;
+
 $tabs-titles-item-color: var(
   --nutui-tabs-titles-item-color,
   $title-color
@@ -2180,22 +2079,14 @@ $navbar-box-shadow: var(
   --nutui-navbar-box-shadow,
   0px 1px 7px 0px rgba(237, 238, 241, 1)
 ) !default;
-$navbar-color: var(--nutui-navbar-color, $gray1) !default;
-$navbar-title-base-font: var(
-  --nutui-navbar-title-base-font,
+$navbar-color: var(--nutui-navbar-color, $gray2) !default;
+$navbar-font-size: var(--nutui-navbar-font-size, $font-size-2) !default;
+$navbar-title-font-size: var(
+  --nutui-navbar-title-font-size,
   $font-size-2
 ) !default;
-$navbar-title-font: var(--nutui-navbar-title-font, $font-size-2) !default;
 $navbar-title-font-weight: var(--nutui-navbar-title-font-weight, 0) !default;
-$navbar-title-font-color: var(
-  --nutui-navbar-title-font-color,
-  $navbar-color
-) !default;
-$navbar-title-width: var(--nutui-navbar-title-width, 100px) !default;
-$navbar-title-icon-margin: var(
-  --nutui-navbar-title-icon-margin,
-  0 0 0 13px
-) !default;
+$navbar-title-font-color: var(--nutui-navbar-title-font-color, $gray1) !default;
 
 // sidenavbar（✅）
 $sidenavbar-content-bg-color: var(
@@ -2313,16 +2204,12 @@ $elevator-list-item-code-line-height: var(
   --nutui-elevator-list-item-code-line-height,
   35px
 ) !default;
-$elevator-list-item-code-after-width: var(
-  --nutui-elevator-list-item-code-after-width,
-  100%
-) !default;
-$elevator-list-item-code-after-height: var(
-  --nutui-elevator-list-item-code-after-height,
+$elevator-list-item-code-border-bottom: var(
+  --nutui-elevator-list-item-code-border-bottom,
   1px
 ) !default;
-$elevator-list-item-code-after-bg-color: var(
-  --nutui-elevator-list-item-code-after-bg-color,
+$elevator-list-item-code-border-bottom-color: var(
+  --nutui-elevator-list-item-code-border-bottom-color,
   #f5f5f5
 ) !default;
 $elevator-list-item-code-current-box-shadow: 0 3px 3px 1px