@nutui/nutui 3.1.0 → 3.1.2-3.beta-4

package/dist/packages/menuitem/index.scss

@@ -1,109 +1,50 @@
 .nut-menu-item {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 0 5px;
-  &.disabled {
-    color: #999;
-  }
-  &.nut-menu-item-active {
-    .nut-menu-title {
-      font-weight: bold;
-      .icon {
-        color: #1a1a1a;
-        transition: all ease 0.3s;
-        transform: rotate(-180deg);
-        background: url('https://img14.360buyimg.com/imagetools/jfs/t1/144044/16/20214/521/5fe5bb14Ebf213fe3/40f271b982f31898.png')
-          no-repeat;
-        background-size: contain;
-      }
-    }
-    .nut-menu-panel {
-      display: block;
-    }
+  .active {
+    font-weight: 500;
+    color: $menu-item-active-text-color !important;
   }
 }
-.nut-menu-title {
-  font-size: 14px;
+
+.nut-menu-item__content {
+  padding: $menu-item-content-padding;
+  max-height: $menu-item-content-max-height;
+  overflow-y: auto;
   display: flex;
-  align-items: center;
-  .title-name {
-    white-space: nowrap;
-    max-width: 100px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .icon {
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    background: url('https://img13.360buyimg.com/imagetools/jfs/t1/152898/12/10149/452/5fd990b5Ec7c12d70/3bf06076b758bed1.png')
-      no-repeat;
-    background-size: contain;
-    color: #909ca4;
-    transform: rotate(0deg);
-    transition: all ease 0.3s;
-    margin: 0 2px;
+  flex-wrap: wrap;
+
+  .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;
+
+    i {
+      margin-right: $menu-item-option-i-margin-right;
+    }
   }
 }
-.nut-menu-panel {
-  display: none;
-  width: 100%;
-  position: absolute;
-  left: 0;
-  top: 46px;
-  color: #2d2d2d;
-  overflow: hidden;
-  background-color: #fff;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-overflow-scrolling: touch;
-  z-index: 9998;
-  border-top: 1px solid #f7f8fa;
-  border-radius: 0 0 15px 15px;
-  box-shadow: 0 4px 5px 0px rgba(236, 236, 236, 0.25);
-  overflow: auto;
-  // &.active{
-  //   display: block;
-  // }
+
+.nut-menu__overlay {
+  top: auto !important;
 }
 
-.menu-list {
-  display: flex;
-  padding: 10px 15px;
-  flex-direction: column;
-  &.bubble-line {
-    flex-flow: wrap;
-    .menu-option {
-      width: 50%;
-    }
-  }
-  &.three-line {
-    flex-flow: wrap;
-    .menu-option {
-      width: 33%;
-    }
-  }
-  .menu-option {
-    min-height: 24px;
-    line-height: 42px;
-    font-size: 14px;
-    color: #1a1a1a;
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 0 5px;
-    &.checked {
-      font-weight: bold;
-    }
-  }
-  .check-icon {
-    width: 14px;
-    height: 14px;
-    margin-right: 5px;
-    color: #fa2c19;
+.nut-menu__pop {
+  transition: all 0 ease 0;
+  transform: none;
+  // top: auto !important;
+}
+
+.placeholder-element {
+  position: fixed;
+  top: -$menu-bar-line-height;
+  left: 0;
+  right: 0;
+  z-index: $menu-bar-opened-z-index;
+  background-color: transparent;
+
+  &.up {
+    bottom: -$menu-bar-line-height;
   }
 }

package/dist/packages/navbar/index.scss

@@ -1,17 +1,45 @@
+.nut-theme-dark {
+  .nut-navbar {
+    background: $dark-background;
+    color: $dark-color;
+    .title {
+      color: $dark-color;
+    }
+  }
+}
 .nut-navbar {
   position: relative;
   display: flex;
   align-items: center;
-  height: 44px;
-  padding: 13px 16px;
-  background: $white;
-  box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
-  font-size: $cell-title-font;
-  color: $cell-color;
-  margin-bottom: 20px;
+  height: $navbar-height;
+  box-sizing: border-box;
+  padding: $navbar-padding;
+  background: $navbar-background;
+  box-shadow: $navbar-box-shadow;
+  font-size: $navbar-title-base-font;
+  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;
+    left: 0;
+    width: 100%;
+  }
+  &--placeholder {
+    display: inline-block;
+    width: 100%;
+  }
+  &--safe-area-inset-top {
+    padding-top: constant(safe-area-inset-top);
+    padding-top: env(safe-area-inset-top);
+  }
   &--clickable {
     &::before {
       position: absolute;
@@ -39,9 +67,21 @@
     min-width: 53%;
     margin: 0 auto;
     text-align: center;
+    display: flex;
+    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-left: 13px;
+        margin: $navbar-title-icon-margin;
       }
     }
     .nut-icon {
@@ -54,40 +94,12 @@
       display: inline-block;
     }
 
-    .tab-title {
-      width: 164px;
-      white-space: nowrap;
-      overflow-x: auto;
-      display: flex;
-      .tab-title-box {
-        height: 50px;
-        display: flex;
-        flex: 1;
-        justify-content: center;
-        align-items: center;
-        box-sizing: border-box;
-        text-align: center;
-        font-size: 14px;
-        color: rgba(26, 26, 26, 1);
-        margin-left: 10px;
-      }
-      .nut-tab-active {
-        color: #1a1a1a;
-        font-weight: bold;
-        font-size: 16px;
-        position: relative;
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: 7px;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 12px;
-          height: 4px;
-          background-image: url('https://img12.360buyimg.com/imagetools/jfs/t1/127200/40/18747/536/5fb36b5aE61cac2d8/638032e8da9b93f4.png');
-          background-size: 100% 100%;
-        }
-      }
+    .nut-tabs__titles {
+      background: $white;
+    }
+
+    .nut-tabpane {
+      display: none;
     }
   }
 

package/dist/packages/noticebar/index.scss

@@ -0,0 +1,114 @@
+.nut-noticebar-page {
+  // width: 100%;
+  display: flex;
+  padding: $noticebar-box-padding;
+  height: $noticebar-height;
+  font-size: $noticebar-font-size;
+  position: relative;
+  align-items: center;
+  background: $noticebar-background;
+  color: $noticebar-color;
+  &.wrapable {
+    height: auto;
+    padding: $noticebar-wrapable-padding;
+    .wrap {
+      height: auto;
+      .content {
+        position: relative;
+        white-space: normal;
+        word-wrap: break-word;
+      }
+    }
+  }
+
+  .withicon {
+    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;
+    justify-content: center;
+    width: $noticebar-right-icon-width;
+    margin: $noticebar-righticon-margin;
+  }
+  .wrap {
+    display: flex;
+    flex: 1;
+    height: $noticebar-line-height;
+    line-height: $noticebar-line-height;
+    overflow: hidden;
+    position: relative;
+  }
+  .content {
+    position: absolute;
+    white-space: nowrap;
+    &.nut-ellipsis {
+      max-width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      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;
+  }
+}
+
+@keyframes nut-notice-bar-play {
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes nut-notice-bar-play-infinite {
+  to {
+    transform: translateX(-100%);
+  }
+}
+// 垂直方向的滚动
+@keyframes nut-notice-bar-play-vertical {
+  to {
+    transform: translateY($noticebar-height);
+  }
+}
+
+// 纵向
+.nut-noticebar-vertical {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  height: $noticebar-height;
+  font-size: $noticebar-font-size;
+  overflow: hidden;
+  padding: $noticebar-box-padding;
+
+  .horseLamp_list {
+    margin: 0;
+    padding: 0;
+    display: block;
+    flex: 1;
+    .horseLamp_list_item {
+      display: flex;
+      align-items: center;
+      height: $noticebar-height;
+    }
+  }
+
+  .go {
+    align-self: center;
+  }
+}

package/dist/packages/notify/index.scss

@@ -1,4 +1,5 @@
 .popup-top {
+  display: flex;
   position: fixed;
   top: 0;
   left: 0;
@@ -7,6 +8,15 @@
   transition: transform 0.3s;
   z-index: 9999;
 }
+.popup-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  overflow-y: auto;
+  transition: transform 0.3s;
+  z-index: 9999;
+}
 
 .nut-fade-enter-active {
   transition: opacity 1s;
@@ -21,6 +31,7 @@
   opacity: 0;
 }
 .nut-notify {
+  width: 100%;
   box-sizing: border-box;
   padding: $notify-padding;
   color: $notify-text-color;
@@ -29,6 +40,7 @@
   text-align: center;
   word-wrap: break-word;
   height: $notify-height;
+  line-height: $notify-line-height;
   &--base {
     background: $notify-base-background-color;
   }

package/dist/packages/numberkeyboard/index.scss

@@ -0,0 +1,109 @@
+.nut-numberkeyboard {
+  width: $numberkeyboard-width;
+  padding: $numberkeyboard-padding;
+  background-color: $numberkeyboard-background-color;
+  user-select: none;
+
+  .number-board-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;
+
+    .tit {
+      display: inline-block;
+    }
+
+    .keyboard-close {
+      position: absolute;
+      display: block;
+      right: 0;
+      padding: $numberkeyboard-header-close-padding;
+      color: $numberkeyboard-header-close-color;
+      font-size: $numberkeyboard-header-close-font-size;
+      background-color: $numberkeyboard-header-close-background-color;
+      border: none;
+      cursor: pointer;
+    }
+  }
+
+  .number-board-body {
+    display: flex;
+    padding: 6px 0 0 6px;
+
+    .number-board {
+      display: flex;
+      flex: 3;
+      flex-wrap: wrap;
+    }
+
+    .key-board-wrapper {
+      position: relative;
+      flex: 1;
+      flex-basis: 33%;
+      box-sizing: border-box;
+      padding: 0 6px 6px 0;
+
+      .key {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: $numberkeyboard-key-height;
+        font-size: $numberkeyboard-key-font-size;
+        line-height: $numberkeyboard-key-line-height;
+        background-color: $numberkeyboard-key-background-color;
+        color: $numberkeyboard-key-font-size-color;
+        border-radius: $numberkeyboard-key-border-radius;
+        cursor: pointer;
+      }
+
+      .active {
+        background-color: $numberkeyboard-key-active-background-color;
+      }
+
+      img {
+        width: 30px;
+        height: 24px;
+      }
+    }
+
+    .key-board-wrapper-large {
+      flex-basis: 66%;
+    }
+
+    .number-board-sidebar {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+
+      .key-board-wrapper {
+        .key {
+          position: absolute;
+          top: 0;
+          right: 6px;
+          bottom: 6px;
+          left: 0;
+          height: auto;
+        }
+
+        .finish {
+          font-size: $numberkeyboard-key-finish-font-size;
+          color: $numberkeyboard-key-finish-font-size-color;
+          background-color: $numberkeyboard-key-finish-background-color;
+        }
+
+        .activeFinsh {
+          background-color: $numberkeyboard-key-activeFinsh-background-color;
+        }
+      }
+    }
+  }
+}
+.nut-numberkeyboard-overlay {
+  background-color: rgba(0, 0, 0, 0) !important;
+}

package/dist/packages/oldpicker/index.scss

@@ -0,0 +1,131 @@
+.nut-oldpicker {
+  &__content {
+    display: block;
+    position: relative;
+    text-align: center;
+    overflow-y: hidden;
+    &:hover {
+      cursor: grab;
+    }
+  }
+
+  &__bar {
+    display: flex;
+    height: 56px;
+    align-items: center;
+    justify-content: space-between;
+  }
+  &__column {
+    display: flex;
+    position: relative;
+    height: 252px;
+  }
+  &__columnitem {
+    width: 0;
+    flex-grow: 1;
+    height: 100%;
+  }
+  &__left {
+    color: $picker-cancel-color;
+    font-size: $picker-bar-cancel-font-size;
+  }
+  &__right {
+    color: $picker-ok-color;
+    font-size: $picker-bar-ok-font-size;
+  }
+
+  &__title {
+    color: $picker-bar-title-color;
+    font-size: $picker-bar-title-font-size;
+    font-weight: $picker-bar-title-font-weight;
+  }
+
+  &__button {
+    cursor: pointer;
+    padding: $picker-bar-button-padding;
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+  &__wrapper {
+    display: block;
+  }
+  &__item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 35px;
+  }
+  &__hairline {
+    position: absolute;
+    top: 108px;
+    height: 34px;
+    width: 100%;
+    border: $picker-item-active-line-border;
+    border-left: 0;
+    border-right: 0;
+  }
+
+  &__list {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 252px;
+    overflow: hidden;
+    text-align: center;
+  }
+
+  &-roller {
+    display: block;
+    position: absolute;
+    top: 108px;
+    width: 100%;
+    height: $picker-item-height;
+    z-index: 1;
+    transform-style: preserve-3d;
+
+    &-item {
+      display: block;
+      backface-visibility: hidden;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: $picker-item-height;
+      line-height: $picker-item-height;
+      color: $picker-item-text-color;
+      font-size: $picker-item-text-font-size;
+
+      &-hidden {
+        visibility: hidden;
+        opacity: 0;
+      }
+    }
+  }
+
+  &-content {
+    display: block;
+    position: absolute;
+    top: 108px;
+    width: 100%;
+    height: $picker-item-height;
+    color: $picker-item-active-text-color;
+    z-index: 2;
+    overflow: hidden;
+    border-left: 0;
+    border-right: 0;
+  }
+  &-list-panel {
+    display: block;
+    transform-style: preserve-3d;
+  }
+  &-item {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: $picker-item-height;
+    line-height: $picker-item-height;
+    text-align: center;
+    font-size: 16px;
+  }
+}

package/dist/packages/overlay/index.scss

@@ -14,5 +14,9 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: $overlay-bg-color;
+  background: $overlay-bg-color;
+}
+
+.nut-overflow-hidden {
+  overflow: hidden !important;
 }