@nutui/nutui-react 1.4.5 → 1.4.6-beta.0

package/dist/packages/calendar/calendar.scss

@@ -1,11 +1,14 @@
+
 .nut-theme-dark {
   .nut-calendar {
     background: $dark5;
     color: $dark1;
+
     .nut-calendar-header {
       background: $dark5;
       color: $dark1;
     }
+
     .nut-calendar-content {
       .calendar-months-panel {
         .calendar-month-con {
@@ -18,6 +21,7 @@
         }
       }
     }
+
     .nut-calendar-footer {
       background: $dark5;
       color: $dark1;
@@ -48,12 +52,15 @@
   .nut-calendar-taro {
     height: 60vh;
   }
+
   .popup-box {
     height: 100%;
   }
+
   .nut-calendar-content {
     overflow-y: auto;
   }
+
   ::-webkit-scrollbar {
     display: none;
   }
@@ -77,6 +84,7 @@
       line-height: 22px;
       font-size: $calendar-sub-title-font;
     }
+
     .calendar-top-slot {
       height: $calendar-top-slot-height;
     }
@@ -103,15 +111,18 @@
     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;
@@ -144,6 +155,7 @@
 
       .calendar-month-con {
         overflow: hidden;
+
         .calendar-month-item {
           .calendar-month-day:nth-child(7n + 0),
           .calendar-month-day:nth-child(7n + 1) {
@@ -174,6 +186,7 @@
             font-size: 12px;
             line-height: 14px;
           }
+
           .calendar-day-tip {
             position: absolute;
             bottom: 6px;
@@ -182,9 +195,11 @@
             line-height: 14px;
             color: $calendar-primary-color;
           }
+
           .calendar-curr-tips-top {
             top: 6px;
           }
+
           .calendar-curr-tips-bottom {
             bottom: 6px;
           }
@@ -197,9 +212,11 @@
             .calendar-curr-tips {
               visibility: hidden;
             }
+
             .calendar-curr-tip-curr {
               visibility: hidden;
             }
+
             .calendar-day-tip {
               color: $white;
             }
@@ -242,6 +259,7 @@
     }
   }
 }
-.nutui-popup__close-icon {
+
+.nut-popup__close-icon {
   top: 7px !important;
 }

package/dist/packages/fixednav/fixednav.scss

@@ -32,7 +32,7 @@
     position: absolute;
     right: 0;
 
-    z-index: $fixednav-index + 1;
+    z-index: $fixednav-index;
     width: 80px;
     padding-left: 12px;
     height: 100%;

package/dist/packages/image/image.scss

@@ -35,6 +35,7 @@
     align-items: center;
     justify-content: center;
     background: #f7f8fa;
+    background-size: 100% 100%;
   }
   .nut-img-error {
     width: 100%;
@@ -47,5 +48,6 @@
     align-items: center;
     justify-content: center;
     background: #f7f8fa;
+    background-size: 100% 100%;
   }
 }

package/dist/packages/input/input.scss

@@ -54,18 +54,9 @@ textarea {
     border: 0;
     text-decoration: none;
   }
