@nutui/nutui-react 1.2.3-beta.4 → 1.3.1-beta.0

package/dist/packages/icon/icon.scss

@@ -1,4 +1,6 @@
 @import '../../styles/font/iconfont.css';
+@import '../../styles/animation/icon.scss';
+
 .nut-icon {
   display: inline-block;
   position: relative;
@@ -19,22 +21,112 @@
     height: $icon-height;
     object-fit: contain;
   }
-  &-loading {
+  &-loading,
+  &-loading1 {
     display: inline-block;
-    animation: loadingCircle 1s infinite linear;
+    animation: rotation 1s infinite linear;
   }
-}
 
-@-webkit-keyframes loadingCircle {
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
+  --animate-duration: 1s;
+  --animate-delay: 0s;
+
+  &-am-infinite {
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-direction: alternate;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
   }
-}
+  &-am-jump {
+    -webkit-animation-name: nutJumpOne;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease;
+    -webkit-animation-delay: var(--animate-delay);
+
+    animation-name: nutJumpOne;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease;
+    animation-delay: var(--animate-delay);
+
+    &.nut-icon-am-infinite {
+      -webkit-animation-name: nutJump;
+      animation-name: nutJump;
+    }
+  }
+
+  &-am-rotate {
+    -webkit-animation-name: rotation;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-delay: var(--animate-delay);
+
+    animation-name: rotation;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: linear;
+    animation-delay: var(--animate-delay);
+
+    &.nut-icon-am-infinite {
+      -webkit-animation-direction: normal;
+      animation-direction: normal;
+    }
+  }
+  &-am-blink {
+    -webkit-animation-name: nutBlink;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-delay: var(--animate-delay);
+
+    animation-name: nutBlink;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: linear;
+    animation-delay: var(--animate-delay);
+  }
+  &-am-breathe {
+    -webkit-animation-name: nutBreathe;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-delay: var(--animate-delay);
+
+    animation-name: nutBreathe;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease-in-out;
+    animation-delay: var(--animate-delay);
+  }
+  &-am-flash {
+    -webkit-animation-name: nutFlash;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-delay: var(--animate-delay);
+
+    animation-name: nutFlash;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease-in-out;
+    animation-delay: var(--animate-delay);
+  }
+  &-am-bounce {
+    -webkit-animation-name: nutBounce;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-delay: var(--animate-delay);
+    animation-name: nutBounce;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease-in-out;
+    animation-delay: var(--animate-delay);
+
+    &.nut-icon-am-infinite {
+      -webkit-animation-direction: normal;
+      animation-direction: normal;
+    }
+  }
+
+  &-am-shake {
+    -webkit-animation-name: nutShake;
+    -webkit-animation-duration: var(--animate-duration);
+    -webkit-animation-timing-function: ease-in-out;
+    -webkit-animation-delay: var(--animate-delay);
 
-@keyframes loadingCircle {
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
+    animation-name: nutShake;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease-in-out;
+    animation-delay: var(--animate-delay);
   }
 }

package/dist/packages/imagepreview/imagepreview.scss

@@ -0,0 +1,51 @@
+.nut-imagepreview {
+  width: 100%;
+
+  &-swiper {
+    height: 327px;
+    width: 100vw;
+    background-color: transparent;
+  }
+
+  &-img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  &-index {
+    position: fixed;
+    z-index: 2002;
+    top: 50px;
+    text-align: center;
+    left: 0;
+    right: 0;
+    background: transparent;
+    color: #fff;
+
+    .arrow {
+      position: absolute;
+      left: 15px;
+      transform: rotateZ(180deg);
+    }
+  }
+
+  .popup-bg {
+    background: rgba(0, 0, 0, 0.9);
+  }
+
+  .popup-box {
+    height: 100%;
+    overflow: visible;
+    background-color: transparent;
+  }
+}
+.custom-pop {
+  height: 100%;
+  background: transparent !important;
+  display: flex;
+  align-items: center;
+}
+.nut-imagepreview-swiper .nut-swiper-item {
+  height: 327px;
+}

package/dist/packages/menu/menu.scss

