@nutui/nutui 3.1.18-beta.0 → 3.1.18

package/dist/packages/input/index.scss

@@ -1,55 +1,96 @@
+input,
+textarea {
+  font: inherit;
+}
 .nut-input {
   position: relative;
   width: 100%;
-  padding: 10px 0px 10px 25px;
+  padding: 10px 25px;
   display: flex;
+  line-height: 24px;
   background: $white;
   font-size: $input-font-size;
   box-sizing: border-box;
-
+  &.center {
+    align-items: center;
+  }
   &.nut-input-border {
     border-bottom: 1px solid $input-border-bottom;
   }
 
-  &.nut-input-require {
-    &::before {
-      position: absolute;
-      left: 14px;
-      color: $input-require-color;
-      content: '*';
-    }
-  }
-
   .input-text,
   &__text--readonly {
-    width: 90%;
-    flex: 1;
-    padding: 0 10px;
-    padding-right: 35px;
+    width: 100%;
+    padding: 0;
+    // padding-right: 35px;
+    line-height: inherit;
     text-align: left;
     outline: 0 none;
     border: 0;
     text-decoration: none;
+    resize: none;
   }
 
   &-label {
     width: 80px;
     overflow: hidden;
-    display: inline-block;
+    margin-right: 6px;
     text-align: left;
-    display: flex;
-
     .label-string {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      // overflow: hidden;
+      // white-space: nowrap;
+      // text-overflow: ellipsis;
     }
   }
-  .nut-textinput-clear {
+  &-value {
+    flex: 1;
+    vertical-align: middle;
+  }
+  &-inner {
+    display: flex;
+    align-items: center;
+  }
+  &-error-message {
+    color: $input-required-color;
+    font-size: 12px;
+  }
+  &-word-limit {
+    display: block;
+    margin-top: 4px;
+    color: #808080;
+    font-size: 12px;
+    // line-height: var(--van-field-word-limit-line-height);
+    text-align: right;
+  }
+  &-left-icon,
+  &-right-icon {
+    display: flex;
+    align-items: center;
+    font-size: 0;
+  }
+  &-clear,
+  &-right-icon {
+    margin-left: 4px;
+  }
+  &-left-icon {
+    margin-right: 4px;
+  }
+  &-clear {
     width: 16px;
     height: 16px;
-    position: absolute;
-    right: 15px;
+    color: #c8c9cc;
+    cursor: pointer;
+  }
+  .nut-button {
+    margin-left: 10px;
+  }
+  &.nut-input-required {
+    &::before {
+      position: absolute;
+      left: 14px;
+      color: $input-required-color;
+      content: '*';
+    }
   }
   &-disabled {
     color: $input-disabled-color !important;
@@ -61,4 +102,9 @@
       -webkit-text-fill-color: $input-disabled-color;
     }
   }
+  &-error,
+  &-error::placeholder {
+    color: $input-required-color;
+    -webkit-text-fill-color: $input-required-color;
+  }
 }

package/dist/packages/inputnumber/index.scss

@@ -24,8 +24,10 @@
     height: 100%;
     text-align: center;
     outline: none;
-    border: 0;
-    margin: 0 6px;
+    border: $inputnumber-input-border;
+    font-size: $inputnumber-input-font-size;
+    color: $inputnumber-input-font-color;
+    margin: $inputnumber-input-margin;
     background-color: $inputnumber-input-background-color;
     border-radius: $inputnumber-input-border-radius;
   }

package/dist/packages/list/index.scss

@@ -0,0 +1,24 @@
+.nut-list {
+  width: 100%;
+  height: 100%;
+  overflow: scroll;
+  position: relative;
+  -webkit-overflow-scrolling: touch;
+  &-phantom {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    z-index: -1;
+  }
+  &-container {
+    left: 0;
+    right: 0;
+    top: 0;
+    position: absolute;
+  }
+  &-item {
+    overflow: hidden;
+    margin: $list-item-margin;
+  }
+}

package/dist/packages/menu/index.scss

@@ -3,7 +3,7 @@
   display: flex;
   line-height: $menu-bar-line-height;
   background-color: $white;
