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

package/dist/packages/range/range.scss

@@ -1,34 +1,13 @@
-
-.nut-theme-dark {
-  .nut-range-container {
-    background: $dark-background;
-    .min,
-    .max {
-      color: $dark-color-gray;
-    }
-    .nut-range {
-      &-mark-text {
-        color: $dark-color-gray;
-      }
-      &-button {
-        .number {
-          color: $dark-color;
-        }
-      }
-    }
-  }
-}
-
 .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/rate/rate.scss

@@ -1,21 +1,48 @@
-
 .nut-rate {
   display: flex;
+
+  &.disabled {
+    .nut-rate-item__icon {
+      cursor: not-allowed;
+    }
+  }
+
+  &.readonly {
+    .nut-rate-item__icon {
+      cursor: default;
+    }
+  }
+
   &-item {
     display: flex;
     flex-shrink: 0;
     position: relative;
+    margin-right: $rate-item-margin;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &__half {
+      position: absolute;
+      height: 100%;
+      width: 50% !important;
+      left: 0;
+      top: 0;
+      overflow: hidden;
+    }
 
     &__icon {
       color: $rate-icon-color;
       cursor: pointer;
+
       &--disabled {
         color: $rate-icon-void-color;
       }
 
       &.nut-rate-item__icon.nut-rate-item__icon--half {
         position: absolute;
-        width: 50% !important;
+        // width: 50% !important;
         left: 0;
         top: 0;
         overflow: hidden;
@@ -28,9 +55,5 @@
         transform: none;
       }
     }
-
-    &:last-child {
-      margin-right: 0;
-    }
   }
 }

package/dist/packages/row/row.scss

