@nutui/nutui-react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/dist/packages/numberkeyboard/numberkeyboard.scss

@@ -1,39 +1,4 @@
 
-.nut-theme-dark {
-  .nut-numberkeyboard {
-    background-color: $dark5;
-
-    &__body {
-      background-color: $dark5;
-      color: $dark1;
-
-      .nut-numberkeyboard__body__keys,
-      .nut-numberkeyboard__sidebar {
-        .key-board-wrapper {
-          background-color: $dark5;
-
-          .key {
-            background-color: $dark4;
-            color: $dark1;
-          }
-        }
-      }
-    }
-
-    .nut-numberkeyboard__header {
-      .nut-numberkeyboard__header__tit {
-        color: $dark1;
-      }
-    }
-
-    &__header {
-      &__close {
-        color: $dark1 !important;
-      }
-    }
-  }
-}
-
 .nut-numberkeyboard {
   width: $numberkeyboard-width;
   padding: $numberkeyboard-padding;
@@ -41,7 +6,7 @@
   user-select: none;
   background-color: $gray4;
 
-  .nut-numberkeyboard__header {
+  &__header {
     position: relative;
     display: flex;
     align-items: center;
@@ -52,12 +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;
@@ -70,17 +35,17 @@
     }
   }
 
-  .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%;
@@ -99,47 +64,34 @@
         color: $numberkeyboard-key-font-color;
         border-radius: $numberkeyboard-key-border-radius;
         cursor: pointer;
-      }
-
-      .active {
-        background-color: $numberkeyboard-key-active-background-color;
-      }
-
-      img {
-        width: 30px;
-        height: 24px;
+        &.active {
+          background-color: $numberkeyboard-key-active-background-color;
+        }
       }
     }
+  }
 
-    .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-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 {
-          font-size: $numberkeyboard-key-finish-font-size;
-          color: $numberkeyboard-key-finish-font-color;
-          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,11 +6,14 @@
   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;
@@ -18,15 +21,19 @@
     }
   }
 }
-.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/picker/picker.scss

@@ -1,105 +1,28 @@
 
-.nut-theme-dark {
-  .nut-picker {
-    background-color: $dark6;
-
-    &__title {
-      color: $dark1;
-    }
-
-    &__confirm-btn {
-      color: $picker-ok-color;
-      cursor: pointer;
-    }
-
-    .nut-picker__control {
-      background-color: $dark10;
-    }
-
-    .nut-picker-indicator {
-      background-color: $dark7;
-      z-index: 0;
-      border-top: 1px solid $gray2;
-      border-bottom: 1px solid $gray2;
-    }
-
-    .nut-picker-mask {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-image: linear-gradient(
-          180deg,
-          rgba(31, 31, 31, 1),
-          rgba(31, 31, 31, 0.4)
-        ),
-        linear-gradient(0deg, rgba(31, 31, 31, 1), rgba(31, 31, 31, 0.4));
-      background-position: top, bottom;
-      background-size: 100% 108px;
-      background-repeat: no-repeat;
-      z-index: 3;
-    }
-
-    .nut-picker-list {
-      .nut-picker-roller {
-        &-item {
-          color: $white;
-
-          &-tile {
-            color: $white;
-          }
-        }
-      }
-    }
-
-    &-roller-mask {
-      background-image: linear-gradient(
-          180deg,
-          rgba(27, 27, 27, 0.9),
-          rgba(27, 27, 27, 0.4)
-        ),
-        linear-gradient(0deg, rgba(27, 27, 27, 0.9), rgba(27, 27, 27, 0.4));
-      background-repeat: no-repeat;
-      background-position: top, bottom;
-      background-size: 100% 108px;
-      z-index: 1;
-    }
-
-    &-content {
-      color: $dark1;
-    }
-
-    &-item {
-      color: $dark1;
-    }
-  }
-}
-
 .nut-picker {
   background-color: $background-color3;
   width: 100%;
-}
 
