@nutui/nutui 3.1.17-beta.0 → 3.1.18

package/dist/packages/collapseitem/index.scss

@@ -25,10 +25,10 @@
     display: block;
     width: 100%;
     overflow: hidden;
-    padding: 13px 26px;
-    color: #666666;
-    font-size: 14px;
-    line-height: 24px;
+    padding: $collapse-item-padding;
+    color: $collapse-item-color;
+    font-size: $collapse-item-font-size;
+    line-height: $collapse-item-line-height;
     background-color: #fff;
     box-sizing: border-box;
     .collapse-icon {
@@ -37,6 +37,7 @@
       top: 50%;
       // margin-top: -6px;
       right: 16px;
+      color: $collapse-item-icon-color;
       // width: 24px;
       // height: 12px;
       // line-height: 24px;
@@ -53,7 +54,7 @@
       top: 50%;
       right: 60px;
       margin-top: -12px;
-      color: #999999;
+      color: $collapse-item-sub-title-color;
     }
     .titleIconRight {
       vertical-align: middle;
@@ -64,6 +65,9 @@
       margin: 0px 10px 0 0;
     }
   }
+  // .extraRender {
+  //   display: block;
+  // }
   .collapse-wrapper {
     display: block;
     position: relative;
@@ -72,11 +76,14 @@
     transition: height 0.3s ease-in-out;
     .collapse-content {
       display: block;
-      padding: 12px 26px;
-      color: #666666;
-      font-size: 14px;
-      line-height: 1.5;
-      background-color: #fff;
+      padding: $collapse-wrapper-content-padding;
+      color: $collapse-wrapper-content-color;
+      font-size: $collapse-wrapper-content-font-size;
+      line-height: $collapse-wrapper-content-line-height;
+      background-color: $collapse-wrapper-content-background-color;
+    }
+    .empty {
+      padding: $collapse-wrapper-empty-content-padding;
     }
   }
   .open-style {
@@ -88,7 +95,7 @@
     // height: 0;
   }
   .nut-collapse-item-disabled {
-    color: #c8c9cc;
+    color: $collapse-item-disabled-color;
     cursor: not-allowed;
     pointer-events: none;
     // .collapse-icon-disabled {
@@ -96,6 +103,9 @@
     //   background-repeat: no-repeat;
     //   background-size: 100% 100%;
     // }
+    .collapse-icon {
+      color: $collapse-item-disabled-color;
+    }
   }
   .titleIconLeft {
     float: left;

package/dist/packages/countdown/index.scss

@@ -1,3 +1,5 @@
 .nut-countdown {
-  display: flex;
+  display: $countdown-display;
+  color: $countdown-color;
+  font-size: $countdown-font-size;
 }

package/dist/packages/divider/index.scss

@@ -1,16 +1,16 @@
 .nut-divider {
   display: flex;
   align-items: center;
-  font-size: 14px;
-  color: #909ca4;
-  margin: 8px 0;
-  width: 100%;
+  font-size: $divider-text-font-size;
+  color: $divider-text-color;
+  margin: $divider-margin;
 
   &::before,
   &::after {
     content: '';
-    border: 1px solid currentColor;
-    border-width: 1px 0 0;
+    border: $divider-line-height solid currentColor;
+    border-width: $divider-line-height 0 0;
+    height: $divider-line-height;
     flex: 1;
   }
 
@@ -18,11 +18,11 @@
   &.nut-divider-left,
   &.nut-divider-right {
     &::before {
-      margin-right: 8px;
+      margin-right: $divider-before-margin-right;
     }
 
     &::after {
-      margin-left: 8px;
+      margin-left: $divider-after-margin-left;
     }
   }
 

package/dist/packages/elevator/index.scss

@@ -7,32 +7,32 @@
     overflow: auto;
     &__item {
       display: block;
-      font-size: 12px;
-      color: #333;
+      font-size: $elevator-list-item-font-size;
+      color: $elevator-list-item-font-color;
       &__code {
         position: relative;
-        height: 35px;
-        line-height: 35px;
-        font-size: 14px;
-        color: #1a1a1a;
-        padding: 0 20px;
-        font-weight: 500;
+        height: $elevator-list-item-code-height;
+        line-height: $elevator-list-item-code-line-height;
+        font-size: $elevator-list-item-code-font-size;
+        color: $elevator-list-item-code-font-color;
+        padding: $elevator-list-item-code-padding;
+        font-weight: $elevator-list-item-code-font-weight;
         &::after {
           content: ' ';
-          width: 100%;
-          height: 1px;
+          width: $elevator-list-item-code-after-width;
+          height: $elevator-list-item-code-after-height;
           position: absolute;
           left: 0;
           bottom: 0;
-          background-color: #f5f5f5;
+          background-color: $elevator-list-item-code-after-bg-color;
         }
       }
       &__name {
         display: flex;
         align-items: center;
-        padding: 0 20px;
-        height: 30px;
-        line-height: 30px;
+        padding: $elevator-list-item-name-padding;
+        height: $elevator-list-item-name-height;
+        line-height: $elevator-list-item-name-line-height;
         &--highcolor {
           color: $elevator-list-item-highcolor;
         }
@@ -40,33 +40,33 @@
     }
   }
   &__code--current {
-    position: absolute;
-    right: 60px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 45px;
-    height: 45px;
-    line-height: 45px;
-    border-radius: 50%;
-    background: $white;
-    box-shadow: 0 3px 3px 1px rgba(240, 240, 240, 1);
-    text-align: center;
+    position: $elevator-list-item-code-current-position;
+    right: $elevator-list-item-code-current-right;
+    top: $elevator-list-item-code-current-top;
+    transform: $elevator-list-item-code-current-transform;
+    width: $elevator-list-item-code-current-width;
+    height: $elevator-list-item-code-current-height;
+    line-height: $elevator-list-item-code-current-line-height;
+    border-radius: $elevator-list-item-code-current-border-radius;
+    background: $elevator-list-item-code-current-bg-color;
+    box-shadow: $elevator-list-item-code-current-box-shadow;
+    text-align: $elevator-list-item-code-current-text-align;
   }
   &__bars {
-    position: absolute;
-    right: 8px;
-    top: 50%;
-    transform: translateY(-50%);
-    padding: 15px 0;
-    background-color: #eeeff2;
-    border-radius: 6px;
-    text-align: center;
-    z-index: 10;
+    position: $elevator-list-item-bars-position;
+    right: $elevator-list-item-bars-right;
+    top: $elevator-list-item-bars-top;
+    transform: $elevator-list-item-bars-transform;
+    padding: $elevator-list-item-bars-padding;
+    background-color: $elevator-list-item-bars-background-color;
+    border-radius: $elevator-list-item-bars-border-radius;
+    text-align: $elevator-list-item-bars-text-align;
+    z-index: $elevator-list-item-bars-z-index;
     &__inner {
       &__item {
         display: block;
-        padding: 3px;
-        font-size: 10px;
+        padding: $elevator-list-item-bars-inner-item-padding;
+        font-size: $elevator-list-item-bars-inner-item-font-size;
       }
     }
   }

package/dist/packages/formitem/index.scss

@@ -21,28 +21,31 @@
   }
 
   &__label {
-    font-size: 14px;
+    font-size: $form-item-label-font-size;
     font-weight: normal;
-    width: 90px;
-    margin-right: 10px;
+    width: $form-item-label-width;
+    margin-right: $form-item-label-margin-right;
     flex: none !important;
-    display: inline-block;
+    display: inline-block !important;
     word-wrap: break-word;
+    text-align: $form-item-label-text-align;
     &.required {
       &::before {
         content: '*';
         color: $form-item-required-color;
-        margin-right: 4px;
+        margin-right: $form-item-required-margin-right;
       }
     }
   }
   &__body {
     flex: 1;
-    display: flex;
+    display: flex !important;
     flex-direction: column;
     &__slots {
+      text-align: $form-item-body-slots-text-align;
       .nut-input-text {
-        font-size: 14px;
+        font-size: $form-item-body-font-size;
+        text-align: $form-item-body-input-text-align;
         width: 100%;
         outline: 0 none;
         border: 0;
@@ -53,10 +56,14 @@
       }
       .nut-textarea {
         padding: 0 !important;
+        .nut-textarea__textarea {
+          text-align: $form-item-body-input-text-align;
+        }
       }
     }
     &__tips {
-      font-size: 10px;
+      text-align: $form-item-tip-text-align;
+      font-size: $form-item-tip-font-size;
       color: $form-item-error-message-color;
     }
   }

package/dist/packages/indicator/index.scss

@@ -36,7 +36,7 @@
     width: $indicator-size;
     height: $indicator-size;
     text-align: center;
-    font-size: 10px;
+    font-size: $indicator-number-font-size;
     line-height: $indicator-size;
     color: $indicator-white;
     vertical-align: middle;

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;
@@ -41,9 +51,21 @@
     min-width: 53%;
     margin: 0 auto;
     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,13 +1,16 @@
 .nut-noticebar-page {
-  width: 100%;
+  // width: 100%;
   display: flex;
+  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: 8px 16px;
+    padding: $noticebar-wrapable-padding;
     .wrap {
       height: auto;
       .content {
@@ -25,7 +28,7 @@
   .left-icon {
     height: $noticebar-left-icon-width;
     min-width: $noticebar-left-icon-width;
-    margin: 0 5px 0 10px;
+    margin: $noticebar-lefticon-margin;
     background-size: 100% 100%;
   }
   .right-icon {
@@ -33,9 +36,10 @@
     align-items: center;
     justify-content: center;
     width: $noticebar-right-icon-width;
-    margin: 0 10px 0 5px;
+    margin: $noticebar-righticon-margin;
   }
   .wrap {
+    display: flex;
     flex: 1;
     height: $noticebar-line-height;
     line-height: $noticebar-line-height;
@@ -72,7 +76,7 @@
 
 @keyframes nut-notice-bar-play-infinite {
   to {
-    transform: translate3d(-100%, 0, 0);
+    transform: translateX(-100%);
   }
 }
 // 垂直方向的滚动
@@ -90,6 +94,7 @@
   height: $noticebar-height;
   font-size: $noticebar-font-size;
   overflow: hidden;
+  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;
@@ -29,6 +38,7 @@
   text-align: center;
   word-wrap: break-word;
   height: $notify-height;
+  line-height: $notify-line-height;
   &--base {
     background: $notify-base-background-color;
   }