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

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/step/step.scss

@@ -1,48 +1,3 @@
-.nut-theme-dark {
-  .nut-step {
-    &.nut-step-wait {
-      .nut-step-main {
-        .nut-step-title {
-          color: $dark2;
-        }
-
-        .nut-step-content {
-          color: $dark2;
-        }
-      }
-
-      .nut-step-head {
-        color: $dark2;
-      }
-
-      .nut-step-icon.is-text {
-        background-color: $dark5;
-      }
-
-      .nut-step-icon.is-icon {
-        background-color: $dark5;
-
-        .nut-icon {
-          color: $dark2;
-        }
-      }
-
-      .nut-step-content {
-        color: $dark2;
-      }
-    }
-  }
-
-  .nut-step-process,
-  .nut-step-finish {
-    .nut-step-main {
-      .nut-step-content {
-        color: $dark1;
-      }
-    }
-  }
-}
-
 .nut-step {
   flex-grow: 0;
   flex-shrink: 0;
@@ -63,7 +18,6 @@
     position: absolute;
     top: calc($steps-base-icon-height / 2);
     left: calc(50% + (100% - $steps-base-line-width) / 2);
-    // right: calc(0 - $steps-base-line-width / 2);
     height: $steps-base-line-height;
     width: $steps-base-line-width;
     background: $steps-base-line-background;
@@ -107,7 +61,7 @@
     padding-right: 10%;
     text-align: center;
 
-    .nut-step-content {
+    .nut-step-description {
       color: $title-color;
     }
   }
@@ -119,9 +73,9 @@
     color: $steps-base-title-color;
   }
 
-  &-content {
+  &-description {
     display: block;
-    font-size: $steps-base-content-font-size;
+    font-size: $steps-base-description-font-size;
     color: $steps-base-content-color;
   }
 
@@ -143,10 +97,6 @@
       font-size: $steps-process-title-font-size;
       font-weight: $steps-process-title-font-weight;
     }
-
-    .nut-step-content {
-      // color: $steps-process-title-color;
-    }
   }
 
   &.nut-step-wait {
@@ -154,7 +104,7 @@
       color: $steps-wait-title-color;
     }
 
-    .nut-step-content {
+    .nut-step-description {
       color: $steps-wait-content-color;
     }
   }
@@ -173,17 +123,14 @@
     .nut-step-title {
       color: $steps-finish-title-color;
     }
