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

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

@@ -1,23 +1,6 @@
-.nut-theme-dark {
-  .nut-noticebar {
-    .wrap {
-      .content {
-        a {
-          color: $noticebar-color;
-        }
-      }
-    }
-    .nut-noticebar-vertical {
-      .horseLamp_list {
-        .custom-item {
-          color: $noticebar-color;
-        }
-      }
-    }
-  }
-}
 .nut-noticebar {
   width: 100%;
+
   .nut-noticebar-page {
     display: flex;
     padding: $noticebar-box-padding;
@@ -27,11 +10,14 @@
     align-items: center;
     background: $noticebar-background;
     color: $noticebar-color;
+
     &.wrapable {
       height: auto;
-      padding: $noticebar-wrapable-padding;
+      padding: $noticebar-wrap-padding;
+
       .wrap {
         height: auto;
+
         .content {
           position: relative;
           white-space: normal;
@@ -44,12 +30,14 @@
       position: relative;
       padding-right: 40px;
     }
+
     .left-icon {
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
       margin: $noticebar-lefticon-margin;
       background-size: 100% 100%;
     }
+
     .right-icon {
       display: flex;
       align-items: center;
@@ -57,6 +45,7 @@
       width: $noticebar-right-icon-width;
       margin: $noticebar-righticon-margin;
     }
+
     .wrap {
       display: flex;
       flex: 1;
@@ -65,9 +54,11 @@
       overflow: hidden;
       position: relative;
     }
+
     .content {
       position: absolute;
       white-space: nowrap;
+
       &.nut-ellipsis {
         max-width: 100%;
         white-space: nowrap;
@@ -75,13 +66,16 @@
         text-overflow: ellipsis;
       }
     }
+
     // 只跑一次
     .play {
       animation: nut-notice-bar-play linear both running;
     }
+
     .play-infinite {
       animation: nut-notice-bar-play-infinite linear infinite both running;
     }
+
     .play-vertical {
       animation: nut-notice-bar-play-vertical linear infinite both running;
     }
@@ -98,6 +92,7 @@
       transform: translate3d(-100%, 0, 0);
     }
   }
+
   // 垂直方向的滚动
   @keyframes nut-notice-bar-play-vertical {
     to {
@@ -116,6 +111,7 @@
     padding: $noticebar-box-padding;
     background: $noticebar-background;
     color: $noticebar-color;
+
     .left-icon {
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
@@ -124,11 +120,13 @@
       display: flex;
       align-self: center;
     }
+
     .horseLamp_list {
       margin: 0;
       padding: 0;
       display: block;
       flex: 1;
+
       .horseLamp_list_item {
         display: flex;
         align-items: center;
@@ -136,6 +134,7 @@
         width: 100%;
       }
     }
+
     .nut-noticebar__inner {
       display: flex;
       height: 100%;

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/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;