-.nut-picker__control {
-  display: flex;
-  height: 56px;
-  font-size: 16px;
-  align-items: center;
-  justify-content: space-between;
-  padding: $picker-bar-button-padding;
+  &__control {
+    display: flex;
+    height: 56px;
+    font-size: 16px;
+    align-items: center;
+    justify-content: space-between;
+    padding: $picker-bar-button-padding;
+  }
 
-  .nut-picker__cancel-btn {
-    color: $picker-cancel-color;
+  &__cancel-btn {
+    color: $picker-bar-cancel-color;
     font-size: $picker-bar-cancel-font-size;
   }
 
-  .nut-picker__confirm-btn {
-    color: $picker-ok-color;
+  &__confirm-btn {
+    color: $picker-bar-ok-color;
     font-size: $picker-bar-ok-font-size;
   }
 
-  .nut-picker__title {
+  &__title {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -109,13 +32,13 @@
     font-size: $picker-bar-title-font-size;
     font-weight: $picker-bar-title-font-weight;
   }
-}
 
-.nut-picker__panel {
-  display: flex;
-  position: relative;
+  &__panel {
+    display: flex;
+    position: relative;
+  }
 
-  .nut-picker-indicator {
+  &-indicator {
     position: absolute;
     top: 108px;
     height: $picker-item-height;
@@ -127,20 +50,20 @@
     font-size: $picker-item-text-font-size;
     z-index: 3;
   }
-}
 
-.nut-picker-list {
-  flex: 1;
-  position: relative;
-  height: $picker-list-height;
-  overflow: hidden;
-  text-align: center;
+  &-list {
+    flex: 1;
+    position: relative;
+    height: $picker-list-height;
+    overflow: hidden;
+    text-align: center;
+  }
 
-  .nut-picker-list-panel {
+  &-list-panel {
     transform-style: preserve-3d;
   }
 
-  .nut-picker-mask {
+  &-mask {
     position: absolute;
     top: 0;
     left: 0;
@@ -153,22 +76,27 @@
     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: $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;
@@ -179,41 +107,42 @@
     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: $gray1;
-    }
-
-    .nut-picker-roller-item-title {
-      display: block;
-      width: 100%;
-      height: 36px;
-      line-height: 36px;
-      color: $gray1;
-      font-size: $picker-bar-title-font-size;
-    }
-
-    .nut-picker-roller-item-hidden {
-      visibility: hidden;
-      opacity: 0;
-    }
+  &-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;
   }
-}
 
-.nut-picker-placeholder {
-  height: 1px;
+  &-roller-item-hidden {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &-placeholder {
+    height: 1px;
+  }
 }

package/dist/packages/popup/popup.scss

@@ -1,20 +1,4 @@
 
-.nut-theme-dark {
-  .nut-popup {
-    background: $dark6;
-  }
-
-  .nut-popup {
-    &__close-icon {
-      color: $dark1;
-    }
-  }
-
-  .nut-popup-slide-center-enter-done {
-    color: $dark1;
-  }
-}
-
 .nut-popup {
   position: fixed;
   max-height: 100%;

package/dist/packages/price/price.scss

@@ -2,6 +2,13 @@
   font-size: $font-size-3;
   display: inline;
   color: $primary-color;
+  &--line {
+    div {
+      text-decoration: line-through;
+      font-size: $price-line-font-size !important;
+      color: $price-line-color !important;
+    }
+  }
   &__symbol,
   &__integer,
   &__decimal {
@@ -9,6 +16,7 @@
   }
   &__symbol {
     font-size: $price-symbol-medium-size;
+    padding-right: $price-symbol-padding-right;
     &-large {
       font-size: $price-symbol-big-size;
     }

package/dist/packages/progress/progress.scss

@@ -1,30 +1,14 @@
-.nut-theme-dark {
-  .nut-progress {
-    &-text {
-      .nut-icon-checked {
-        color: rgba(38, 191, 38, 1) !important;
-      }
-    }
-  }
-}
-
 .nut-progress {
   display: flex;
   align-items: center;
   position: relative;
   width: 100%;
 
-  .nut-progress-text {
-    color: $progress-text-color;
-  }
-
   &-outer {
     flex: auto;
     border-radius: $progress-border-radius;
-
-    .nut-progress-text {
-      color: $progress-text-inner-color;
-    }
+    height: $progress-height;
+    background: $progress-background;
 
     .nut-progress-active:before {
       content: '';
@@ -38,33 +22,6 @@
     }
   }
 
-  &-small {
-    height: $progress-small-height;
-
-    .nut-progress-text {
-      font-size: $progress-small-font-size;
-      padding: $progress-small-padding;
-    }
-  }
-
-  &-base {
-    height: $progress-base-height;
-
-    .nut-progress-text {
-      font-size: $progress-base-font-size;
-      padding: $progress-base-padding;
-    }
-  }
-
-  &-large {
-    height: $progress-large-height;
-
-    .nut-progress-text {
-      font-size: $progress-large-font-size;
-      padding: $progress-large-padding;
-    }
-  }
-
   &-inner {
     height: 100%;
     display: flex;
@@ -72,26 +29,30 @@
     justify-content: center;
     transition: all 0.4s;
     border-radius: $progress-border-radius;
+    background: $progress-color;
   }
 
   &-text {
-    display: flex;
-    padding: $progress-text-padding;
-    font-size: $progress-text-font-size;
-    line-height: 1;
-    min-width: 35px;
-  }
-
-  &-insidetext {
-    position: absolute;
-    top: $progress-insidetext-position-top;
-    bottom: $progress-insidetext-position-bottom;
     display: flex;
     align-items: center;
-    min-width: 0px;
+    position: absolute;
+    top: $progress-text-position-top;
+    bottom: $progress-text-position-bottom;
     transition: all 0.4s;
     transform: translate(-50%);
-    border-radius: $progress-insidetext-border-radius;
+
+    &__inner {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      width: 100%;
+      color: $progress-text-color;
+      padding: $progress-text-padding;
+      border-radius: $progress-text-border-radius;
+      font-size: $progress-text-font-size;
+      line-height: 1;
+      background: $progress-text-background;
+    }
   }
 
   @keyframes progressActive {

package/dist/packages/pulltorefresh/pulltorefresh.scss

@@ -1,11 +1,3 @@
-.nut-theme-dark {
-  .nut-pulltorefresh {
-    &-head-content {
-      color: $dark1;
-    }
-  }
-}
-
 .nut-pulltorefresh {
   &-head {
     overflow: hidden;

package/dist/packages/radio/radio.scss

@@ -1,30 +1,4 @@
 
-.nut-theme-dark {
-  .nut-radio {
-    &__label {
-      color: $dark1;
-
-      &--disabled {
-        color: $dark2;
-      }
-    }
-
-    &__button {
-      background: $dark4;
-      color: $dark1;
-
-      &--active {
-        color: $primary-color;
-      }
-
-      &--disabled {
-        color: $dark2;
-        border: 1px solid $dark2;
-      }
-    }
-  }
-}
-
 .nut-radio {
   display: flex;
   align-items: center;
@@ -61,9 +35,14 @@
 
     &--disabled {
       color: $radio-label-disable-color;
-      border: none;
+      border: 1px solid $radio-button-background;
     }
   }
+  .nut-radio__button--active.nut-radio__button--disabled {
+    background: $radio-button-disabled-active-background;
+    color: $radio-button-disabled-active-color;
+    border: 1px solid $radio-button-disabled-active-border-color;
+  }
 
   &__label {
     margin-left: $radio-label-margin-left;
@@ -82,11 +61,13 @@
     font-size: $radio-icon-font-size;
   }
 
-  &__icon--unchecked {
-    color: $radio-icon-disable-color;
-  }
+  &__icon {
+    &--unchecked {
+      color: $radio-icon-disable-color;
+    }
 
-  &__icon--disable {
-    color: $radio-icon-disable-color2;
+    &--disable {
+      color: $radio-icon-disable-color2;
+    }
   }
 }