@nutui/nutui-react 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/packages/noticebar/noticebar.scss

@@ -1,16 +1,6 @@
-.nut-theme-dark {
-  .nut-noticebar-page {
-    background: $dark-background2;
-    color: $dark-color;
-  }
-
-  .nut-noticebar-vertical {
-    .horseLamp_list_item {
-      color: $dark-color;
-    }
-  }
-}
 .nut-noticebar {
+  width: 100%;
+
   .nut-noticebar-page {
     display: flex;
     padding: $noticebar-box-padding;
@@ -20,11 +10,14 @@
     align-items: center;
     background: $noticebar-background;
     color: $noticebar-color;
+
     &.wrapable {
       height: auto;
-      padding: $noticebar-wrapable-padding;
+      padding: $noticebar-wrap-padding;
+
       .wrap {
         height: auto;
+
         .content {
           position: relative;
           white-space: normal;
@@ -37,12 +30,14 @@
       position: relative;
       padding-right: 40px;
     }
+
     .left-icon {
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
       margin: $noticebar-lefticon-margin;
       background-size: 100% 100%;
     }
+
     .right-icon {
       display: flex;
       align-items: center;
@@ -50,6 +45,7 @@
       width: $noticebar-right-icon-width;
       margin: $noticebar-righticon-margin;
     }
+
     .wrap {
       display: flex;
       flex: 1;
@@ -58,9 +54,11 @@
       overflow: hidden;
       position: relative;
     }
+
     .content {
       position: absolute;
       white-space: nowrap;
+
       &.nut-ellipsis {
         max-width: 100%;
         white-space: nowrap;
@@ -68,13 +66,15 @@
         text-overflow: ellipsis;
       }
     }
-    // 只跑一次
+
     .play {
       animation: nut-notice-bar-play linear both running;
     }
+
     .play-infinite {
       animation: nut-notice-bar-play-infinite linear infinite both running;
     }
+
     .play-vertical {
       animation: nut-notice-bar-play-vertical linear infinite both running;
     }
@@ -91,14 +91,13 @@
       transform: translate3d(-100%, 0, 0);
     }
   }
-  // 垂直方向的滚动
+
   @keyframes nut-notice-bar-play-vertical {
     to {
       transform: translateY($noticebar-height);
     }
   }
 
-  // 纵向
   .nut-noticebar-vertical {
     position: relative;
     display: flex;
@@ -107,22 +106,47 @@
     font-size: $noticebar-font-size;
     overflow: hidden;
     padding: $noticebar-box-padding;
+    background: $noticebar-background;
+    color: $noticebar-color;
+
+    .left-icon {
+      height: $noticebar-left-icon-width;
+      min-width: $noticebar-left-icon-width;
+      margin: $noticebar-lefticon-margin;
+      background-size: 100% 100%;
+      display: flex;
+      align-self: center;
+    }
 
     .horseLamp_list {
       margin: 0;
       padding: 0;
       display: block;
       flex: 1;
+
       .horseLamp_list_item {
         display: flex;
         align-items: center;
         height: $noticebar-height;
+        width: 100%;
       }
     }
 
+    .nut-noticebar__inner {
+      display: flex;
+      height: 100%;
+      width: 100%;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+      flex-direction: column;
+    }
+
     .go {
       align-self: center;
       display: flex;
+      justify-content: center;
+      width: $noticebar-right-icon-width;
+      margin: $noticebar-righticon-margin;
     }
   }
 }

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;
+  line-height: $notify-line-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/numberkeyboard/numberkeyboard.scss

@@ -1,10 +1,12 @@
+
 .nut-numberkeyboard {
   width: $numberkeyboard-width;
   padding: $numberkeyboard-padding;
   background-color: $numberkeyboard-background-color;
   user-select: none;
+  background-color: $gray4;
 
-  .nut-numberkeyboard__header {
+  &__header {
     position: relative;
     display: flex;
     align-items: center;
@@ -15,11 +17,12 @@
     color: $numberkeyboard-header-color;
     font-size: $numberkeyboard-header-font-size;
 
-    .nut-numberkeyboard__header__tit {
+    &__title {
+      color: $title-color;
       display: inline-block;
     }
 
-    .nut-numberkeyboard__header__close {
+    &__close {
       position: absolute;
       display: block;
       right: 0;
@@ -32,22 +35,23 @@
     }
   }
 
-  .nut-numberkeyboard__body {
+  &__body {
     display: flex;
     padding: 6px 0 0 6px;
 
-    .nut-numberkeyboard__body__keys {
+    &__keys {
       display: flex;
       flex: 3;
       flex-wrap: wrap;
     }
 
-    .key-board-wrapper {
+    &__wrapper {
       position: relative;
       flex: 1;
       flex-basis: 33%;
       box-sizing: border-box;
       padding: 0 6px 6px 0;
+      background-color: $gray5;
 
       .key {
         display: flex;
@@ -57,48 +61,37 @@
         font-size: $numberkeyboard-key-font-size;
         line-height: $numberkeyboard-key-line-height;
         background-color: $numberkeyboard-key-background-color;
-        color: $numberkeyboard-key-font-size-color;
+        color: $numberkeyboard-key-font-color;
         border-radius: $numberkeyboard-key-border-radius;
         cursor: pointer;
+        &.active {
+          background-color: $numberkeyboard-key-active-background-color;
+        }
       }
-
-      .active {
-        background-color: $numberkeyboard-key-active-background-color;
-      }
-
-      img {
-        width: 30px;
-        height: 24px;
-      }
-    }
-
-    .key-board-wrapper-large {
-      flex-basis: 66%;
     }
+  }
 
-    .nut-numberkeyboard__sidebar {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-
-      .key-board-wrapper {
-        .key {
-          position: absolute;
-          top: 0;
-          right: 6px;
-          bottom: 6px;
-          left: 0;
-          height: auto;
-        }
+  &__sidebar {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
 
-        .finish {
-          font-size: $numberkeyboard-key-finish-font-size;
-          color: $numberkeyboard-key-finish-font-size-color;
-          background-color: $numberkeyboard-key-finish-background-color;
-        }
+    .nut-numberkeyboard__body__wrapper {
+      .key {
+        position: absolute;
+        top: 0;
+        right: 6px;
+        bottom: 6px;
+        left: 0;
+        height: auto;
+      }
 
-        .activeFinsh {
-          background-color: $numberkeyboard-key-activeFinsh-background-color;
+      .confirm {
+        font-size: $numberkeyboard-key-confirm-font-size;
+        color: $numberkeyboard-key-confirm-font-color;
+        background-color: $numberkeyboard-key-confirm-background-color;
+        &.active {
+          background-color: rgba(255, 0, 0, 0.7);
         }
       }
     }

package/dist/packages/overlay/overlay.scss

@@ -6,21 +6,34 @@
   height: 100%;
   background: $overlay-bg-color;
 }
+
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
-.overlay-fade-enter-active {
+
+.nut-overlay-fade-enter-active {
   animation: nut-fade-in;
+
+  .wrapper {
+    .content {
+      background-color: $overlay-content-bg-color;
+      color: $overlay-content-color;
+    }
+  }
 }
-.overlay-fade-leave-active {
+
+.nut-overlay-fade-leave-active {
   animation: nut-fade-out;
 }
-.first-render {
+
+.nut-overlay-first-render {
   display: none;
 }
-.hidden-render {
+
+.nut-overlay-hidden-render {
   display: none;
 }
+
 @keyframes nut-fade-in {
   0% {
     opacity: 0;

package/dist/packages/pagination/pagination.scss

@@ -2,15 +2,18 @@
   display: flex;
   font-size: $pagination-font-size;
   color: $pagination-color;
+
   &__contain {
     display: flex;
   }
+
   &__simple {
     height: 39px;
     width: 124px;
     line-height: 39px;
     text-align: center;
   }
+
   &__prev,
   &__item,
   &__next {
@@ -26,22 +29,28 @@
     border: $pagination-item-border-width solid $pagination-item-border-color;
     cursor: pointer;
   }
+
   &__prev,
   &__item {
     border-right: none;
   }
+
   &__prev,
   &__next {
     padding: $pagination-prev-next-padding;
   }
+
   .simple-border {
-    border-right: $pagination-item-border-width solid $pagination-item-border-color;
+    border-right: $pagination-item-border-width solid
+      $pagination-item-border-color;
   }
+
   .active {
     color: $white;
     border: none;
     background: $pagination-active-background-color;
   }
+
   .disabled {
     color: $pagination-disable-color;
     background-color: $pagination-disable-background-color;

package/dist/packages/picker/picker.scss

@@ -1,122 +1,148 @@
+
 .nut-picker {
-  background-color: #fff;
+  background-color: $background-color3;
   width: 100%;
-}
-.nut-picker__control {
-  display: flex;
-  height: 56px;
-  font-size: 16px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 15px;
-
-  .nut-picker__cancel-btn {
-    color: #fa2c19;
-  }
-  .nut-picker__title {
+
+  &__control {
+    display: flex;
+    height: 56px;
+    font-size: 16px;
+    align-items: center;
+    justify-content: space-between;
+    padding: $picker-bar-button-padding;
+  }
+
+  &__cancel-btn {
+    color: $picker-bar-cancel-color;
+    font-size: $picker-bar-cancel-font-size;
+  }
+
+  &__confirm-btn {
+    color: $picker-bar-ok-color;
+    font-size: $picker-bar-ok-font-size;
+  }
+
+  &__title {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     text-align: center;
+    color: $picker-bar-title-color;
+    font-size: $picker-bar-title-font-size;
+    font-weight: $picker-bar-title-font-weight;
   }
-}
-.nut-picker__panel {
-  display: flex;
-  position: relative;
 
-  .nut-picker-indicator {
+  &__panel {
+    display: flex;
+    position: relative;
+  }
+
+  &-indicator {
     position: absolute;
     top: 108px;
-    height: 36px;
+    height: $picker-item-height;
     width: 100%;
-    border-top: 1px solid #ececec;
-    border-bottom: 1px solid #ececec;
+    border: $picker-item-active-line-border;
+    border-left: 0;
+    border-right: 0;
+    color: $picker-item-text-color;
+    font-size: $picker-item-text-font-size;
     z-index: 3;
   }
-}
 
-.nut-picker-list {
-  flex: 1;
-  position: relative;
-  height: 252px;
-  overflow: hidden;
-  text-align: center;
-  .nut-picker-list-panel {
+  &-list {
+    flex: 1;
+    position: relative;
+    height: $picker-list-height;
+    overflow: hidden;
+    text-align: center;
+  }
+
+  &-list-panel {
     transform-style: preserve-3d;
   }
-  .nut-picker-mask {
+
+  &-mask {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    background-image: linear-gradient(
-        180deg,
-        rgba(255, 255, 255, 0.9),
-        rgba(255, 255, 255, 0.4)
-      ),
-      linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
+    background-image: $picker-mask-bg-img;
     background-position: top, bottom;
     background-size: 100% 108px;
     background-repeat: no-repeat;
     z-index: 3;
   }
 
-  .nut-picker-content,
-  .nut-picker-roller {
+  &-view-panel {
+    height: $picker-list-height;
+    flex-grow: 1;
+  }
+
+  &-content,
+  &-roller {
     position: absolute;
     top: 108px;
     width: 100%;
-    height: 36px;
+    height: $picker-item-height;
   }
-  .nut-picker-content {
+
+  &-content {
     background: #fff;
     z-index: 2;
     overflow: hidden;
   }
-  .nut-picker-item,
-  .nut-picker-roller-item {
+
+  &-item,
+  &-roller-item {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    height: 36px;
-    line-height: 36px;
-    color: #262626;
-    font-size: 14px;
+    height: $picker-item-height;
+    line-height: $picker-item-height;
+    color: $picker-item-text-color;
+    font-size: $picker-item-text-font-size;
     text-align: center;
   }
-  .nut-picker-item {
+
+  &-item {
     font-size: 16px;
     background: #fff;
   }
-  .nut-picker-roller {
+
+  &-roller {
     z-index: 1;
     transform-style: preserve-3d;
-    .nut-picker-roller-item {
-      backface-visibility: hidden;
-      -moz-backface-visibility: hidden;
-      -webkit-backface-visibility: hidden;
-      position: absolute;
-      top: 0;
-      width: 100%;
-      color: #262626;
-    }
-
-    .nut-picker-roller-item-tile {
-      display: block;
-      width: 100%;
-      height: 36px;
-      line-height: 36px;
-      color: #262626;
-      font-size: 14px;
-    }
-    .nut-picker-roller-item-hidden {
-      visibility: hidden;
-      opacity: 0;
-    }
   }
-}
-.nut-picker-placeholder {
-  height: 1px;
+
+  &-roller-item {
+    backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    color: $gray1;
+  }
+
+  &-roller-item-title {
+    display: block;
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    color: $gray1;
+    font-size: $picker-bar-title-font-size;
+  }
+
+  &-roller-item-hidden {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &-placeholder {
+    height: 1px;
+  }
 }