-  border-bottom: 1px solid $menu-bar-border-bottom-color;
+  box-shadow: $menu-bar-box-shadow;
 
   &.opened {
     z-index: $menu-bar-opened-z-index;
@@ -12,8 +12,8 @@
   .nut-menu__item {
     flex: 1;
     text-align: center;
-    font-size: $font-size-2;
-    color: $title-color;
+    font-size: $menu-item-font-size;
+    color: $menu-item-text-color;
     min-width: 0;
 
     &.active {

package/dist/packages/navbar/index.scss

@@ -2,18 +2,28 @@
   position: relative;
   display: flex;
   align-items: center;
-  height: 44px;
+  height: $navbar-height;
   box-sizing: border-box;
-  padding: 13px 16px;
-  background: $white;
-  box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
-  font-size: $cell-title-font;
-  color: $cell-color;
-  margin-bottom: 20px;
+  padding: $navbar-padding;
+  background: $navbar-background;
+  box-shadow: $navbar-box-shadow;
+  font-size: $navbar-title-base-font;
+  color: $navbar-color;
+  margin-bottom: $navbar-margin-bottom;
   overflow: hidden;
   &:active::before {
     opacity: 0.1;
   }
+  &--fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+  &--safe-area-inset-top {
+    padding-top: constant(safe-area-inset-top);
+    padding-top: env(safe-area-inset-top);
+  }
   &--clickable {
     &::before {
       position: absolute;
@@ -43,9 +53,19 @@
     text-align: center;
     display: flex;
     justify-content: center;
+    .title {
+      width: $navbar-title-width;
+      font-size: $navbar-title-font;
+      font-weight: $navbar-title-font-weight;
+      color: $navbar-title-font-color;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+    }
     &.icon {
       .icon {
-        margin-left: 13px;
+        margin: $navbar-title-icon-margin;
       }
     }
     .nut-icon {

package/dist/packages/noticebar/index.scss

@@ -1,15 +1,16 @@
 .nut-noticebar-page {
   // width: 100%;
   display: flex;
-  padding: 0px $noticebar-box-padding-right 0 $noticebar-box-padding-left;
+  padding: $noticebar-box-padding;
   height: $noticebar-height;
   font-size: $noticebar-font-size;
   position: relative;
   align-items: center;
+  background: $noticebar-background;
+  color: $noticebar-color;
   &.wrapable {
     height: auto;
-    padding: $noticebar-wrapable-padding-bottom $noticebar-wrapable-padding-right $noticebar-wrapable-padding-bottom
-      $noticebar-wrapable-padding-left;
+    padding: $noticebar-wrapable-padding;
     .wrap {
       height: auto;
       .content {
@@ -27,8 +28,7 @@
   .left-icon {
     height: $noticebar-left-icon-width;
     min-width: $noticebar-left-icon-width;
-    margin: $noticebar-lefticon-padding-top $noticebar-lefticon-padding-right $noticebar-lefticon-padding-bottom
-      $noticebar-lefticon-padding-left;
+    margin: $noticebar-lefticon-margin;
     background-size: 100% 100%;
   }
   .right-icon {
@@ -36,8 +36,7 @@
     align-items: center;
     justify-content: center;
     width: $noticebar-right-icon-width;
-    margin: $noticebar-righticon-padding-top $noticebar-righticon-padding-right $noticebar-righticon-padding-bottom
-      $noticebar-righticon-padding-left;
+    margin: $noticebar-righticon-margin;
   }
   .wrap {
     display: flex;
@@ -95,7 +94,7 @@
   height: $noticebar-height;
   font-size: $noticebar-font-size;
   overflow: hidden;
-  padding: 0px $noticebar-box-padding-right 0 $noticebar-box-padding-left;
+  padding: $noticebar-box-padding;
 
   .horseLamp_list {
     margin: 0;

package/dist/packages/notify/index.scss

@@ -7,6 +7,15 @@
   transition: transform 0.3s;
   z-index: 9999;
 }
+.popup-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  overflow-y: auto;
+  transition: transform 0.3s;
+  z-index: 9999;
+}
 
 .nut-fade-enter-active {
   transition: opacity 1s;

package/dist/packages/numberkeyboard/index.scss

@@ -1,7 +1,7 @@
 .nut-numberkeyboard {
-  width: 100%;
-  padding-bottom: 22px;
-  background-color: #f2f3f5;
+  width: $numberkeyboard-width;
+  padding: $numberkeyboard-padding;
+  background-color: $numberkeyboard-background-color;
   user-select: none;
 
   .number-board-header {
@@ -10,10 +10,10 @@
     align-items: center;
     justify-content: center;
     box-sizing: content-box;
-    height: 34px;
-    padding-top: 6px;
-    color: #646566;
-    font-size: 16px;
+    height: $numberkeyboard-header-height;
+    padding: $numberkeyboard-header-padding;
+    color: $numberkeyboard-header-color;
+    font-size: $numberkeyboard-header-font-size;
 
     .tit {
       display: inline-block;
@@ -23,10 +23,10 @@
       position: absolute;
       display: block;
       right: 0;
-      padding: 0 16px;
-      color: #576b95;
-      font-size: 14px;
-      background-color: transparent;
+      padding: $numberkeyboard-header-close-padding;
+      color: $numberkeyboard-header-close-color;
+      font-size: $numberkeyboard-header-close-font-size;
+      background-color: $numberkeyboard-header-close-background-color;
       border: none;
       cursor: pointer;
     }
@@ -53,16 +53,17 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        height: 48px;
-        font-size: 28px;
-        line-height: 1.5;
-        background-color: #fff;
-        border-radius: 8px;
+        height: $numberkeyboard-key-height;
+        font-size: $numberkeyboard-key-font-size;
+        line-height: $numberkeyboard-key-line-height;
+        background-color: $numberkeyboard-key-background-color;
+        color: $numberkeyboard-key-font-size-color;
+        border-radius: $numberkeyboard-key-border-radius;
         cursor: pointer;
       }
 
       .active {
-        background-color: #ebedf0;
+        background-color: $numberkeyboard-key-active-background-color;
       }
 
       img {
@@ -91,13 +92,13 @@
         }
 
         .finish {
-          font-size: 16px;
-          color: #fff;
-          background-color: #1989fa;
+          font-size: $numberkeyboard-key-finish-font-size;
+          color: $numberkeyboard-key-finish-font-size-color;
+          background-color: $numberkeyboard-key-finish-background-color;
         }
 
         .activeFinsh {
-          background-color: #0570db;
+          background-color: $numberkeyboard-key-activeFinsh-background-color;
         }
       }
     }

package/dist/packages/oldpicker/index.scss

@@ -0,0 +1,131 @@
+.nut-oldpicker {
+  &__content {
+    display: block;
+    position: relative;
+    text-align: center;
+    overflow-y: hidden;
+    &:hover {
+      cursor: grab;
+    }
+  }
+
+  &__bar {
+    display: flex;
+    height: 56px;
+    align-items: center;
+    justify-content: space-between;
+  }
+  &__column {
+    display: flex;
+    position: relative;
+    height: 252px;
+  }
+  &__columnitem {
+    width: 0;
+    flex-grow: 1;
+    height: 100%;
+  }
+  &__left {
+    color: $picker-cancel-color;
+    font-size: $picker-bar-cancel-font-size;
+  }
+  &__right {
+    color: $picker-ok-color;
+    font-size: $picker-bar-ok-font-size;
+  }
+
+  &__title {
+    color: $picker-bar-title-color;
+    font-size: $picker-bar-title-font-size;
+    font-weight: $picker-bar-title-font-weight;
+  }
+
+  &__button {
+    cursor: pointer;
+    padding: $picker-bar-button-padding;
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+  &__wrapper {
+    display: block;
+  }
+  &__item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 35px;
+  }
+  &__hairline {
+    position: absolute;
+    top: 108px;
+    height: 34px;
+    width: 100%;
+    border: $picker-item-active-line-border;
+    border-left: 0;
+    border-right: 0;
+  }
+
+  &__list {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 252px;
+    overflow: hidden;
+    text-align: center;
+  }
+
+  &-roller {
+    display: block;
+    position: absolute;
+    top: 108px;
+    width: 100%;
+    height: $picker-item-height;
+    z-index: 1;
+    transform-style: preserve-3d;
+
+    &-item {
+      display: block;
+      backface-visibility: hidden;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: $picker-item-height;
+      line-height: $picker-item-height;
+      color: $picker-item-text-color;
+      font-size: $picker-item-text-font-size;
+
+      &-hidden {
+        visibility: hidden;
+        opacity: 0;
+      }
+    }
+  }
+
+  &-content {
+    display: block;
+    position: absolute;
+    top: 108px;
+    width: 100%;
+    height: $picker-item-height;
+    color: $picker-item-active-text-color;
+    z-index: 2;
+    overflow: hidden;
+    border-left: 0;
+    border-right: 0;
+  }
+  &-list-panel {
+    display: block;
+    transform-style: preserve-3d;
+  }
+  &-item {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: $picker-item-height;
+    line-height: $picker-item-height;
+    text-align: center;
+    font-size: 16px;
+  }
+}

package/dist/packages/picker/index.scss

@@ -1,27 +1,28 @@
 .nut-picker {
-  color: #f00;
-
-  view {
-    display: block;
-  }
-  &__content {
-    display: block;
-    position: relative;
-    text-align: center;
-    overflow-y: hidden;
-    &:hover {
-      cursor: grab;
-    }
-  }
-
+  // 标题
   &__bar {
     display: flex;
     height: 56px;
     align-items: center;
     justify-content: space-between;
-    padding: 0 15px;
-    font-size: 16px;
   }
+  &__button {
+    cursor: pointer;
+    padding: $picker-bar-button-padding;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 50px;
+  }
+  &__left {
+    color: $picker-cancel-color;
+    font-size: $picker-bar-cancel-font-size;
+  }
+  &__right {
+    color: $picker-ok-color;
+    font-size: $picker-bar-ok-font-size;
+  }
+
   &__column {
     display: flex;
     position: relative;
@@ -32,13 +33,16 @@
     flex-grow: 1;
     height: 100%;
   }
-  &__left {
-    color: $picker-cancel-color;
-    font-size: 16px;
-  }
-  &__button {
-    cursor: pointer;
+
+  &__title {
+    flex: 1;
+    @include oneline-ellipsis();
+    text-align: center;
+    color: $picker-bar-title-color;
+    font-size: $picker-bar-title-font-size;
+    font-weight: $picker-bar-title-font-weight;
   }
+
   &__wrapper {
     display: block;
   }
@@ -53,7 +57,7 @@
     top: 108px;
     height: 34px;
     width: 100%;
-    border: 1px solid #d8d8d8;
+    border: $picker-item-active-line-border;
     border-left: 0;
     border-right: 0;
   }
@@ -72,7 +76,7 @@
     position: absolute;
     top: 108px;
     width: 100%;
-    height: 36px;
+    height: $picker-item-height;
     z-index: 1;
     transform-style: preserve-3d;
 
@@ -82,10 +86,10 @@
       position: absolute;
       top: 0;
       width: 100%;
-      height: 36px;
-      line-height: 36px;
-      color: #808080;
-      font-size: 16px;
+      height: $picker-item-height;
+      line-height: $picker-item-height;
+      color: $picker-item-text-color;
+      font-size: $picker-item-text-font-size;
 
       &-hidden {
         visibility: hidden;
@@ -99,7 +103,8 @@
     position: absolute;
     top: 108px;
     width: 100%;
-    height: 36px;
+    height: $picker-item-height;
+    color: $picker-item-active-text-color;
     z-index: 2;
     overflow: hidden;
     border-left: 0;
@@ -114,9 +119,10 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    height: 36px;
-    line-height: 36px;
+    height: $picker-item-height;
+    line-height: $picker-item-height;
     text-align: center;
     font-size: 16px;
+    color: $picker-columns-item-color;
   }
 }

package/dist/packages/progress/index.scss

@@ -14,7 +14,7 @@
       background: $progress-inner-background-color;
       -webkit-transition: all 0.4s;
       transition: all 0.4s;
-      position: relative;
+      // position: relative;
       .nut-progress-text {
         display: flex;
         flex-direction: column;
@@ -54,7 +54,8 @@
         font-size: $progress-small-text-font-size;
         line-height: $progress-small-text-line-height;
         padding: $progress-small-text-padding;
-        top: $progress-small-text-top;
+        // top: $progress-small-text-top;
+        top: 50%;
       }
     }
     &.nut-progress-base {
@@ -63,7 +64,7 @@
         font-size: $progress-base-text-font-size;
         line-height: $progress-base-text-line-height;
         padding: $progress-base-text-padding;
-        top: $progress-base-text-top;
+        top: 50%;
       }
     }
     &.nut-progress-large {
@@ -72,7 +73,7 @@
         font-size: $progress-large-text-font-size;
         line-height: $progress-large-text-line-height;
         padding: $progress-large-text-padding;
-        top: $progress-large-text-top;
+        top: 50%;
       }
     }
   }
@@ -91,7 +92,7 @@
     border-radius: $progress-insidetext-border-radius;
     position: absolute;
     transition: all 0.4s;
-    top: -42%;
+    top: 50%;
     min-width: 0px;
   }
   .nut-icon-success,