@nutui/nutui-react 2.0.0-alpha.7 → 2.0.0-alpha.9

package/dist/packages/imagepreview/imagepreview.scss

@@ -46,6 +46,11 @@
   display: flex;
   align-items: center;
 }
+.nut-imagepreview-swiper {
+  swiper {
+    width: 100%;
+  }
+}
 .nut-imagepreview-swiper .nut-swiper-item {
   height: 327px;
 }

package/dist/packages/notify/notify.scss

@@ -50,7 +50,7 @@
   text-align: center;
   word-wrap: break-word;
   height: $notify-height;
-
+  line-height: $notify-line-height;
   &--popup-top {
     position: fixed;
     top: 0;

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

package/dist/packages/range/range.scss

@@ -1,34 +1,13 @@
-
-.nut-theme-dark {
-  .nut-range-container {
-    background: $dark5;
-    .min,
-    .max {
-      color: $dark1;
-    }
-    .nut-range {
-      &-mark-text {
-        color: $dark2;
-      }
-      &-button {
-        .number {
-          color: $dark1;
-        }
-      }
-    }
-  }
-}
-
 .nut-range-container {
   display: flex;
   position: relative;
   width: 100%;
-  height: 4px;
+  height: $range-height;
   align-items: center;
   .min,
   .max {
     font-size: $font-size-1;
-    color: $range-tip-font-color;
+    color: $range-font-color;
     user-select: none;
   }
   &-vertical {
@@ -36,7 +15,7 @@
     flex-direction: column;
     padding: 0px 15px;
     .nut-range {
-      width: 4px;
+      width: $range-height;
       height: 100%;
       &-button {
         &-wrapper,
@@ -60,7 +39,7 @@
         transform: translate3d(100%, 0, 0);
       }
       &-vertical {
-        margin: 10px 0px;
+        margin: $range-margin 0px;
       }
       &-mark {
         position: absolute;
@@ -84,11 +63,6 @@
         word-break: keep-all;
         user-select: none;
         transform: translateY(-50%);
-        &-active {
-          .nut-range-tick {
-            background: $range-bar-bg-color;
-          }
-        }
       }
       &-tick {
         position: absolute;
@@ -98,7 +72,11 @@
         height: 11px;
         margin-left: -0px;
         border-radius: 50%;
-        background-color: $range-bg-color-tick;
+        background: $range-inactive-color;
+
+        &.active {
+          background: $range-active-color;
+        }
       }
     }
   }
@@ -107,8 +85,9 @@
   display: block;
   position: relative;
   width: 100%;
-  height: 4px;
-  background-color: $range-bg-color;
+  height: $range-height;
+  margin: 0 $range-margin;
+  background-color: $range-inactive-color;
   border-radius: 2px;
   cursor: pointer;
   &::before {
@@ -125,19 +104,19 @@
     position: relative;
     width: 100%;
     height: 100%;
-    background: $range-bar-bg-color;
+    background: $range-active-color;
     border-radius: inherit;
     transition: all 0.2s;
   }
 
   &-button {
     display: block;
-    width: $range-bar-btn-width;
-    height: $range-bar-btn-height;
-    background-color: $range-bar-btn-bg-color;
+    width: $range-button-width;
+    height: $range-button-height;
+    background: $range-button-background;
     border-radius: 50%;
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-    border: $range-bar-btn-border;
+    border: $range-button-border;
     outline: none;
 
     &-wrapper,
@@ -169,7 +148,7 @@
       justify-content: center;
       user-select: none;
       font-size: $font-size-1;
-      color: $range-tip-font-color;
+      color: $range-font-color;
       transform: translate3d(0, -100%, 0);
     }
   }
@@ -183,9 +162,6 @@
       cursor: not-allowed;
     }
   }
-  &-show-number {
-    margin: 0 15px;
-  }
 
   &-mark {
     position: absolute;
@@ -205,20 +181,19 @@
     word-break: keep-all;
     user-select: none;
     transform: translateX(-50%);
-    &-active {
-      .nut-range-tick {
-        background: $range-bar-bg-color;
-      }
-    }
   }
+
   &-tick {
     position: absolute;
     top: -20px;
     width: 11px;
     height: 11px;
-    // margin-left: -11px;
     left: 0px;
     border-radius: 50%;
-    background-color: $range-bg-color-tick;
+    background: $range-inactive-color;
+
+    &.active {
+      background: $range-active-color;
+    }
   }
 }

package/dist/packages/swiper/swiper.scss

@@ -24,17 +24,6 @@
     left: 50%;
     bottom: $swiper-pagination-bottom;
     transform: translateX(-50%);
-
-    i {
-      width: $swiper-pagination-item-width;
-      height: $swiper-pagination-item-height;
-      margin-right: $swiper-pagination-item-margin-right;
-      border-radius: $swiper-pagination-item-border-radius;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
   }
 
   &__pagination-vertical {
@@ -45,9 +34,5 @@
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     transform: translateY(-50%);
-
-    i {
-      margin-bottom: 5px;
-    }
   }
 }