@@ -0,0 +1,72 @@
+@import '../../styles/mixins/text-ellipsis.scss';
+
+.nut-theme-dark {
+  .nut-menu {
+    .nut-menu__bar {
+      background-color: $dark-background;
+
+      .nut-menu__item {
+        color: $dark-color;
+      }
+    }
+  }
+}
+
+.nut-menu {
+  &.scroll-fixed {
+    position: fixed;
+    top: $menu-scroll-fixed-top;
+    z-index: $menu-scroll-fixed-z-index;
+    width: 100%;
+  }
+
+  .nut-menu__bar {
+    position: relative;
+    display: flex;
+    line-height: $menu-bar-line-height;
+    background-color: $white;
+    box-shadow: $menu-bar-box-shadow;
+
+    &.opened {
+      z-index: $menu-bar-opened-z-index;
+    }
+
+    .nut-menu__item {
+      flex: 1;
+      text-align: center;
+      font-size: $menu-item-font-size;
+      color: $menu-item-text-color;
+      min-width: 0;
+
+      &.active {
+        color: $menu-item-active-text-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%;
+
+        .nut-menu__title-text {
+          @include text-ellipsis;
+          display: block;
+          padding-left: $menu-title-text-padding-left;
+          padding-right: $menu-title-text-padding-right;
+        }
+
+        &.active .nut-menu__title-icon {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+}

package/dist/packages/menuitem/menuitem.scss

@@ -0,0 +1,90 @@
+
+.nut-theme-dark {
+  .nut-menu-item__content {
+    .nut-menu-item__option {
+      color: $dark-color;
+    }
+  }
+}
+
+.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: #fff;
+
+  &_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;
+    }
+
+    i {
+      margin-right: $menu-item-option-i-margin-right;
+    }
+  }
+}
+
+.nut-menu-item__wrap {
+  position: fixed;
+  width: 100%;
+  z-index: 2052;
+  overflow: hidden;
+}
+
+.overlay-fade-enter-active.nut-menu__overlay {
+  top: auto;
+  z-index: 2052;
+}
+
+.nut-menu__pop.nut-popup {
+  transition: all 0s ease 0s;
+  transform: none;
+}
+
+.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;
+  }
+}
+
+.menu-item-enter {
+  opacity: 0;
+}
+
+.menu-item-enter-done {
+  opacity: 1;
+  transition: all 100ms;
+}
+
+.menu-item-exit {
+  opacity: 1;
+  transition: all 100ms;
+}
+
+.menu-item-exit-done {
+  opacity: 0;
+  transition: all 100ms;
+}

package/dist/packages/noticebar/noticebar.scss

@@ -1,15 +1,28 @@
+.nut-theme-dark {
+  .nut-noticebar-page {
+    background: $dark-background2;
+    color: $dark-color;
+  }
 
+  .nut-noticebar-vertical {
+    .horseLamp_list_item {
+      color: $dark-color;
+    }
+  }
+}
 .nut-noticebar {
   .nut-noticebar-page {
-    width: 100%;
     display: flex;
-    height: $noticeBar-height;
-    font-size: $noticeBar-font-size;
+    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: 8px 16px;
+      padding: $noticebar-wrapable-padding;
       .wrap {
         height: auto;
         .content {
@@ -25,22 +38,23 @@
       padding-right: 40px;
     }
     .left-icon {
-      height: $noticeBar-left-icon-width;
-      min-width: $noticeBar-left-icon-width;
-      margin: 0 5px 0 10px;
+      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: 0 10px 0 5px;
+      width: $noticebar-right-icon-width;
+      margin: $noticebar-righticon-margin;
     }
     .wrap {
+      display: flex;
       flex: 1;
-      height: $noticeBar-line-height;
-      line-height: $noticeBar-line-height;
+      height: $noticebar-line-height;
+      line-height: $noticebar-line-height;
       overflow: hidden;
       position: relative;
     }
@@ -80,7 +94,7 @@
   // 垂直方向的滚动
   @keyframes nut-notice-bar-play-vertical {
     to {
-      transform: translateY($noticeBar-height);
+      transform: translateY($noticebar-height);
     }
   }
 
@@ -89,9 +103,10 @@
     position: relative;
     display: flex;
     justify-content: space-between;
-    height: $noticeBar-height;
-    font-size: $noticeBar-font-size;
+    height: $noticebar-height;
+    font-size: $noticebar-font-size;
     overflow: hidden;
+    padding: $noticebar-box-padding;
 
     .horseLamp_list {
       margin: 0;
@@ -101,12 +116,13 @@
       .horseLamp_list_item {
         display: flex;
         align-items: center;
-        height: $noticeBar-height;
+        height: $noticebar-height;
       }
     }
 
     .go {
       align-self: center;
+      display: flex;
     }
   }
 }

package/dist/packages/notify/notify.scss

@@ -7,6 +7,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;
+}
 
 /*入场动画开始*/
 .fade-enter {