@nutui/nutui 3.1.15-beta.0 → 3.1.16

package/dist/packages/_es/index2.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.15-beta.0 Thu Dec 23 2021 17:12:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.16 Sun Jan 30 2022 10:58:10 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/index3.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.15-beta.0 Thu Dec 23 2021 17:12:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.16 Sun Jan 30 2022 10:58:10 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/plugin-vue_export-helper.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.15-beta.0 Thu Dec 23 2021 17:12:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.16 Sun Jan 30 2022 10:58:10 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/pxCheck.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.15-beta.0 Thu Dec 23 2021 17:12:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.16 Sun Jan 30 2022 10:58:10 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/raf.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.15-beta.0 Thu Dec 23 2021 17:12:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.16 Sun Jan 30 2022 10:58:10 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/util.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.15-beta.0 Thu Dec 23 2021 17:12:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.16 Sun Jan 30 2022 10:58:10 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/actionsheet/index.scss

@@ -6,7 +6,7 @@
     margin: 0;
     text-align: center;
     background-color: $white;
-    border-bottom: 1px solid $light-color;
+    border-bottom: 1px solid $actionsheet-light-color;
     font-size: $font-size-base;
     color: $title-color;
   }
@@ -63,6 +63,6 @@
 
   .nut-actionsheet-cancel {
     margin-top: 5px;
-    border-top: 1px solid $light-color;
+    border-top: 1px solid $actionsheet-light-color;
   }
 }

package/dist/packages/address/index.scss

@@ -80,6 +80,7 @@
 
           .region-item-icon {
             margin-right: 6px;
+            color: $address-icon-color !important;
           }
         }
       }
@@ -115,6 +116,7 @@
           }
           .exist-item-icon {
             margin-right: 9px;
+            color: $address-icon-color !important;
           }
           span {
             display: inline-block;

package/dist/packages/button/index.scss

@@ -34,6 +34,9 @@
     opacity: 0;
     content: ' ';
   }
+  &::after {
+    border: none;
+  }
   &:active::before {
     opacity: 0.1;
   }

package/dist/packages/cascader/index.scss

