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

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

@@ -4,44 +4,42 @@
   position: relative;
   overflow: hidden;
   vertical-align: middle;
+  width: 100%;
 
-  .nut-skeleton-content {
+  &__content {
     display: flex;
 
-    .avatarClass {
+    .avatar {
       margin-right: 20px;
-      background: rgb(239, 239, 239);
+      background: $skeleton-background !important;
     }
 
-    .blockClass,
-    .blockClass--round {
-      width: 100%;
-      height: 100%;
-      background: rgb(239, 239, 239);
+    .nut-skeleton__block {
+      width: $skeleton-line-width;
+      height: $skeleton-line-height;
+      background: $skeleton-background;
       margin-top: 10px;
+      border-radius: $skeleton-line-border-radius;
 
       &:last-child {
-        width: 70% !important;
+        width: 70%;
       }
     }
 
-    .blockClass--round {
-      border-radius: 10px;
-    }
-
-    .skeleton-content-line {
+    &-line {
+      width: 100%;
       display: flex;
       flex-direction: column;
 
-      .skeleton-title {
+      .nut-skeleton__title {
         width: 30%;
-        height: 15px;
-        background: $skeleton-content-line-title-background-color;
+        height: $skeleton-line-height;
+        background: $skeleton-background;
       }
     }
   }
 
-  .skeleton-animation {
+  &__animation {
     position: absolute;
     top: 0;
     left: 0;
@@ -55,10 +53,10 @@
       hsla(0, 0%, 100%, 0) 80%
     );
     background-repeat: no-repeat;
-    animation: backpos 2s ease-in-out 0s infinite;
+    animation: nut-skeleton 2s ease-in-out 0s infinite;
   }
 
-  @keyframes backpos {
+  @keyframes nut-skeleton {
     0% {
       background-position-x: -500px;
     }

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);
   }
 }