@@ -1,19 +1,7 @@
-.flex-content {
-  line-height: $row-content-line-height;
-  color: $row-content-color;
-  text-align: center;
-  border-radius: $row-content-border-radius;
-  background: $row-content-background-color;
-  &.flex-content-light {
-    background: $row-content-light-background-color;
-  }
-  &.flex-content-height {
-    height: $row-content-height;
-  }
-}
 .nut-row {
   width: 100%;
   overflow: hidden;
+
   &:after {
     display: block;
     height: 0;
@@ -24,41 +12,53 @@
 
   &-flex {
     display: flex;
+
     &:after {
       display: none;
     }
+
     .nut-col {
       float: none;
     }
   }
+
   &-justify-center {
     justify-content: center;
   }
+
   &-justify-end {
     justify-content: flex-end;
   }
+
   &-justify-space-between {
     justify-content: space-between;
     align-items: center;
   }
+
   &-justify-space-around {
     justify-content: space-around;
   }
+
   &-align-flex-start {
     align-items: flex-start;
   }
+
   &-align-center {
     align-items: center;
   }
+
   &-align-flex-end {
     align-items: flex-end;
   }
+
   &-flex-wrap {
     flex-wrap: wrap;
   }
+
   &-flex-nowrap {
     flex-wrap: nowrap;
   }
+
   &-flex-reverse {
     flex-wrap: wrap-reverse;
   }

package/dist/packages/searchbar/searchbar.scss

@@ -1,106 +1,87 @@
-.nut-theme-dark {
-  .nut-searchbar {
-    background: $black;
-    &__search-label {
-      color: $white;
-    }
-    .nut-searchbar__input-clear {
-      & .nut-searchbar__nut-icon-mask-close {
-        color: $white;
-        &:hover {
-          cursor: pointer;
-          color: $white;
-        }
-      }
-    }
-    &__right-search-icon,
-    &__left-search-icon {
-      color: $white;
-    }
-  }
-}
-.val-text {
-  font-size: 12px;
-  color: $title-color2;
-  padding: 0 20px;
-}
 .nut-searchbar {
-  position: relative;
   display: flex;
   align-items: center;
   width: $searchbar-width;
   padding: $searchbar-padding;
   background: $searchbar-background;
+  color: $gray1;
   box-sizing: border-box;
+  justify-content: center;
+
   &__content {
     position: relative;
     flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: $searchbar-input-height;
+    background: $searchbar-input-background;
+    border-radius: $searchbar-content-border-radius;
   }
+
   &__icon {
-    position: absolute !important;
-    z-index: 888;
-    transform: translate(-50%, -50%);
-    width: 15px;
-    overflow: hidden;
+    padding: 0 5px 0 10px;
   }
-  &__leftin-icon {
-    left: 15px;
-    top: 53%;
-  }
-  &__rightin-icon {
-    right: 5px;
-    top: 53%;
+
+  &__rightin {
+    display: flex;
+    padding: 0 5px;
   }
-  &__input {
+
+  &__input-box {
     display: flex;
     align-items: center;
+    flex: 1;
+  }
+
+  &__input {
+    border: 0;
+    outline: 0;
+    box-sizing: border-box;
     width: $searchbar-input-width;
     height: $searchbar-input-height;
-    flex: 1;
+    line-height: $searchbar-input-height;
+    width: 100%;
     padding: $searchbar-input-padding;
     border-radius: 0;
     font-size: $font-size-small;
-    // box-shadow: $searchbar-input-box-shadow;
-    background: $searchbar-input-background;
+    color: $searchbar-input-text-color;
+    caret-color: $searchbar-input-curror-color;
+    background: transparent;
+    text-align: $searchbar-input-text-align;
   }
+
   &__round {
     border-radius: $searchbar-input-border-radius;
   }
+
   &__disabled {
     cursor: not-allowed;
   }
+
   &__clear {
-    position: absolute !important;
-    z-index: 888;
-    right: 3px;
-    top: 47%;
-    transform: translate(-50%, -40%);
+    padding: $searchbar-clear-icon-padding;
+
+    i {
+      color: $gray1 !important;
+    }
   }
+
   .pos-right {
     right: 40px;
   }
+
   &__left {
-    text-align: left;
+    display: flex;
+    padding: $searchbar-left-padding;
+    font-size: $searchbar-left-fontsize;
+    color: $searchbar-left-color;
   }
+
   &__right {
-    text-align: right;
-  }
-  &__center {
-    text-align: center;
-  }
-  &__label,
-  &__action-text {
-    padding: 0 8px 0 0;
-    font-size: 12px;
-    color: $searchbar-action-text-color;
-  }
-  &__action-text {
-    padding: 0 0 0 8px;
-  }
-  &__leftout-icon {
-    margin-right: 10px;
-  }
-  &__rightout-icon {
-    margin-left: 10px;
+    display: flex;
+    padding: $searchbar-right-padding;
+    font-size: $searchbar-right-fontsize;
+    color: $searchbar-right-color;
   }
 }

package/dist/packages/shortpassword/shortpassword.scss

@@ -1,3 +1,4 @@
+
 .nut-shortpassword {
   &__title {
     line-height: 1;
@@ -5,7 +6,7 @@
     color: $title-color;
   }
 
-  &__subtitle {
+  &__description {
     margin-top: 12px;
     margin-bottom: 24px;
     line-height: 1;
@@ -27,6 +28,7 @@
       outline: 0 none;
       border: 0;
       text-decoration: none;
+      z-index: -99;
     }
 
     &-site {
@@ -41,9 +43,9 @@
       height: 41px;
       margin: 0 auto;
       box-sizing: border-box;
-      background: $shortpsd-background-color;
+      background: $shortpassword-background-color;
       border-radius: 4px;
-      border: 1px solid $shortpsd-border-color;
+      border: 1px solid $shortpassword-border-color;
       display: flex;
       position: absolute;
       left: 0;
@@ -74,13 +76,13 @@
     &__error {
       line-height: 1;
       font-size: $font-size-0;
-      color: $shortpsd-error;
+      color: $shortpassword-error;
     }
 
     &__forget {
       line-height: 1;
       font-size: $font-size-1;
-      color: $shortpsd-forget;
+      color: $shortpassword-forget;
       display: flex;
       align-items: center;
     }
@@ -102,12 +104,16 @@
     }
 
     &__sure {
-      background: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%);
+      background: linear-gradient(
+        135deg,
+        $primary-color 0%,
+        $primary-color-end 100%
+      );
       border-radius: 15px;
       padding: 8px 38px;
       line-height: 1;
       font-size: $font-size-2;
-      color: $white;
+      color: $primary-text-color;
     }
   }
 }

package/dist/packages/sidenavbar/sidenavbar.scss

@@ -1,11 +1,12 @@
-$nutSidenavbarItemHeight: 40px;
+
 .nut-sidenavbar {
   color: #1d1d21;
   font-size: 14px;
   height: 100%;
   overflow: auto;
   display: block;
-  background-color: #fff;
+  background-color: $sidenavbar-content-bg-color;
+
   .arrow-icon {
     position: absolute;
     width: 0;
@@ -14,38 +15,42 @@ $nutSidenavbarItemHeight: 40px;
     top: 18px;
     cursor: pointer;
   }
+
   .arrow-down {
     border-top: 4px solid #909ca4;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
   }
+
   .arrow-up {
     border-bottom: 4px solid #909ca4;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
   }
-  &__head {
-    height: $nutSidenavbarItemHeight;
-    background: #eeeff2;
-    padding: 10px;
-  }
+
   &__title {
-    height: $nutSidenavbarItemHeight;
-    padding: 10px 8px 10px 20px;
-    background: #f5f5f5;
+    height: $sidenav-bar-item-height;
+    padding: $sidenavbar-title-padding;
+    background: $sidenavbar-title-background;
+    color: $sidenavbar-title-color;
+    box-sizing: border-box;
+    transition: transform 0.5s;
   }
+
   &__content {
     position: relative;
     display: block;
   }
+
   &__list {
-    &.nutShow {
+    &.sidenavbar-show {
       .nut-sidenavbar__content {
         height: auto;
         overflow: inherit;
       }
     }
-    &.nutHide {
+
+    &.sidenavbar-hide {
       .nut-sidenavbar__content {
         height: 0;
         overflow: hidden;
@@ -53,8 +58,9 @@ $nutSidenavbarItemHeight: 40px;
     }
   }
 
-  .border-bt {
+  .nut-subsidenavbar-border-bt {
     position: relative;
+
     &:after {
       content: '';
       position: absolute;

package/dist/packages/sidenavbaritem/sidenavbaritem.scss

@@ -1,8 +1,13 @@
-$nutSidenavbarItemHeight: 40px;
-
 .nut-subsidenavbar {
   &__item {
-    height: $nutSidenavbarItemHeight;
-    padding: 10px 8px 10px 55px;
+    height: $sidenav-bar-item-height;
+    color: $sidenavbar-sub-item-color;
+    padding: $sidenavbar-sub-item-padding;
+    box-sizing: border-box;
+  }
+
+  &__list {
+    background-color: $sidenavbar-sub-list-background;
+    color: $sidenavbar-sub-list-color;
   }
 }

package/dist/packages/signature/signature.scss

@@ -1,16 +1,22 @@
 .nut-signature {
+  .spcanvas_WEAPP {
+    width: 100%;
+    height: 100%;
+    Canvas {
+      width: 100%;
+    }
+  }
   &__inner {
+    Canvas {
+      background-color: #fff;
+    }
     height: $signature-height;
-    margin-bottom: $signature-margin-bottom;
     border: $signature-border-width solid $signature-border-color;
     display: flex;
     justify-content: center;
     align-items: center;
   }
-  &__unsopport {
+  &__unsupport {
     font-size: $font-size-base;
   }
-  &__btn {
-    margin-right: $signature-btn-margin-right !important;
-  }
 }