@@ -1,7 +1,7 @@
 .nut-cascader {
   width: 100%;
-  font-size: $nut-cascader-font-size;
-  line-height: $nut-cascader-line-height;
+  font-size: $cascader-font-size;
+  line-height: $cascader-line-height;
 
   .nut-tabpane {
     padding: 0;
@@ -10,12 +10,12 @@
   .nut-tabs__titles-item {
     flex: initial;
     min-width: auto;
-    padding: $nut-cascader-tabs-item-padding;
+    padding: $cascader-tabs-item-padding;
     white-space: nowrap;
   }
 
   .nut-tabs__titles {
-    padding: $nut-cascader-tabs-item-padding;
+    padding: $cascader-tabs-item-padding;
     background: #fff;
   }
 
@@ -23,12 +23,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: $nut-cascader-bar-padding;
+    padding: $cascader-bar-padding;
     text-align: center;
     font-weight: bold;
-    line-height: $nut-cascader-bar-line-height;
-    color: $nut-cascader-bar-color;
-    font-size: $nut-cascader-bar-font-size;
+    line-height: $cascader-bar-line-height;
+    color: $cascader-bar-color;
+    font-size: $cascader-bar-font-size;
   }
 
   &-pane {
@@ -45,11 +45,11 @@
   &-item {
     display: flex;
     align-items: center;
-    padding: $nut-cascader-item-padding;
+    padding: $cascader-item-padding;
     margin: 0;
     cursor: pointer;
-    font-size: $nut-cascader-item-font-size;
-    color: $nut-cascader-item-color;
+    font-size: $cascader-item-font-size;
+    color: $cascader-item-color;
 
     &__title {
       flex: 1;
@@ -65,12 +65,12 @@
     }
 
     &.active:not(.disabled) {
-      color: $nut-cascader-item-active-color;
+      color: $cascader-item-active-color;
     }
 
     &.active &__icon-check {
       visibility: visible;
-      color: $nut-cascader-item-active-color;
+      color: $cascader-item-active-color;
     }
 
     &.disabled {

package/dist/packages/icon/index.scss

@@ -1,4 +1,5 @@
 @import '../../styles/font/iconfont.css';
+
 .nut-icon {
   display: inline-block;
   position: relative;
@@ -22,20 +23,109 @@
   &-loading,
   &-loading1 {
     display: inline-block;
-    animation: loadingCircle 1s infinite linear;
+    animation: rotation 1s infinite linear;
   }
-}
 
-@-webkit-keyframes loadingCircle {
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
+  --animate-duration: 1s;
+  --animate-delay: 0s;
+
+  &-am-infinite {
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-direction: alternate;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
   }
-}
+  &-am-jump {
+    -webkit-animation-name: nutJumpOne;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease;
+    -webkit-animation-delay: var(--animate-delay);
+
+    animation-name: nutJumpOne;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease;
+    animation-delay: var(--animate-delay);
+
+    &.nut-icon-am-infinite {
+      -webkit-animation-name: nutJump;
+      animation-name: nutJump;
+    }
+  }
+
+  &-am-rotate {
+    -webkit-animation-name: rotation;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-delay: var(--animate-delay);
+
+    animation-name: rotation;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: linear;
+    animation-delay: var(--animate-delay);
+
+    &.nut-icon-am-infinite {
+      -webkit-animation-direction: normal;
+      animation-direction: normal;
+    }
+  }
+  &-am-blink {
+    -webkit-animation-name: nutBlink;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-delay: var(--animate-delay);
+
+    animation-name: nutBlink;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: linear;
+    animation-delay: var(--animate-delay);
+  }
+  &-am-breathe {
+    -webkit-animation-name: nutBreathe;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-delay: var(--animate-delay);
+
+    animation-name: nutBreathe;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease-in-out;
+    animation-delay: var(--animate-delay);
+  }
+  &-am-flash {
+    -webkit-animation-name: nutFlash;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-delay: var(--animate-delay);
+
+    animation-name: nutFlash;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease-in-out;
+    animation-delay: var(--animate-delay);
+  }
+  &-am-bounce {
+    -webkit-animation-name: nutBounce;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-delay: var(--animate-delay);
+    animation-name: nutBounce;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease-in-out;
+    animation-delay: var(--animate-delay);
+
+    &.nut-icon-am-infinite {
+      -webkit-animation-direction: normal;
+      animation-direction: normal;
+    }
+  }
+
+  &-am-shake {
+    -webkit-animation-name: nutShake;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-delay: var(--animate-delay);
 
-@keyframes loadingCircle {
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
+    animation-name: nutShake;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease-in-out;
+    animation-delay: var(--animate-delay);
   }
 }

package/dist/packages/input/index.scss

@@ -4,10 +4,13 @@
   padding: 10px 0px 10px 25px;
   display: flex;
   background: $white;
-  border-bottom: 1px solid $input-border-bottom;
   font-size: $input-font-size;
   box-sizing: border-box;
 
+  &.nut-input-border {
+    border-bottom: 1px solid $input-border-bottom;
+  }
+
   &.nut-input-require {
     &::before {
       position: absolute;

package/dist/packages/menu/index.scss

@@ -1,12 +1,12 @@
 .nut-menu__bar {
   position: relative;
   display: flex;
-  line-height: $nut-menu-bar-line-height;
+  line-height: $menu-bar-line-height;
   background-color: $white;
-  border-bottom: 1px solid $nut-menu-bar-border-bottom-color;
+  border-bottom: 1px solid $menu-bar-border-bottom-color;
 
   &.opened {
-    z-index: $nut-menu-bar-opened-z-index;
+    z-index: $menu-bar-opened-z-index;
   }
 
   .nut-menu__item {
@@ -16,8 +16,12 @@
     color: $title-color;
     min-width: 0;
 
+    &.active {
+      color: $menu-item-active-text-color;
+    }
+
     &.disabled {
-      color: $nut-menu-item-disabled-color;
+      color: $menu-item-disabled-color;
     }
 
     .nut-menu__title-icon {
@@ -33,8 +37,8 @@
       .nut-menu__title-text {
         @include text-ellipsis;
         display: block;
-        padding-left: $nut-menu-title-text-padding-left;
-        padding-right: $nut-menu-title-text-padding-right;
+        padding-left: $menu-title-text-padding-left;
+        padding-right: $menu-title-text-padding-right;
       }
 
       &.active .nut-menu__title-icon {

package/dist/packages/menuitem/index.scss

@@ -1,12 +1,13 @@
 .nut-menu-item {
   .active {
     font-weight: 500;
+    color: $menu-item-active-text-color !important;
   }
 }
 
 .nut-menu-item__content {
-  padding: $nut-menu-item-content-padding;
-  max-height: $nut-menu-item-content-max-height;
+  padding: $menu-item-content-padding;
+  max-height: $menu-item-content-max-height;
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
@@ -14,13 +15,13 @@
   .nut-menu-item__option {
     color: $title-color;
     font-size: $font-size-2;
-    padding-top: $nut-menu-item-option-padding-top;
-    padding-bottom: $nut-menu-item-option-padding-bottom;
+    padding-top: $menu-item-option-padding-top;
+    padding-bottom: $menu-item-option-padding-bottom;
     display: flex;
     align-items: center;
 
     i {
-      margin-right: $nut-menu-item-option-i-margin-right;
+      margin-right: $menu-item-option-i-margin-right;
     }
   }
 }
@@ -33,14 +34,14 @@
 .nut-menu__pop {
   transition: all 0 ease 0;
   transform: none;
-  top: auto !important;
+  // top: auto !important;
 }
 
 .placeholder-element {
   position: fixed;
-  top: -$nut-menu-bar-line-height;
+  top: -$menu-bar-line-height;
   left: 0;
   right: 0;
-  z-index: $nut-menu-bar-opened-z-index;
+  z-index: $menu-bar-opened-z-index;
   background-color: transparent;
 }

package/dist/packages/navbar/index.scss

@@ -3,12 +3,14 @@
   display: flex;
   align-items: center;
   height: 44px;
+  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;
+  overflow: hidden;
   &:active::before {
     opacity: 0.1;
   }
@@ -54,40 +56,12 @@
       display: inline-block;
     }
 
-    .tab-title {
-      width: 164px;
-      white-space: nowrap;
-      overflow-x: auto;
-      display: flex;
-      .tab-title-box {
-        height: 50px;
-        display: flex;
-        flex: 1;
-        justify-content: center;
-        align-items: center;
-        box-sizing: border-box;
-        text-align: center;
-        font-size: 14px;
-        color: rgba(26, 26, 26, 1);
-        margin-left: 10px;
-      }
-      .nut-tab-active {
-        color: #1a1a1a;
-        font-weight: bold;
-        font-size: 16px;
-        position: relative;
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: 7px;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 12px;
-          height: 4px;
-          background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/127200/40/18747/536/5fb36b5aE61cac2d8/638032e8da9b93f4.png');
-          background-size: 100% 100%;
-        }
-      }
+    .nut-tabs__titles {
+      background: $white;
+    }
+
+    .nut-tabpane {
+      display: none;
     }
   }
 

package/dist/packages/noticebar/index.scss

@@ -1,8 +1,8 @@
 .nut-noticebar-page {
   width: 100%;
   display: flex;
-  height: $noticeBar-height;
-  font-size: $noticeBar-font-size;
+  height: $noticebar-height;
+  font-size: $noticebar-font-size;
   position: relative;
   align-items: center;
   &.wrapable {
@@ -23,8 +23,8 @@
     padding-right: 40px;
   }
   .left-icon {
-    height: $noticeBar-left-icon-width;
-    min-width: $noticeBar-left-icon-width;
+    height: $noticebar-left-icon-width;
+    min-width: $noticebar-left-icon-width;
     margin: 0 5px 0 10px;
     background-size: 100% 100%;
   }
@@ -32,13 +32,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: $noticeBar-right-icon-width;
+    width: $noticebar-right-icon-width;
     margin: 0 10px 0 5px;
   }
   .wrap {
     flex: 1;
-    height: $noticeBar-line-height;
-    line-height: $noticeBar-line-height;
+    height: $noticebar-line-height;
+    line-height: $noticebar-line-height;
     overflow: hidden;
     position: relative;
   }
@@ -78,7 +78,7 @@
 // 垂直方向的滚动
 @keyframes nut-notice-bar-play-vertical {
   to {
-    transform: translateY($noticeBar-height);
+    transform: translateY($noticebar-height);
   }
 }
 
@@ -87,8 +87,8 @@
   position: relative;
   display: flex;
   justify-content: space-between;
-  height: $noticeBar-height;
-  font-size: $noticeBar-font-size;
+  height: $noticebar-height;
+  font-size: $noticebar-font-size;
   overflow: hidden;
 
   .horseLamp_list {
@@ -99,7 +99,7 @@
     .horseLamp_list_item {
       display: flex;
       align-items: center;
-      height: $noticeBar-height;
+      height: $noticebar-height;
     }
   }
 

package/dist/packages/picker/index.scss

@@ -1,4 +1,9 @@
 .nut-picker {
+  color: #f00;
+
+  view {
+    display: block;
+  }
   &__content {
     display: block;
     position: relative;
@@ -8,35 +13,19 @@
       cursor: grab;
     }
   }
-  &__mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    background-image: linear-gradient(
-        180deg,
-        hsla(0, 0%, 100%, 0.9),
-        hsla(0, 0%, 100%, 0.4)
-      ),
-      linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
-    background-repeat: no-repeat;
-    background-position: top, bottom;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-    pointer-events: none;
-  }
+
   &__bar {
     display: flex;
     height: 56px;
     align-items: center;
     justify-content: space-between;
-    padding: 15px;
+    padding: 0 15px;
+    font-size: 16px;
   }
   &__column {
     display: flex;
     position: relative;
+    height: 252px;
   }
   &__columnitem {
     width: 0;
@@ -44,7 +33,7 @@
     height: 100%;
   }
   &__left {
-    color: #fa2c19;
+    color: $picker-cancel-color;
     font-size: 16px;
   }
   &__button {
@@ -61,10 +50,73 @@
   }
   &__hairline {
     position: absolute;
-    height: 35px;
+    top: 108px;
+    height: 34px;
     width: 100%;
     border: 1px solid #d8d8d8;
     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: 36px;
+    z-index: 1;
+    transform-style: preserve-3d;
+
+    &-item {
+      display: block;
+      backface-visibility: hidden;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 36px;
+      line-height: 36px;
+      color: #808080;
+      font-size: 16px;
+
+      &-hidden {
+        visibility: hidden;
+        opacity: 0;
+      }
+    }
+  }
+
+  &-content {
+    display: block;
+    position: absolute;
+    top: 108px;
+    width: 100%;
+    height: 36px;
+    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: 36px;
+    line-height: 36px;
+    text-align: center;
+    font-size: 16px;
+  }
 }

package/dist/packages/progress/index.scss

@@ -11,13 +11,7 @@
       width: 30%;
       height: 100%;
       border-radius: 12px;
-      background: linear-gradient(
-        268deg,
-        rgba(250, 44, 25, 1) 0%,
-        rgba(250, 63, 25, 1) 44.59259259%,
-        rgba(250, 89, 25, 1) 83.40740741%,
-        rgba(250, 100, 25, 1) 100%
-      );
+      background: $progress-inner-background-color;
       -webkit-transition: all 0.4s;
       transition: all 0.4s;
       position: relative;
@@ -89,7 +83,7 @@
   }
   .nut-progress-insidetext {
     padding: 3px 5px 3px 6px;
-    background: rgba(250, 44, 25, 1);
+    background: $progress-insidetext-background;
     border-radius: 5px;
     position: absolute;
     transition: all 0.4s;