-
-    .nut-step-content {
-      // color: $steps-finish-content-color;
-    }
   }
 }
 
 .nut-steps-dot {
   .nut-step-head {
-    margin-top: 7px;
-    margin-bottom: 0;
+    margin: $steps-dot-head-margin;
+    //margin-top: 7px;
+    //margin-bottom: 0;
   }
 
   .nut-step-line {
@@ -203,7 +150,7 @@
       color: $steps-wait-title-color;
     }
 
-    .nut-step-content {
+    .nut-step-description {
       color: $steps-wait-content-color;
     }
   }
@@ -266,7 +213,7 @@
     padding-left: 6%;
     text-align: left;
 
-    .nut-step-content {
+    .nut-step-description {
       color: $steps-base-content-color;
     }
   }

package/dist/packages/steps/steps.scss

@@ -1,6 +1,8 @@
+
 .nut-steps {
   display: flex;
 }
+
 .nut-steps-vertical {
   height: 100%;
   flex-flow: column;

package/dist/packages/swiper/swiper.scss

@@ -18,26 +18,15 @@
     flex-direction: column;
   }
 
-  &__pagination {
+  &__indicator {
     display: flex;
     position: absolute;
     left: 50%;
-    bottom: $swiper-pagination-bottom;
+    bottom: $swiper-indicator-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 {
+  &__indicator-vertical {
     top: 50%;
     left: 12px;
     bottom: auto;
@@ -45,9 +34,5 @@
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     transform: translateY(-50%);
-
-    i {
-      margin-bottom: 5px;
-    }
   }
 }

package/dist/packages/switch/switch.scss

@@ -1,24 +1,8 @@
-.nut-theme-dark {
-  .nut-switch {
-    background-color: $dark4;
-
-    &.switch-close {
-      color: $dark1;
-    }
-
-    .switch-button {
-      .close {
-        color: $dark4;
-      }
-    }
-  }
-}
-
 .nut-switch {
   cursor: pointer;
   display: flex;
   align-items: center;
-  background-color: $primary-color;
+  background-color: $switch-active-background-color;
   border-radius: $switch-border-radius;
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -26,10 +10,9 @@
   flex: 0 0 auto; // 防止被压缩
 
   &.switch-close {
-    background-color: $switch-close-bg-color;
-
+    background-color: $switch-inactive-background-color;
     .close-line {
-      background: $switch-close--line-bg-color;
+      background: $switch-close-line-background-color;
       border-radius: 2px;
     }
   }
@@ -41,22 +24,21 @@
     border-radius: 50%;
     background: $primary-text-color;
     transition: transform 0.3s;
+  }
 
-    .nut-switch__label {
-      color: $primary-text-color;
-      font-size: $font-size-1;
-
-      &.open {
-        transform: translateX(-16px);
-      }
+  &__label {
+    color: $primary-text-color;
+    font-size: $font-size-1;
+    &.open {
+      transform: translateX(-16px);
+    }
 
-      &.close {
-        transform: translateX(16px);
-      }
+    &.close {
+      transform: translateX(16px);
     }
   }
 
-  &-disable {
+  &-disabled {
     opacity: 0.6;
   }
 

package/dist/packages/tabbar/tabbar.scss

@@ -1,46 +1,40 @@
-.nut-theme-dark {
-  .nut-tabbar {
-    background: $dark4;
-  }
-}
 
 .nut-tabbar {
   border: 0px;
   box-shadow: $tabbar-box-shadow;
   border-bottom: $tabbar-border-bottom;
   border-top: $tabbar-border-top;
-  height: $tabbar-height;
   width: 100%;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
   background: $white;
 
+  &__wrap {
+    width: 100%;
+    height: $tabbar-height;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
   &:last-child {
     border-right: 0;
   }
 
-  &__bottom {
+  &__fixed {
     position: fixed;
     bottom: 0px;
     left: 0px;
-    z-index: 888;
   }
 
-  &__safebottom {
-    bottom: constant(safe-area-inset-bottom);
-    bottom: env(safe-area-inset-bottom);
-
-    &::after {
-      content: '';
-      z-index: 90;
-      position: fixed;
-      left: 0;
-      bottom: 0;
-      height: env(safe-area-inset-bottom);
-      width: 100%;
-      background-color: #fff;
-    }
+  &__safe-area {
+    display: block;
+    width: 100%;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
   }
 }

package/dist/packages/tabbaritem/tabbaritem.scss

@@ -1,13 +1,3 @@
-.nut-theme-dark {
-  .nut-tabbar-item {
-    color: $dark1;
-
-    &--active {
-      color: $primary-color;
-    }
-  }
-}
-
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;
@@ -16,11 +6,11 @@
   flex: 1;
   text-align: center;
   text-decoration: none;
-  color: $gray1;
+  color: $tabbar-inactive-color;
   height: 100%;
 
-  &--active {
-    color: $primary-color;
+  &-active {
+    color: $tabbar-active-color;
   }
 
   &__icon-box {
@@ -30,67 +20,16 @@
     align-items: center;
     position: relative;
 
-    &__tips {
-      position: absolute;
-      background: $tabbar-active-color;
-      border: 1px solid $white;
-      border-radius: 7px;
-      text-align: center;
-      top: calc(50% - 6px);
-      right: calc(50% - 16px);
-      box-shadow: 0 0 0 1px $white;
-      font-size: $font-size-1;
-      color: $primary-text-color;
-      z-index: 1;
-    }
-
-    &__dot {
-      position: absolute;
-      width: 7px;
-      height: 7px;
-      border: 0;
-      border-radius: 7px;
-      padding: 0px;
-      background: $tabbar-active-color;
-      top: $tabbar-dot-top;
-      right: calc(50% - $tabbar-dot-right);
-      transform: translate(50%, -50%);
-    }
-
-    &__num {
-      line-height: 1;
-      font-size: $tabbar-item-text-font-size;
-      color: $primary-text-color;
-      padding: 1px 2px 2px 3px;
-      top: calc(-50% + 6px);
-      right: calc(-50%);
-    }
-
-    &__nums {
-      line-height: 1;
-      font-size: $tabbar-item-text-font-size;
-      color: $primary-text-color;
-      padding: 2px 1px 2px 2px;
-      top: calc(-50% + 6px);
-      right: calc(-50% - 8px);
-    }
-
-    &__icon {
-      display: block;
-      background-size: 100% 100%;
-      background-position: center center;
-    }
-
-    &--nav-word {
+    &-nav {
       display: block;
-      font-size: $font-size-0;
-      margin-top: $tabbar-word-margin-top;
+      font-size: $tabbar-text-font-size;
+      margin-top: $tabbar-text-margin-top;
     }
 
-    &--big-word {
-      font-size: $font-size-large;
+    &-large {
+      font-size: $tabbar-text-large-font-size;
       margin-top: 0;
-      line-height: $tabbar-item-text-line-height;
+      line-height: $tabbar-text-line-height;
     }
   }
 }

package/dist/packages/table/table.scss

@@ -1,52 +1,3 @@
-.nut-theme-dark {
-  .nut-table {
-    margin-bottom: 3px;
-
-    &__main {
-      color: $dark1;
-      background-color: $dark5;
-
-      &--striped {
-        .nut-table__main__head {
-          &__tr {
-            background-color: $dark6;
-          }
-        }
-
-        .nut-table__main__body {
-          &__tr:nth-child(odd) {
-            background-color: $dark4;
-          }
-        }
-
-        .nut-table__main__body {
-          &__tr:nth-child(even) {
-            background-color: $dark6;
-          }
-        }
-      }
-    }
-
-    .nut-table__nodata {
-      background-color: $dark6;
-
-      .nut-table__nodata {
-        color: $dark1;
-      }
-    }
-
-    &__summary {
-      color: $dark1;
-      background-color: $dark4;
-    }
-
-    &__nodata {
-      color: $dark1;
-      background-color: $dark4;
-    }
-  }
-}
-
 .nut-table {
   display: flex;
   width: 100%;
@@ -133,13 +84,6 @@
   }
 
   &__summary {
-    display: flex;
-    align-items: center;
-    height: 30px;
-    padding: $table-cols-padding;
-  }
-
-  &__nodata {
     color: $title-color;
     background-color: $background-color3;
     display: flex;