@nutui/nutui 3.1.15 → 3.1.17-beta.0

package/dist/packages/calendaritem/index.scss

@@ -2,52 +2,49 @@
   position: relative;
   display: flex;
   flex: 1;
-  height: 518px;
-  padding-top: 132px;
-  padding-bottom: 78px;
-  color: $calendar-base-color;
-  font-size: $calendar-base-font;
-  background-color: $white;
+  color: #333333;
+  font-size: 16px;
+  background-color: #fff;
   overflow: hidden;
-
+  height: 100%;
+  flex-direction: column;
   &.nut-calendar-tile {
-    height: 100%;
-    padding-top: 46px;
-    padding-bottom: 0;
-
     .nut-calendar-header {
       .calendar-title {
         font-size: $calendar-base-font;
       }
     }
   }
-
-  &.nut-calendar-nofooter {
-    padding-bottom: 0;
+  .nut-calendar-taro {
+    height: 60vh;
+  }
+  .popup-box {
+    height: 100%;
+  }
+  .nut-calendar-content {
+    overflow-y: auto;
+  }
+  ::-webkit-scrollbar {
+    display: none;
   }
 
   // 头部导航
   .nut-calendar-header {
-    position: absolute;
-    top: -1px;
-    left: 0;
-    right: 0;
     display: flex;
     flex-direction: column;
     text-align: center;
     padding-top: 1px;
     background-color: $white;
-    z-index: 1;
 
     .calendar-title {
-      padding-top: 22px;
       font-size: $calendar-title-font;
-      line-height: 25px;
-      border-radius: 12px 12px 0 0;
+      line-height: 44px;
+    }
+    .calendar-top-slot {
+      height: 24px;
     }
-
     .calendar-curr-month {
-      padding: 10px 0 7px;
+      padding: 7px 0;
       line-height: 22px;
     }
 
@@ -55,7 +52,8 @@
       display: flex;
       align-items: center;
       justify-content: space-around;
-      height: 46px;
+      height: 36px;
+      border-radius: 0px 0px 12px 12px;
       box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
 
       .calendar-week-item {
@@ -70,13 +68,17 @@
   // 月份
   .nut-calendar-content {
     flex: 1;
-
+    width: 100%;
+    display: block;
     .calendar-months-panel {
       position: relative;
       width: 100%;
       height: auto;
       display: block;
-
+      box-sizing: border-box;
+      .viewArea {
+        display: block;
+      }
       .calendar-month {
         display: flex;
         flex-direction: column;
@@ -109,14 +111,12 @@
 
       .calendar-month-con {
         overflow: hidden;
-
         .calendar-month-item {
           .calendar-month-day:nth-child(7n + 0),
           .calendar-month-day:nth-child(7n + 1) {
             color: $calendar-primary-color;
           }
         }
-
         .calendar-month-day {
           float: left;
           width: 14.28%;
@@ -127,24 +127,43 @@
           flex-direction: column;
           position: relative;
 
-          .calendar-curr-tips,
+          .calendar-curr-tips {
+            position: absolute;
+            width: 100%;
+          }
+
+          .calendar-curr-tip-curr {
+            position: absolute;
+            bottom: 6px;
+            width: 100%;
+            font-size: 12px;
+            line-height: 14px;
+          }
           .calendar-day-tip {
             position: absolute;
-            top: 10px;
+            bottom: 6px;
             width: 100%;
-            font-size: 11px;
-            line-height: 12px;
+            font-size: 12px;
+            line-height: 14px;
             color: $calendar-primary-color;
           }
-
+          .calendar-curr-tips-top {
+            top: 6px;
+          }
+          .calendar-curr-tips-bottom {
+            bottom: 6px;
+          }
           &-active {
             background-color: $calendar-primary-color;
             color: $white !important;
 
             .calendar-curr-tips {
+              // color: $white !important;
+              visibility: hidden;
+            }
+            .calendar-curr-tip-curr {
               visibility: hidden;
             }
-
             .calendar-day-tip {
               color: $white;
             }
@@ -159,7 +178,7 @@
           }
 
           .calendar-day {
-            padding: 4px 0;
+            padding: 2px 0;
             font-size: $calendar-day-font;
           }
         }
@@ -169,19 +188,15 @@
 
   // 底部导航
   .nut-calendar-footer {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -1px;
     display: flex;
-    height: 78px;
+    height: 62px;
     width: 100%;
     background-color: $white;
 
     .calendar-confirm-btn {
       height: 44px;
       width: 100%;
-      margin: 14px 18px;
+      margin: 10px 18px;
       border-radius: 22px;
       background: $button-primary-background-color;
       color: $white;

package/dist/packages/elevator/index.scss

@@ -33,6 +33,9 @@
         padding: 0 20px;
         height: 30px;
         line-height: 30px;
+        &--highcolor {
+          color: $elevator-list-item-highcolor;
+        }
       }
     }
   }

package/dist/packages/icon/index.scss

@@ -23,11 +23,11 @@
   &-loading,
   &-loading1 {
     display: inline-block;
-    animation: rotate 1s infinite linear;
+    animation: rotation 1s infinite linear;
   }
 
   --animate-duration: 1s;
-  --animate-delay: 1s;
+  --animate-delay: 0s;
 
   &-am-infinite {
     -webkit-animation-iteration-count: infinite;

package/dist/packages/infiniteloading/index.scss

@@ -29,7 +29,7 @@
     width: 100%;
     padding-top: 16px;
     font-size: $font-size-small;
-    color: $infinite-bottom-color;
+    color: $infiniteloading-bottom-color;
     text-align: center;
 
     .bottom-box {

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;
@@ -17,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/menuitem/index.scss

@@ -34,7 +34,7 @@
 .nut-menu__pop {
   transition: all 0 ease 0;
   transform: none;
-  top: auto !important;
+  // top: auto !important;
 }
 
 .placeholder-element {

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/picker/index.scss

@@ -1,4 +1,9 @@
 .nut-picker {
+  color: #f00;
+
+  view {
+    display: block;
+  }
   &__content {
     display: block;
     position: relative;
@@ -8,31 +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;
@@ -57,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/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,7 +33,7 @@
     position: relative;
     width: 100%;
     height: 100%;
-    background: $rang-bar-bg-color;
+    background: $range-bar-bg-color;
     border-radius: inherit;
     transition: all 0.2s;
   }
@@ -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/tabbar/index.scss

@@ -11,14 +11,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);
   }
 }