@nutui/nutui-react 2.0.0-alpha.8 → 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/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;
-    }
   }
 }