@nutui/nutui-react 2.1.0 → 2.1.1-beta.0

package/dist/packages/menu/menu.scss

@@ -1,6 +1,7 @@
 @import '../../styles/mixins/text-ellipsis.scss';
 
 .nut-menu {
+  position: relative;
   &.scroll-fixed {
     position: fixed;
     top: $menu-scroll-fixed-top;
@@ -9,56 +10,47 @@
   }
 }
 
-.nut-menu-relative {
-  position: relative;
-}
-
-.nut-menu__bar {
+.nut-menu-bar {
   position: relative;
   display: flex;
   line-height: $menu-bar-line-height;
-  background-color: $white;
+  background-color: $color-background-overlay;
   box-shadow: $menu-bar-box-shadow;
 
   &.opened {
     z-index: $menu-bar-opened-z-index;
   }
 }
-
-.nut-menu__item {
+.nut-menu-title {
   flex: 1;
   text-align: center;
-  font-size: $menu-item-font-size;
-  color: $menu-item-text-color;
+  font-size: $menu-title-font-size;
+  color: $menu-title-color;
   min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+
+  &-text {
+    @include text-ellipsis;
+    display: block;
+    padding: $menu-title-padding;
+  }
+
+  &-icon {
+    transition: all 0.2s linear;
+  }
 
   &.active {
-    color: $menu-item-active-text-color;
+    color: $menu-item-active-color;
   }
 
   &.disabled {
     color: $menu-item-disabled-color;
   }
-}
-
-.nut-menu__title-icon {
-  transition: all 0.2s linear;
-}
 
-.nut-menu__title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  max-width: 100%;
-
-  &.active .nut-menu__title-icon {
+  &.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,64 +1,63 @@
 
-.nut-menu-item__content {
-  padding: $menu-item-content-padding;
-  max-height: $menu-item-content-max-height;
-  overflow-y: auto;
-  display: flex;
-  flex-wrap: wrap;
-  background: $menu-item-content-bg-color;
-
-  &_fixed {
-    width: 100%;
-    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;
-
-  &.active {
-    font-weight: 500;
-    color: $menu-item-active-text-color;
+.nut-menu-container {
+  &-content {
+    padding: $menu-content-padding;
+    max-height: $menu-content-max-height;
+    overflow-y: auto;
+    display: flex;
+    flex-wrap: wrap;
+    background: $menu-content-background-color;
+
+    &_fixed {
+      width: 100%;
+      opacity: 0;
+      position: fixed;
+    }
   }
-
-  i {
-    margin-right: $menu-item-option-i-margin-right;
-    display: inline-flex;
+  &-item {
+    display: flex;
     align-items: center;
+    color: $color-title;
+    font-size: $font-size-base;
+    padding: $menu-item-padding;
+
+    &.active {
+      font-weight: $menu-item-active-font-weight;
+      color: $menu-item-active-color;
+    }
+
+    i {
+      display: inline-flex;
+      align-items: center;
+      margin-right: $menu-item-icon-margin;
+    }
+  }
+  &-wrap,
+  &-wrap-up {
+    position: absolute;
+    width: 100%;
+    z-index: $menu-container-z-index;
+    overflow: hidden;
   }
-}
-
-.nut-menu-item__wrap,
-.nut-menu-item__wrap-up {
-  position: absolute;
-  width: 100%;
-  z-index: $menu-item-z-index;
-  overflow: hidden;
-}
 
-.nut-menu-item__wrap-up {
-  bottom: $menu-bar-line-height;
+  &-wrap-up {
+    bottom: $menu-bar-line-height;
+  }
 }
 
-.overlay-fade-enter-active.nut-menu__overlay {
+.overlay-fade-enter-active.nut-menu-container-overlay {
   top: auto;
-  z-index: $menu-item-z-index;
+  z-index: $menu-container-z-index;
 }
 
-.nut-menu__pop.nut-popup {
-  transition: all 0s ease 0s;
-  transform: none;
-}
+// .nut-menu-pop.nut-popup {
+//   transition: all 0s ease 0s;
+//   transform: none;
+// }
 
 .placeholder-element {
   position: fixed;
-  top: $menu-placeholder-top;
+  top: -$menu-bar-line-height;
   left: 0;
   right: 0;
   z-index: $menu-bar-opened-z-index;
@@ -69,44 +68,44 @@
   }
 }
 
-.menu-item-enter {
+.nut-menu-container-down-enter {
   opacity: 0;
   transform: translate(0, -30px);
 }
 
-.menu-item-enter-done {
+.nut-menu-container-down-enter-done {
   opacity: 1;
   transform: translate(0, 0);
   transition: all 100ms;
 }
 
-.menu-item-exit {
+.nut-menu-container-down-exit {
   opacity: 1;
   transition: all 100ms;
 }
 
-.menu-item-exit-done {
+.nut-menu-container-down-exit-done {
   opacity: 0;
   transition: all 100ms;
 }
 
-.menu-item-up-enter {
+.nut-menu-container-up-enter {
   opacity: 0;
   transform: translate(0, 30px);
 }
 
-.menu-item-up-enter-done {
+.nut-menu-container-up-enter-done {
   opacity: 1;
   transform: translate(0, 0);
   transition: all 100ms;
 }
 
-.menu-item-up-exit {
+.nut-menu-container-up-exit {
   opacity: 1;
   transition: all 100ms;
 }
 
-.menu-item-up-exit-done {
+.nut-menu-container-up-exit-done {
   opacity: 0;
   transition: all 100ms;
 }

package/dist/packages/navbar/navbar.scss

@@ -5,7 +5,6 @@
   align-items: center;
   height: $navbar-height;
   box-sizing: border-box;
-  padding: $navbar-padding;
   background: $navbar-background;
   box-shadow: $navbar-box-shadow;
   font-size: $navbar-font-size;
@@ -13,24 +12,24 @@
   margin-bottom: $navbar-margin-bottom;
   overflow: hidden;
 
-  &--fixed {
+  &-fixed {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
   }
 
-  &--placeholder {
+  &-placeholder {
     display: inline-block;
     width: 100%;
   }
 
-  &--safe-area-inset-top {
+  &-safe-area-inset-top {
     padding-top: constant(safe-area-inset-top);
     padding-top: env(safe-area-inset-top);
   }
 
-  &__title {
+  &-title {
     min-width: 53%;
     margin: 0 auto;
     text-align: center;
@@ -41,11 +40,11 @@
     font-weight: $navbar-title-font-weight;
     color: $navbar-title-font-color;
 
-    .nut-tabs__titles {
-      background: $white;
+    .nut-tabs-titles {
+      background: transparent;
 
-      &-item__text {
-        color: $title-color;
+      &-item-text {
+        color: $color-title;
       }
     }
 
@@ -54,24 +53,31 @@
     }
   }
 
-  &__title ::-webkit-scrollbar {
+  &-title ::-webkit-scrollbar {
     display: none;
   }
 
-  &__left,
-  &__right {
+  &-left,
+  &-right {
     position: absolute;
     top: 0;
     bottom: 0;
     display: flex;
     align-items: center;
     cursor: pointer;
-    padding: 0 16px;
+    padding: 0 14px;
+
+    .nut-icon,
+    .nutui-iconfont {
+      width: 20px;
+      height: 20px;
+      font-size: 20px;
+    }
   }
 
-  &__left {
+  &-left {
     left: 0;
-    &__back {
+    &-back {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -79,7 +85,37 @@
     }
   }
 
-  &__right {
+  &-right {
     right: 0;
+    .nut-icon {
+      margin-left: 12px;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+
+  &-title-align-left {
+    padding: 0 14px;
+
+    .nut-navbar-left {
+      position: static;
+      padding: 0;
+      .nut-icon {
+        margin-left: 12px;
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+    .nut-navbar-left-back {
+      margin-right: 0;
+    }
+    .nut-navbar-title {
+      margin: 0;
+      flex: 1;
+      justify-content: flex-start;
+      padding: 0 8px;
+    }
   }
 }

package/dist/packages/noticebar/noticebar.scss

@@ -1,15 +1,16 @@
 .nut-noticebar {
   width: 100%;
 
-  .nut-noticebar-page {
+  .nut-noticebar-box {
+    position: relative;
     display: flex;
-    padding: $noticebar-box-padding;
+    align-items: center;
     height: $noticebar-height;
+    padding: $noticebar-box-padding;
     font-size: $noticebar-font-size;
-    position: relative;
-    align-items: center;
     background: $noticebar-background;
     color: $noticebar-color;
+    border-radius: $noticebar-border-radius;
 
     &.wrapable {
       height: auto;
@@ -35,7 +36,7 @@
       display: flex;
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
-      margin: $noticebar-lefticon-margin;
+      margin-right: $noticebar-icon-gap;
       background-size: 100% 100%;
     }
 
@@ -44,7 +45,7 @@
       align-items: center;
       justify-content: center;
       width: $noticebar-right-icon-width;
-      margin: $noticebar-righticon-margin;
+      margin-left: $noticebar-icon-gap;
     }
 
     .wrap {
@@ -113,19 +114,19 @@
     .left-icon {
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
-      margin: $noticebar-lefticon-margin;
+      margin: $noticebar-icon-gap;
       background-size: 100% 100%;
       display: flex;
       align-self: center;
     }
 
-    .horseLamp_list {
+    .horseLamp-list {
       margin: 0;
       padding: 0;
       display: block;
       flex: 1;
 
-      .horseLamp_list_item {
+      .horseLamp-list-item {
         display: flex;
         align-items: center;
         height: $noticebar-height;
@@ -133,7 +134,7 @@
       }
     }
 
-    .nut-noticebar__inner {
+    .nut-noticebar-inner {
       display: flex;
       height: 100%;
       width: 100%;
@@ -147,7 +148,7 @@
       display: flex;
       justify-content: center;
       width: $noticebar-right-icon-width;
-      margin: $noticebar-righticon-margin;
+      margin-left: $noticebar-icon-gap;
     }
   }
 }

package/dist/packages/notify/notify.scss

@@ -42,16 +42,18 @@
 }
 
 .nut-notify {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   box-sizing: border-box;
   padding: $notify-padding;
   color: $notify-text-color;
   font-size: $notify-font-size;
   white-space: pre-wrap;
-  text-align: center;
   word-wrap: break-word;
   height: $notify-height;
-  line-height: $notify-line-height;
-  &--popup-top {
+  &-popup-top,
+  &-popup-bottom {
     position: fixed;
     top: 0;
     left: 0;
@@ -61,33 +63,23 @@
     z-index: 9999;
   }
 
-  &--popup-bottom {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    overflow-y: auto;
-    transition: transform 0.3s;
-    z-index: 9999;
-  }
-
-  &--base {
+  &-base {
     background: $notify-base-background-color;
   }
 
-  &--primary {
+  &-primary {
     background: $notify-primary-background-color;
   }
 
-  &--success {
+  &-success {
     background: $notify-success-background-color;
   }
 
-  &--danger {
+  &-danger {
     background: $notify-danger-background-color;
   }
 
-  &--warning {
+  &-warning {
     background: $notify-warning-background-color;
   }
 }

package/dist/packages/numberkeyboard/numberkeyboard.scss

@@ -1,28 +1,26 @@
 
 .nut-numberkeyboard {
-  width: $numberkeyboard-width;
+  width: 100%;
   padding: $numberkeyboard-padding;
-  background-color: $numberkeyboard-background-color;
   user-select: none;
-  background-color: $gray4;
+  background-color: $numberkeyboard-background-color;
 
-  &__header {
+  &-header {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     box-sizing: content-box;
-    height: $numberkeyboard-header-height;
-    padding: $numberkeyboard-header-padding;
-    color: $numberkeyboard-header-color;
-    font-size: $numberkeyboard-header-font-size;
+    padding: $popup-title-padding;
+    color: $color-title;
+    font-size: $popup-title-font-size;
 
-    &__title {
-      color: $title-color;
+    &-title {
+      color: $color-title;
       display: inline-block;
     }
 
-    &__close {
+    &-close {
       position: absolute;
       display: block;
       right: 0;
@@ -35,23 +33,23 @@
     }
   }
 
-  &__body {
+  &-body {
     display: flex;
     padding: 6px 0 0 6px;
 
-    &__keys {
+    &-keys {
       display: flex;
       flex: 3;
       flex-wrap: wrap;
     }
 
-    &__wrapper {
+    &-wrapper {
       position: relative;
       flex: 1;
       flex-basis: 33%;
       box-sizing: border-box;
       padding: 0 6px 6px 0;
-      background-color: $gray5;
+      background-color: $numberkeyboard-wrapper-background-color;
 
       .key {
         display: flex;
@@ -63,7 +61,10 @@
         background-color: $numberkeyboard-key-background-color;
         color: $numberkeyboard-key-font-color;
         border-radius: $numberkeyboard-key-border-radius;
+        border: $numberkeyboard-key-border;
+        font-weight: $font-weight-bold;
         cursor: pointer;
+
         &.active {
           background-color: $numberkeyboard-key-active-background-color;
         }
@@ -71,12 +72,12 @@
     }
   }
 
-  &__sidebar {
+  &-sidebar {
     display: flex;
     flex: 1;
     flex-direction: column;
 
-    .nut-numberkeyboard__body__wrapper {
+    .nut-numberkeyboard-body-wrapper {
       .key {
         position: absolute;
         top: 0;
@@ -90,6 +91,7 @@
         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/pagination/pagination.scss

@@ -3,20 +3,20 @@
   font-size: $pagination-font-size;
   color: $pagination-color;
 
-  &__contain {
+  &-contain {
     display: flex;
   }
 
-  &__simple {
+  &-simple {
     height: 39px;
     width: 124px;
     line-height: 39px;
     text-align: center;
   }
 
-  &__prev,
-  &__item,
-  &__next {
+  &-prev,
+  &-item,
+  &-next {
     height: 39px;
     min-width: 39px;
     flex-shrink: 0;
@@ -30,13 +30,13 @@
     cursor: pointer;
   }
 
-  &__prev,
-  &__item {
+  &-prev,
+  &-item {
     border-right: none;
   }
 
-  &__prev,
-  &__next {
+  &-prev,
+  &-next {
     padding: $pagination-prev-next-padding;
   }
 
@@ -56,4 +56,27 @@
     background-color: $pagination-disable-background-color;
     cursor: not-allowed;
   }
+
+  &-lite {
+    width: $pagination-lite-width;
+    height: $pagination-lite-height;
+    display: flex;
+    font-size: $font-size-xs;
+    color: $color-primary-text;
+    background-color: $pagination-lite-background-color;
+    border-radius: $pagination-lite-radius;
+    &-active,
+    &-default {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: $pagination-lite-height;
+      height: $pagination-lite-height;
+    }
+    &-active {
+      border-radius: $pagination-lite-radius;
+      font-size: $font-size-small;
+      background-color: $pagination-lite-active-background-color;
+    }
+  }
 }