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

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/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;
+    }
   }
 }

package/dist/packages/radiogroup/radiogroup.scss

@@ -1,51 +1,13 @@
-.nut-theme-dark {
-  .nut-radiogroup {
-    &--vertical {
-      .nut-radio {
-        &__label {
-          margin-right: 5px;
-        }
-
-        &__button {
-          background-color: $dark4;
-          border: 1px solid $dark6;
-        }
-
-        &__button--active {
-          border-color: $radio-label-button-border-color;
-        }
-      }
-    }
-
-    &--horizontal {
-      .nut-radio {
-        &__label {
-          margin-right: 5px;
-        }
-
-        &__button {
-          background-color: $dark4;
-          border: 1px solid $dark6;
-        }
-
-        &__button--active {
-          border-color: $radio-label-button-border-color;
-        }
-      }
-    }
-  }
-}
-
 .nut-radiogroup {
   .nut-radio {
-    margin-bottom: 5px;
+    margin: $radiogroup-radio-margin;
 
     &__label {
-      margin-right: 5px;
+      margin: $radiogroup-radio-label-margin;
     }
 
     &__button {
-      background-color: $gray4;
+      background-color: $radio-button-background;
     }
   }
 
@@ -56,12 +18,8 @@
         justify-content: space-between;
       }
 
-      &__label {
-        margin-right: 5px;
-      }
-
       &__button {
-        border: 1px solid $gray6;
+        border: 1px solid $radio-button-background;
       }
 
       &__button--active {
@@ -74,13 +32,21 @@
   &--horizontal {
     .nut-radio {
       display: inline-flex;
-      margin-right: 20px;
 
-      &--round {
-        .nut-radio__label {
-          margin: 0 6px;
-        }
+      &__button {
+        border: 1px solid $gray6;
+      }
+
+      &__button--active {
+        border-color: $radio-label-button-border-color;
+        background-color: $radio-label-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;
+  }
 }