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

package/dist/packages/badge/badge.scss

@@ -1,18 +1,9 @@
-.nut-theme-dark {
-  .nut-badge {
-    &.show {
-      background: $dark4;
-      color: $dark1;
-    }
-  }
-}
-
 .nut-badge {
   position: relative;
   display: inline-block;
   margin-right: 40px;
 
-  .slot-icon {
+  &__icon {
     display: flex;
     position: absolute;
     background: $badge-background-color;
@@ -25,10 +16,10 @@
     z-index: $badge-z-index;
   }
 
-  .sup {
+  &__sup {
     position: absolute;
     background: $badge-background-color;
-    color: $badge-default-background-color;
+    color: $badge-color;
     padding: $badge-padding;
     font-size: $badge-font-size;
     font-weight: normal;
@@ -38,15 +29,15 @@
     border-radius: $badge-border-radius;
   }
 
-  .nut-badge__content {
+  &__content {
     transform: $badge-content-transform;
   }
 
-  .is-dot {
+  &__dot {
     width: $badge-dot-width;
-    height: $badge-dot-height;
+    height: $badge-dot-width;
     border: $badge-border;
-    border-radius: $badge-dot-border-radius;
-    padding: $badge-dot-padding;
+    border-radius: $badge-dot-width;
+    padding: 0;
   }
 }

package/dist/packages/dialog/dialog.scss

@@ -9,10 +9,25 @@
   padding: $dialog-padding;
   box-sizing: border-box;
 
+  &__outer {
+    position: fixed;
+    max-height: 100%;
+    overflow-y: auto;
+    background-color: $white;
+    transition: transform 0.2s, -webkit-transform 0.2s;
+    -webkit-overflow-scrolling: touch;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    border-radius: $dialog-outer-bordder-radius;
+    z-index: $dialog-outer-z-index;
+    animation-duration: 0.3s;
+  }
+
   &__header {
     display: block;
     text-align: center;
-    // height: $dialog-header-height;
     font-size: $font-size-3;
     color: $title-color;
     @include oneline-ellipsis();
@@ -30,6 +45,7 @@
     word-wrap: break-word;
     word-break: break-all;
     white-space: pre-wrap;
+    text-align: $dialog-content-text-align;
   }
 
   &__footer {
@@ -69,67 +85,22 @@
   }
 }
 
-.nut-dialog__mask {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  background-color: $dialog-mask-background-color;
-  z-index: $dialog-mask-z-index;
-}
-
-.nut-dialog__wrap {
-  position: fixed;
-  overflow: auto;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $dialog-mask-z-index;
-  -webkit-overflow-scrolling: touch;
-  outline: 0;
-}
-
-.nut-dialog__outer {
-  position: fixed;
-  max-height: 100%;
-  overflow-y: auto;
-  background-color: $white;
-  -webkit-transition: -webkit-transform 0.2s;
-  transition: -webkit-transform 0.2s;
-  transition: transform 0.2s;
-  transition: transform 0.2s, -webkit-transform 0.2s;
-  -webkit-overflow-scrolling: touch;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-  border-radius: $dialog-outer-bordder-radius;
-  z-index: $dialog-outer-z-index;
-  animation-duration: 0.3s;
-}
-
-.fadeDialog-enter,
-.fadeDialog-appear {
-  opacity: 0;
-}
-
-.fadeDialog-enter-active,
-.fadeDialog-appear-active {
-  opacity: 1;
-  transition: opacity 1s cubic-bezier(0.3, 1.3, 0.3, 1);
-}
-
-.fadeDialog-exit {
-  opacity: 1;
-}
-
-.fadeDialog-exit-active {
-  opacity: 0;
-  transition: opacity 1s cubic-bezier(0.3, 1.3, 0.3, 1);
-}
-
-.nut-overflow-hidden {
-  overflow: hidden !important;
-}
+// .fadeDialog-enter,
+// .fadeDialog-appear {
+//   opacity: 0;
+// }
+
+// .fadeDialog-enter-active,
+// .fadeDialog-appear-active {
+//   opacity: 1;
+//   transition: opacity 1s cubic-bezier(0.3, 1.3, 0.3, 1);
+// }
+
+// .fadeDialog-exit {
+//   opacity: 1;
+// }
+
+// .fadeDialog-exit-active {
+//   opacity: 0;
+//   transition: opacity 1s cubic-bezier(0.3, 1.3, 0.3, 1);
+// }

package/dist/packages/elevator/elevator.scss

@@ -1,22 +1,3 @@
-.nut-theme-dark {
-  .nut-elevator {
-    background-color: $dark6;
-    &__list {
-      &__inner {
-        background-color: $dark6;
-      }
-      &__item {
-        color: $dark1;
-        &__code {
-          color: $dark1;
-        }
-      }
-      &__fixed {
-        background-color: $dark6;
-      }
-    }
-  }
-}
 .nut-elevator {
   width: 100%;
   display: block;
@@ -48,15 +29,8 @@
         padding: $elevator-list-item-code-padding;
         font-weight: $elevator-list-item-code-font-weight;
         box-sizing: border-box;
-        &::after {
-          content: ' ';
-          width: $elevator-list-item-code-after-width;
-          height: $elevator-list-item-code-after-height;
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          background-color: $elevator-list-item-code-after-bg-color;
-        }
+        border-bottom: $elevator-list-item-code-border-bottom solid
+          $elevator-list-item-code-border-bottom-color;
       }
       &__name {
         display: flex;

package/dist/packages/menu/menu.scss

@@ -1,16 +1,5 @@
 @import '../../styles/mixins/text-ellipsis.scss';
 
-.nut-theme-dark {
-  .nut-menu {
-    .nut-menu__bar {
-      background-color: $dark6;
-      .nut-menu__item {
-        color: $gray6;
-      }
-    }
-  }
-}
-
 .nut-menu {
   &.scroll-fixed {
     position: fixed;
@@ -18,58 +7,58 @@
     z-index: $menu-scroll-fixed-z-index;
     width: 100%;
   }
+}
 
-  .nut-menu-relative {
-    position: relative;
-  }
-
-  .nut-menu__bar {
-    position: relative;
-    display: flex;
-    line-height: $menu-bar-line-height;
-    background-color: $white;
-    box-shadow: $menu-bar-box-shadow;
+.nut-menu-relative {
+  position: relative;
+}
 
-    &.opened {
-      z-index: $menu-bar-opened-z-index;
-    }
+.nut-menu__bar {
+  position: relative;
+  display: flex;
+  line-height: $menu-bar-line-height;
+  background-color: $white;
+  box-shadow: $menu-bar-box-shadow;
 
-    .nut-menu__item {
-      flex: 1;
-      text-align: center;
-      font-size: $menu-item-font-size;
-      color: $menu-item-text-color;
-      min-width: 0;
+  &.opened {
+    z-index: $menu-bar-opened-z-index;
+  }
+}
 
-      &.active {
-        color: $menu-item-active-text-color;
-      }
+.nut-menu__item {
+  flex: 1;
+  text-align: center;
+  font-size: $menu-item-font-size;
+  color: $menu-item-text-color;
+  min-width: 0;
 
-      &.disabled {
-        color: $menu-item-disabled-color;
-      }
+  &.active {
+    color: $menu-item-active-text-color;
+  }
 
-      .nut-menu__title-icon {
-        transition: all 0.2s linear;
-      }
+  &.disabled {
+    color: $menu-item-disabled-color;
+  }
+}
 
-      .nut-menu__title {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        max-width: 100%;
+.nut-menu__title-icon {
+  transition: all 0.2s linear;
+}
 
-        .nut-menu__title-text {
-          @include text-ellipsis;
-          display: block;
-          padding-left: $menu-title-text-padding-left;
-          padding-right: $menu-title-text-padding-right;
-        }
+.nut-menu__title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
 
-        &.active .nut-menu__title-icon {
-          transform: rotate(180deg);
-        }
-      }
-    }
+  &.active .nut-menu__title-icon {
+    transform: rotate(180deg);
   }
 }
+
+.nut-menu__title-text {
+  @include text-ellipsis;
+  display: block;
+  padding-left: $menu-title-text-padding-left;
+  padding-right: $menu-title-text-padding-right;
+}

package/dist/packages/menuitem/menuitem.scss

@@ -1,14 +1,4 @@
 
-.nut-theme-dark {
-  .nut-menu-item__content {
-    background: $dark6;
-
-    .nut-menu-item__option {
-      color: $dark1;
-    }
-  }
-}
-
 .nut-menu-item__content {
   padding: $menu-item-content-padding;
   max-height: $menu-item-content-max-height;
@@ -22,25 +12,25 @@
     opacity: 0;
     position: fixed;
   }
+}
 
-  .nut-menu-item__option {
-    color: $title-color;
-    font-size: $font-size-2;
-    padding-top: $menu-item-option-padding-top;
-    padding-bottom: $menu-item-option-padding-bottom;
-    display: flex;
-    align-items: center;
+.nut-menu-item__option {
+  color: $title-color;
+  font-size: $font-size-2;
+  padding-top: $menu-item-option-padding-top;
+  padding-bottom: $menu-item-option-padding-bottom;
+  display: flex;
+  align-items: center;
 
-    &.active {
-      font-weight: 500;
-      color: $menu-item-active-text-color;
-    }
+  &.active {
+    font-weight: 500;
+    color: $menu-item-active-text-color;
+  }
 
-    i {
-      margin-right: $menu-item-option-i-margin-right;
-      display: inline-flex;
-      align-items: center;
-    }
+  i {
+    margin-right: $menu-item-option-i-margin-right;
+    display: inline-flex;
+    align-items: center;
   }
 }
 

package/dist/packages/navbar/navbar.scss

@@ -1,36 +1,3 @@
-.nut-theme-dark {
-  .nut-navbar {
-    background: $dark5;
-    color: $dark1;
-    box-shadow: none;
-
-    .title {
-      color: $dark1;
-    }
-
-    &__left {
-      color: $dark2;
-
-      i {
-        color: $dark2 !important;
-      }
-    }
-
-    &__right {
-      color: $dark1;
-    }
-
-    &--border {
-      border-bottom: none;
-    }
-  }
-
-  .nut-tabs__titles-item__text {
-    background: $dark5;
-    color: $dark1;
-  }
-}
-
 .nut-navbar {
   width: $navbar-width;
   position: relative;
@@ -41,19 +8,11 @@
   padding: $navbar-padding;
   background: $navbar-background;
   box-shadow: $navbar-box-shadow;
-  font-size: $navbar-title-base-font;
+  font-size: $navbar-font-size;
   color: $navbar-color;
   margin-bottom: $navbar-margin-bottom;
   overflow: hidden;
 
-  &:active::before {
-    opacity: 0.1;
-  }
-
-  &--border {
-    border-bottom: 1px solid #eee;
-  }
-
   &--fixed {
     position: fixed;
     top: 0;
@@ -71,29 +30,6 @@
     padding-top: env(safe-area-inset-top);
   }
 
-  &--clickable {
-    &::before {
-      position: absolute;
-      content: ' ';
-      top: 50%;
-      left: 50%;
-      width: 100%;
-      height: 100%;
-      background-color: $black;
-      border: inherit;
-      border-color: $black;
-      border-radius: inherit;
-      transform: translate(-50%, -50%);
-      opacity: 0;
-    }
-  }
-
-  .nutui-iconfont {
-    .nut-icon-left {
-      text-align: left;
-    }
-  }
-
   &__title {
     min-width: 53%;
     margin: 0 auto;
@@ -101,35 +37,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-
-    .title {
-      min-width: $navbar-title-width;
-      font-size: $navbar-title-font;
-      font-weight: $navbar-title-font-weight;
-      color: $navbar-title-font-color;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 1;
-      overflow: hidden;
-    }
-
-    &.icon {
-      .icon {
-        margin: $navbar-title-icon-margin;
-      }
-    }
-
-    .nut-icon {
-      display: inline;
-    }
-
-    &-description {
-      font-size: $cell-description-font-size;
-    }
-
-    .text__title {
-      display: inline-block;
-    }
+    font-size: $navbar-title-font-size;
+    font-weight: $navbar-title-font-weight;
+    color: $navbar-title-font-color;
 
     .nut-tabs__titles {
       background: $white;
@@ -148,11 +58,9 @@
     display: none;
   }
 
-  &__left {
-    font-size: $cell-extra-font-size;
-    color: $gray2;
+  &__left,
+  &__right {
     position: absolute;
-    left: 0;
     top: 0;
     bottom: 0;
     display: flex;
@@ -161,24 +69,17 @@
     padding: 0 16px;
   }
 
-  &__right {
-    font-size: $cell-extra-font-size;
-    color: $gray2;
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    padding: 0 16px;
-    cursor: pointer;
-
-    .rightIcon {
-      margin-left: 16px;
+  &__left {
+    left: 0;
+    &__back {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 10px;
     }
+  }
 
-    .leftIcon {
-      margin-left: 16px;
-    }
+  &__right {
+    right: 0;
   }
 }

package/dist/packages/overlay/overlay.scss

@@ -6,11 +6,14 @@
   height: 100%;
   background: $overlay-bg-color;
 }
+
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
-.overlay-fade-enter-active {
+
+.nut-overlay-fade-enter-active {
   animation: nut-fade-in;
+
   .wrapper {
     .content {
       background-color: $overlay-content-bg-color;
@@ -18,15 +21,19 @@
     }
   }
 }
-.overlay-fade-leave-active {
+
+.nut-overlay-fade-leave-active {
   animation: nut-fade-out;
 }
-.first-render {
+
+.nut-overlay-first-render {
   display: none;
 }
-.hidden-render {
+
+.nut-overlay-hidden-render {
   display: none;
 }
+
 @keyframes nut-fade-in {
   0% {
     opacity: 0;

package/dist/packages/progress/progress.scss

@@ -1,30 +1,14 @@
-.nut-theme-dark {
-  .nut-progress {
-    &-text {
-      .nut-icon-checked {
-        color: rgba(38, 191, 38, 1) !important;
-      }
-    }
-  }
-}
-
 .nut-progress {
   display: flex;
   align-items: center;
   position: relative;
   width: 100%;
 
-  .nut-progress-text {
-    color: $progress-text-color;
-  }
-
   &-outer {
     flex: auto;
     border-radius: $progress-border-radius;
-
-    .nut-progress-text {
-      color: $progress-text-inner-color;
-    }
+    height: $progress-height;
+    background: $progress-background;
 
     .nut-progress-active:before {
       content: '';
@@ -38,33 +22,6 @@
     }
   }
 
-  &-small {
-    height: $progress-small-height;
-
-    .nut-progress-text {
-      font-size: $progress-small-font-size;
-      padding: $progress-small-padding;
-    }
-  }
-
-  &-base {
-    height: $progress-base-height;
-
-    .nut-progress-text {
-      font-size: $progress-base-font-size;
-      padding: $progress-base-padding;
-    }
-  }
-
-  &-large {
-    height: $progress-large-height;
-
-    .nut-progress-text {
-      font-size: $progress-large-font-size;
-      padding: $progress-large-padding;
-    }
-  }
-
   &-inner {
     height: 100%;
     display: flex;
@@ -72,26 +29,30 @@
     justify-content: center;
     transition: all 0.4s;
     border-radius: $progress-border-radius;
+    background: $progress-color;
   }
 
   &-text {
-    display: flex;
-    padding: $progress-text-padding;
-    font-size: $progress-text-font-size;
-    line-height: 1;
-    min-width: 35px;
-  }
-
-  &-insidetext {
-    position: absolute;
-    top: $progress-insidetext-position-top;
-    bottom: $progress-insidetext-position-bottom;
     display: flex;
     align-items: center;
-    min-width: 0px;
+    position: absolute;
+    top: $progress-text-position-top;
+    bottom: $progress-text-position-bottom;
     transition: all 0.4s;
     transform: translate(-50%);
-    border-radius: $progress-insidetext-border-radius;
+
+    &__inner {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      width: 100%;
+      color: $progress-text-color;
+      padding: $progress-text-padding;
+      border-radius: $progress-text-border-radius;
+      font-size: $progress-text-font-size;
+      line-height: 1;
+      background: $progress-text-background;
+    }
   }
 
   @keyframes progressActive {