-  //   &-label {
-  //     width: 80px;
-  //     overflow: hidden;
-  //     text-align: left;
-  //     display: flex;
-  //     .label-string {
-  //       overflow: hidden;
-  //       white-space: nowrap;
-  //       text-overflow: ellipsis;
-  //       color: $gray1;
-  //     }
-  //   }
+  .label-string {
+    color: $gray1;
+  }
   &__clear {
     width: 16px;
     height: 16px;
@@ -113,11 +104,6 @@ textarea {
     vertical-align: middle;
   }
   &-right-mark {
-    // .nut-input-value {
-    //   display: flex;
-    //   align-items: center;
-    //   justify-content: space-between;
-    // }
     .nut-input-main-con {
       display: flex;
       align-items: center;
@@ -159,7 +145,6 @@ textarea {
     margin-top: 4px;
     color: #808080;
     font-size: 12px;
-    // line-height: var(--van-field-word-limit-line-height);
   }
   &-left-icon,
   &-right-icon {

package/dist/packages/notify/notify.scss

@@ -1,22 +1,3 @@
-.popup-top {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  overflow-y: auto;
-  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;
-}
-
 /*入场动画开始*/
 .fade-enter {
   opacity: 0;
@@ -59,6 +40,7 @@
   opacity: 1;
   transition: opacity 1s;
 }
+
 .nut-notify {
   box-sizing: border-box;
   padding: $notify-padding;
@@ -68,9 +50,31 @@
   text-align: center;
   word-wrap: break-word;
   height: $notify-height;
+
+  &--popup-top {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    overflow-y: auto;
+    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;
+  }
+
   &--base {
     background: $notify-base-background-color;
   }
+
   &--primary {
     background: $notify-primary-background-color;
   }

package/dist/packages/popup/popup.scss

@@ -1,79 +1,86 @@
+
 .nut-theme-dark {
   .nut-popup {
     background: $dark6;
   }
-  .nutui-popup {
+
+  .nut-popup {
     &__close-icon {
       color: $dark1;
     }
   }
-  .popup-slide-center-enter-done {
+
+  .nut-popup-slide-center-enter-done {
     color: $dark1;
   }
 }
 
-.popup-slide {
-  &-center-enter,
-  &-center-exit {
-    opacity: 0;
-  }
-  &-center-enter-active {
-    opacity: 1;
-    transition: opacity 0.5s ease;
-  }
+.nut-popup {
+  position: fixed;
+  max-height: 100%;
+  overflow-y: auto;
+  background-color: $white;
+  color: $gray1;
+  -webkit-overflow-scrolling: touch;
 
-  &-top-enter,
-  &-top-exit {
-    transform: translate(0, -100%);
-  }
-  &-top-enter-active {
-    transform: translate(0, 0);
-  }
+  &__close-icon {
+    position: absolute !important;
+    z-index: 1;
+    color: #969799;
+    font-size: 18px;
+    cursor: pointer;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
 
-  &-right-enter,
-  &-right-exit {
-    transform: translate(100%, 0);
-  }
-  &-right-enter-active {
-    transform: translate(0, 0);
-  }
+    &:active {
+      opacity: 0.7;
+    }
 
-  &-bottom-enter,
-  &-bottom-exit {
-    transform: translate(0, 100%);
-  }
-  &-bottom-enter-active {
-    transform: translate(0, 0);
-  }
+    &--top-left {
+      top: $popup-close-icon-margin;
+      left: $popup-close-icon-margin;
+    }
 
-  &-left-enter,
-  &-left-exit {
-    transform: translate(-100%, 0);
-  }
-  &-left-enter-active {
-    transform: translate(0, 0);
+    &--top-right {
+      top: $popup-close-icon-margin;
+      right: $popup-close-icon-margin;
+    }
+
+    &--bottom-left {
+      bottom: $popup-close-icon-margin;
+      left: $popup-close-icon-margin;
+    }
+
+    &--bottom-right {
+      right: $popup-close-icon-margin;
+      bottom: $popup-close-icon-margin;
+    }
   }
 }
 
-.popup-center {
+.nut-popup-center {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+
   &.round {
     border-radius: $popup-border-radius;
   }
 }
 
-.popup-bottom {
+.nut-popup-bottom {
   bottom: 0;
   left: 0;
   width: 100%;
+
   &.round {
     border-radius: $popup-border-radius $popup-border-radius 0 0;
   }
 }
 
-.popup-right {
+.nut-popup-right {
   top: 0;
   right: 0;
 
@@ -82,7 +89,7 @@
   }
 }
 
-.popup-left {
+.nut-popup-left {
   top: 0;
   left: 0;
 
@@ -91,7 +98,7 @@
   }
 }
 
-.popup-top {
+.nut-popup-top {
   top: 0;
   left: 0;
   width: 100%;
@@ -101,64 +108,94 @@
   }
 }
 
-.nut-popup {
-  position: fixed;
-  max-height: 100%;
-  overflow-y: auto;
-  background-color: $white;
-  color: $gray1;
-  transition: transform 0.5s;
-  -webkit-overflow-scrolling: touch;
-}
+.nut-popup-slide {
+  &-center-enter,
+  &-center-exit {
+    opacity: 0;
+  }
 
-.nut-overflow-hidden {
-  overflow: hidden !important;
-}
+  &-center-enter-active {
+    opacity: 1;
+    transition: opacity 0.5s ease;
+  }
 
-.nutui-popup {
-  &__close-icon {
-    position: absolute !important;
-    z-index: 1;
-    color: #969799;
-    font-size: 18px;
-    cursor: pointer;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    text-align: center;
+  &-top-enter {
+    transform: translate(0, -100%);
+  }
 
-    &:active {
-      opacity: 0.7;
-    }
+  &-top-enter-active {
+    transform: translate(0, 0);
+    transition: transform 0.5s;
+  }
 
-    &--top-left {
-      top: $popup-close-icon-margin;
-      left: $popup-close-icon-margin;
-    }
+  &-top-exit {
+    transform: translate(0, 0);
+  }
 
-    &--top-right {
-      top: $popup-close-icon-margin;
-      right: $popup-close-icon-margin;
-    }
+  &-top-exit-active,
+  &-top-exit-done {
+    transform: translate(0, -100%);
+    transition: transform 0.5s;
+  }
 
-    &--bottom-left {
-      bottom: $popup-close-icon-margin;
-      left: $popup-close-icon-margin;
-    }
+  &-right-enter {
+    transform: translate(100%, 0);
+  }
 
-    &--bottom-right {
-      right: $popup-close-icon-margin;
-      bottom: $popup-close-icon-margin;
-    }
+  &-right-enter-active {
+    transform: translate(0, 0);
+    transition: transform 0.5s;
   }
-}
 
-.fade-enter {
-  transform: translate(0, -100%);
-}
-.fade-enter-active {
-  transform: translate(0, 0);
+  &-right-exit {
+    transform: translate(0, 0);
+  }
+
+  &-right-exit-active,
+  &-right-exit-done {
+    transform: translate(100%, 0);
+    transition: transform 0.5s;
+  }
+
+  &-bottom-enter {
+    transform: translate(0, 100%);
+  }
+
+  &-bottom-enter-active {
+    transform: translate(0, 0);
+    transition: transform 0.5s;
+  }
+
+  &-bottom-exit {
+    transform: translate(0, 0);
+  }
+
+  &-bottom-exit-active,
+  &-bottom-exit-done {
+    transform: translate(0, 100%);
+    transition: transform 0.5s;
+  }
+
+  &-left-enter {
+    transform: translate(-100%, 0);
+  }
+
+  &-left-enter-active {
+    transform: translate(0, 0);
+    transition: transform 0.5s;
+  }
+
+  &-left-exit {
+    transform: translate(0, 0);
+  }
+
+  &-left-exit-active,
+  &-left-exit-done {
+    transform: translate(-100%, 0);
+    transition: transform 0.5s;
+  }
 }
-.fade-exit {
-  transform: translate(0, -100%);
+
+.nut-overflow-hidden {
+  overflow: hidden !important;
 }

package/dist/packages/searchbar/searchbar.scss

@@ -48,15 +48,13 @@
     align-items: center;
     justify-content: center;
     height: $searchbar-input-height;
+    background: $searchbar-input-background;
   }
   &__icon {
-    position: absolute !important;
-  }
-  &__leftin-icon {
-    left: 10px;
+    padding: 0 5px 0 10px;
   }
   &__rightin-icon {
-    right: 5px;
+    padding: 0 5px;
   }
   .nut-searchbar__input-box {
     display: flex;
@@ -69,12 +67,13 @@
     box-sizing: border-box;
     width: $searchbar-input-width;
     height: $searchbar-input-height;
+    line-height: $searchbar-input-height;
     width: 100%;
     padding: $searchbar-input-padding;
     border-radius: 0;
     font-size: $font-size-small;
-    background: $searchbar-input-background;
     color: $searchbar-input-text-color;
+    background: transparent;
   }
   &__round {
     border-radius: $searchbar-input-border-radius;
@@ -83,9 +82,7 @@
     cursor: not-allowed;
   }
   &__clear {
-    position: absolute !important;
-    z-index: 888;
-    right: 8px;
+    padding: 0 10px 0 5px;
     i {
       color: $gray1 !important;
     }
@@ -118,14 +115,3 @@
     margin-left: 10px;
   }
 }
-.nut-searchbar-taro {
-  .nut-searchbar__leftin-icon {
-    //top: 41%;
-  }
-  .nut-searchbar__rightin-icon {
-    top: 41%;
-  }
-  .nut-searchbar__clear {
-    top: 33%;
-  }
-}

package/dist/packages/sticky/sticky.scss

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

package/dist/packages/tag/tag.scss

@@ -1,6 +1,11 @@
 .nut-tag {
   padding: 0 4px;
-  border-radius: 4px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: $tag-font-size;
+  border-radius: $tag-default-border-radius;
+  height: $tag-height;
   ._icon {
     vertical-align: middle;
     margin-left: 4px;