@nutui/nutui 3.1.16 → 3.1.18-beta.0

package/dist/packages/input/index.scss

@@ -20,11 +20,13 @@
     }
   }
 
-  .input-text {
-    width: 230px;
+  .input-text,
+  &__text--readonly {
+    width: 90%;
     flex: 1;
     padding: 0 10px;
     padding-right: 35px;
+    text-align: left;
     outline: 0 none;
     border: 0;
     text-decoration: none;

package/dist/packages/navbar/index.scss

@@ -41,6 +41,8 @@
     min-width: 53%;
     margin: 0 auto;
     text-align: center;
+    display: flex;
+    justify-content: center;
     &.icon {
       .icon {
         margin-left: 13px;

package/dist/packages/noticebar/index.scss

@@ -1,13 +1,15 @@
 .nut-noticebar-page {
-  width: 100%;
+  // width: 100%;
   display: flex;
+  padding: 0px $noticebar-box-padding-right 0 $noticebar-box-padding-left;
   height: $noticebar-height;
   font-size: $noticebar-font-size;
   position: relative;
   align-items: center;
   &.wrapable {
     height: auto;
-    padding: 8px 16px;
+    padding: $noticebar-wrapable-padding-bottom $noticebar-wrapable-padding-right $noticebar-wrapable-padding-bottom
+      $noticebar-wrapable-padding-left;
     .wrap {
       height: auto;
       .content {
@@ -25,7 +27,8 @@
   .left-icon {
     height: $noticebar-left-icon-width;
     min-width: $noticebar-left-icon-width;
-    margin: 0 5px 0 10px;
+    margin: $noticebar-lefticon-padding-top $noticebar-lefticon-padding-right $noticebar-lefticon-padding-bottom
+      $noticebar-lefticon-padding-left;
     background-size: 100% 100%;
   }
   .right-icon {
@@ -33,9 +36,11 @@
     align-items: center;
     justify-content: center;
     width: $noticebar-right-icon-width;
-    margin: 0 10px 0 5px;
+    margin: $noticebar-righticon-padding-top $noticebar-righticon-padding-right $noticebar-righticon-padding-bottom
+      $noticebar-righticon-padding-left;
   }
   .wrap {
+    display: flex;
     flex: 1;
     height: $noticebar-line-height;
     line-height: $noticebar-line-height;
@@ -72,7 +77,7 @@
 
 @keyframes nut-notice-bar-play-infinite {
   to {
-    transform: translate3d(-100%, 0, 0);
+    transform: translateX(-100%);
   }
 }
 // 垂直方向的滚动
@@ -90,6 +95,7 @@
   height: $noticebar-height;
   font-size: $noticebar-font-size;
   overflow: hidden;
+  padding: 0px $noticebar-box-padding-right 0 $noticebar-box-padding-left;
 
   .horseLamp_list {
     margin: 0;

package/dist/packages/notify/index.scss

@@ -29,6 +29,7 @@
   text-align: center;
   word-wrap: break-word;
   height: $notify-height;
+  line-height: $notify-line-height;
   &--base {
     background: $notify-base-background-color;
   }

package/dist/packages/progress/index.scss

@@ -4,13 +4,13 @@
   display: flex;
   .nut-progress-outer {
     flex: 1;
-    background-color: #f3f3f3;
-    border-radius: 12px;
+    background-color: $progress-outer-background-color;
+    border-radius: $progress-outer-border-radius;
     height: 10px;
     .nut-progress-inner {
       width: 30%;
       height: 100%;
-      border-radius: 12px;
+      border-radius: $progress-outer-border-radius;
       background: $progress-inner-background-color;
       -webkit-transition: all 0.4s;
       transition: all 0.4s;
@@ -30,7 +30,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        border-radius: 10px;
+        border-radius: $progress-outer-border-radius;
         animation: progressActive 2s ease-in-out infinite;
       }
     }
@@ -49,26 +49,30 @@
       }
     }
     &.nut-progress-small {
-      height: 5px;
+      height: $progress-small-height;
       .nut-progress-text {
-        font-size: 7px;
-        line-height: 10px;
-        padding: 2px 4px;
-        top: -100%;
+        font-size: $progress-small-text-font-size;
+        line-height: $progress-small-text-line-height;
+        padding: $progress-small-text-padding;
+        top: $progress-small-text-top;
       }
     }
     &.nut-progress-base {
-      height: 10px;
+      height: $progress-base-height;
       .nut-progress-text {
-        font-size: 9px;
-        line-height: 13px;
+        font-size: $progress-base-text-font-size;
+        line-height: $progress-base-text-line-height;
+        padding: $progress-base-text-padding;
+        top: $progress-base-text-top;
       }
     }
     &.nut-progress-large {
-      height: 15px;
+      height: $progress-large-height;
       .nut-progress-text {
-        font-size: 13px;
-        line-height: 18px;
+        font-size: $progress-large-text-font-size;
+        line-height: $progress-large-text-line-height;
+        padding: $progress-large-text-padding;
+        top: $progress-large-text-top;
       }
     }
   }
@@ -82,9 +86,9 @@
     min-width: 35px;
   }
   .nut-progress-insidetext {
-    padding: 3px 5px 3px 6px;
+    padding: $progress-insidetext-padding;
     background: $progress-insidetext-background;
-    border-radius: 5px;
+    border-radius: $progress-insidetext-border-radius;
     position: absolute;
     transition: all 0.4s;
     top: -42%;

package/dist/packages/range/index.scss

@@ -7,7 +7,7 @@
   .min,
   .max {
     font-size: $font-size-1;
-    color: $range-max;
+    color: $range-tip-font-color;
     user-select: none;
   }
 }
@@ -16,7 +16,7 @@
   position: relative;
   width: 100%;
   height: 3px;
-  background-color: $rang-bg-color;
+  background-color: $range-bg-color;
   border-radius: 2px;
   cursor: pointer;
   &::before {
@@ -33,19 +33,19 @@
     position: relative;
     width: 100%;
     height: 100%;
-    background: $rang-bar-bg-color;
+    background: $range-bar-bg-color;
     border-radius: inherit;
     transition: all 0.2s;
   }
 
   &-button {
     display: block;
-    width: 24px;
-    height: 24px;
-    background-color: $white;
+    width: $range-bar-btn-width;
+    height: $range-bar-btn-height;
+    background-color: $range-bar-btn-bg-color;
     border-radius: 50%;
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-    border: 1px solid $primary-color;
+    border: $range-bar-btn-border;
     outline: none;
 
     &-wrapper,
@@ -75,7 +75,7 @@
       justify-content: center;
       user-select: none;
       font-size: $font-size-1;
-      color: $range-max;
+      color: $range-tip-font-color;
       transform: translate3d(0, -100%, 0);
     }
   }

package/dist/packages/row/index.scss

@@ -30,6 +30,9 @@
   &-justify-space-around {
     justify-content: space-around;
   }
+  &-justify-space-evenly {
+    justify-content: space-evenly;
+  }
   &-align-flex-start {
     align-items: flex-start;
   }

package/dist/packages/sticky/index.scss

@@ -0,0 +1,5 @@
+.nut-sticky {
+  &--fixed {
+    position: fixed;
+  }
+}

package/dist/packages/swiper/index.scss

@@ -21,10 +21,10 @@
     bottom: 12px;
     transform: translateX(-50%);
     i {
-      width: 8px;
-      height: 3px;
-      margin-right: 7px;
-      border-radius: 2px;
+      width: $swiper-pagination-item-width;
+      height: $swiper-pagination-item-height;
+      margin-right: $swiper-pagination-item-margin-right;
+      border-radius: $swiper-pagination-item-border-radius;
       &:last-child {
         margin-right: 0;
       }

package/dist/packages/switch/index.scss

@@ -3,7 +3,7 @@
   display: inline-flex;
   align-items: center;
   background-color: $primary-color;
-  border-radius: 21px;
+  border-radius: $switch-border-radius;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center center;
@@ -37,17 +37,17 @@
     opacity: 0.6;
   }
   &.nut-switch-base {
-    width: 36px;
-    height: 21px;
-    line-height: 21px;
+    width: $switch-width;
+    height: $switch-height;
+    line-height: $switch-line-height;
     .switch-button {
-      height: 13px;
-      width: 13px;
-      transform: translateX(30%);
+      height: $switch-inside-width;
+      width: $switch-inside-height;
+      transform: $switch-inside-close-transform;
     }
     &.switch-open {
       .switch-button {
-        transform: translateX(146%);
+        transform: $switch-inside-open-transform;
       }
     }
     &.switch-close {

package/dist/packages/tabbar/index.scss

@@ -1,7 +1,8 @@
 .nut-tabbar {
   border: 0px;
-  border-bottom: 1px solid $tabbar-border-color;
-  border-top: 1px solid $tabbar-border-color;
+  box-shadow: $tabbar-box-shadow;
+  border-bottom: $tabbar-border-bottom;
+  border-top: $tabbar-border-top;
   width: 100%;
   display: flex;
   padding: 7px 0;
@@ -11,14 +12,16 @@
   &:last-child {
     border-right: 0;
   }
+
   &-bottom {
     position: fixed;
     bottom: 0px;
     left: 0px;
     z-index: 888;
   }
+
   &-safebottom {
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
+    margin-bottom: constant(safe-area-inset-bottom);
+    margin-bottom: env(safe-area-inset-bottom);
   }
 }

package/dist/packages/tabbaritem/index.scss

@@ -35,14 +35,14 @@
 
     &_num {
       line-height: 1;
-      font-size: $font-size-0;
+      font-size: $tabbar-item-text-font-size;
       color: $white;
       padding: 1px 2px 2px 3px;
     }
 
     &_nums {
       line-height: 1;
-      font-size: $font-size-0;
+      font-size: $tabbar-item-text-font-size;
       color: $white;
       padding: 2px 1px 2px 2px;
     }
@@ -52,7 +52,8 @@
       background-position: center center;
     }
     &_nav-word {
-      font-size: $font-size-0;
+      font-size: $tabbar-item-text-font-size;
+      line-height: $tabbar-item-text-line-height;
       display: block;
     }
     &_big-word {

package/dist/packages/tabs/index.scss

@@ -149,6 +149,7 @@
       }
       &.active {
         font-weight: 600;
+        color: $tabs-titles-item-active-color;
         .nut-tabs__titles-item__line {
           content: ' ';
           width: $tabs-horizontal-titles-item-active-line-width;

package/dist/packages/toast/index.scss

@@ -32,27 +32,28 @@
     justify-content: center;
     pointer-events: auto;
     height: 100%;
+    background: $toast-cover-bg-color;
   }
   &-inner {
     display: inline-block;
-    font-size: $font-size-base;
+    font-size: $toast-text-font-size;
     min-width: 40%;
     max-width: 65%;
     text-align: center;
-    padding: 24px 30px;
+    padding: $toast-inner-padding;
     word-break: break-all;
-    background: rgba(0, 0, 0, 0);
-    border-radius: 12px;
-    color: $white;
+    background: $toast-inner-bg-color;
+    border-radius: $toast-inner-border-radius;
+    color: $toast-font-color;
   }
   &-text {
-    font-size: 14px;
+    font-size: $toast-text-font-size;
     &:empty {
       margin-bottom: -8px;
     }
   }
   &-title {
-    font-size: 16px;
+    font-size: $toast-title-font-size;
     &:empty {
       margin-bottom: -8px;
     }