@nutui/nutui-react 1.2.3-beta.2 → 2.0.0-beta.0

package/dist/packages/col/col.scss

@@ -15,10 +15,10 @@
 
 @for $i from 1 through 24 {
   .nut-col-offset-#{$i} {
-    margin-left: calc(100 / 24) * $i * 1%;
+    margin-left: calc((100 / 24) * #{$i} * 1%);
   }
 
   .nut-col-#{$i} {
-    width: calc(100 / 24) * $i * 1%;
+    width: calc((100 / 24) * #{$i} * 1%);
   }
 }

package/dist/packages/collapseitem/collapseitem.scss

@@ -4,7 +4,7 @@
 .nut-collapse-item {
   &__header {
     position: relative;
-    display: block;
+    display: flex;
     width: 100%;
     overflow: hidden;
     padding: 13px 0px 13px 26px;
@@ -13,7 +13,6 @@
     line-height: 24px;
     background-color: #fff;
     box-sizing: border-box;
-    display: flex;
     &::after {
       position: absolute;
       box-sizing: border-box;

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

package/dist/packages/popover/popover.scss

@@ -1,16 +1,12 @@
-.popBox {
-  // background: skyblue;
-  // // background: #fff;
-  // padding: 20px;
-  .titBox {
-    // margin-bottom: 20px;
-  }
-}
-.nut-popover--dark,
+
 .nut-popover {
-  position: relative;
   display: inline-block;
-  margin-right: 20px;
+
+  > div {
+    position: relative;
+    // z-index: 9999;
+  }
+
   .more-background {
     background: $popover-white-background-color;
     opacity: 0;
@@ -20,10 +16,163 @@
     z-index: 10;
     left: 0;
   }
-  .popoverContent--left,
-  .popoverContent--right,
-  .popoverContent--top,
-  .popoverContent {
+
+  .popover-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 8px solid transparent;
+  }
+
+  // top
+
+  .popover-arrow-top {
+    bottom: 0;
+    border-top-color: $popover-white-background-color;
+    border-bottom-width: 0;
+    margin-bottom: -8px;
+  }
+
+  .popover-content--top {
+    left: 50%;
+    transform: translateX(-50%);
+
+    .popover-arrow--top {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .popover-content--top-end {
+    .popover-arrow--top-end {
+      right: 16px;
+      transform: translateX(0%);
+    }
+
+    right: 0;
+  }
+
+  .popover-content--top-start {
+    left: 0;
+
+    .popover-arrow--top-start {
+      left: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  // bottom
+  .popover-content--bottom {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .popover-content--bottom-end {
+    right: 0;
+  }
+
+  .popover-content--bottom-start {
+    left: 0;
+  }
+
+  // left
+  .popover-content--left {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .popover-content--left-end {
+    bottom: 0;
+  }
+
+  .popover-content--left-start {
+    top: 0;
+  }
+
+  // right
+  .popover-content--right {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .popover-content--right-end {
+    bottom: 0;
+  }
+
+  .popover-content--right-start {
+    top: 0;
+  }
+
+  // arrow bottom
+  .popover-arrow-bottom {
+    top: 0px;
+    border-bottom-color: $popover-white-background-color;
+    border-top-width: 0;
+    margin-top: -8px;
+  }
+
+  .popover-arrow--bottom {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .popover-arrow--bottom-start {
+    left: 16px;
+    transform: translateX(0%);
+  }
+
+  .popover-arrow--bottom-end {
+    right: 16px;
+    transform: translateX(0%);
+  }
+
+  // arrow  left
+  .popover-arrow-left {
+    right: 0px;
+    border-left-color: $popover-white-background-color;
+    border-right-width: 0;
+    margin-right: -8px;
+  }
+
+  .popover-arrow--left {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .popover-arrow--left-start {
+    top: 16px;
+    transform: translateY(0%);
+  }
+
+  .popover-arrow--left-end {
+    bottom: 16px;
+    transform: translateY(0%);
+  }
+
+  // arrow right
+  .popover-arrow-right {
+    left: 0px;
+    border-right-color: $popover-white-background-color;
+    border-left-width: 0;
+    margin-left: -8px;
+  }
+
+  .popover-arrow--right {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .popover-arrow--right-start {
+    top: 16px;
+    transform: translateY(0%);
+  }
+
+  .popover-arrow--right-end {
+    bottom: 16px;
+    transform: translateY(0%);
+  }
+
+  .popover-content {
     z-index: 12;
     background: $popover-white-background-color;
     border-radius: 5px;
@@ -33,63 +182,37 @@
     font-weight: normal;
     color: $popover-primary-text-color;
     position: absolute;
-    .popoverArrow {
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-left: 8px solid transparent;
-      border-right: 8px solid transparent;
-      border-top: 10px solid transparent;
-      border-bottom: 10px solid $popover-white-background-color;
+    box-shadow: 0 2px 12px #3232331f;
+    opacity: 0;
+    transition: opacity 0.1s;
+
+    &.popover-content-show {
+      opacity: 1;
     }
-    .title-item {
+
+    .popover-menu-item {
       display: flex;
       align-items: center;
       padding-bottom: 8px;
       margin: 8px;
       border-bottom: 1px solid $popover-border-bottom-color;
+
       &:first-child {
         margin-top: 15px;
       }
+
       &:last-child {
         margin-bottom: 2px;
         border-bottom: none;
       }
-      .title-name {
+
+      .popover-menu-item-name {
         margin-right: 12px;
         margin-left: 8px;
         width: 100%;
       }
     }
   }
-  .popoverContent--top {
-    .popoverArrow--top {
-      position: absolute;
-      top: auto;
-      border-left: 8px solid transparent;
-      border-right: 8px solid transparent;
-      border-top: 10px solid $popover-white-background-color;
-      border-bottom: 10px solid transparent;
-    }
-  }
-  .popoverContent--left {
-    .popoverArrow--left {
-      position: absolute;
-      border-left: 10px solid $popover-white-background-color;
-      border-right: 10px solid transparent;
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
-    }
-  }
-  .popoverContent--right {
-    .popoverArrow--right {
-      position: absolute;
-      border-left: 10px solid transparent;
-      border-right: 10px solid $popover-white-background-color;
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
-    }
-  }
 
   .disabled {
     color: $popover-disable-color;
@@ -100,42 +223,41 @@
 .nut-popover--dark {
   background: $popover-dark-background-color;
   color: $popover-white-background-color;
-  .popoverContent--left,
-  .popoverContent--right,
-  .popoverContent--top,
-  .popoverContent {
-    background: $popover-dark-background-color;
-    color: $popover-white-background-color;
-    .popoverArrow {
-      border-bottom: 10px solid $popover-dark-background-color;
+
+  .popover-content {
+    background: $popover-dark-background-color !important;
+    color: $popover-white-background-color !important;
+  }
+
+  .popover-content--bottom,
+  .popover-content--bottom-start,
+  .popover-content--bottom-end {
+    .popover-arrow {
+      border-bottom-color: $popover-dark-background-color;
     }
   }
-  .popoverContent--top {
-    .popoverArrow--top {
-      position: absolute;
-      top: auto;
-      border-left: 8px solid transparent;
-      border-right: 8px solid transparent;
-      border-top: 10px solid $popover-dark-background-color;
-      border-bottom: 10px solid transparent;
+
+  .popover-content--top,
+  .popover-content--top-start,
+  .popover-content--top-end {
+    .popover-arrow {
+      border-top-color: $popover-dark-background-color;
     }
   }
-  .popoverContent--left {
-    .popoverArrow--left {
-      position: absolute;
-      border-left: 10px solid $popover-dark-background-color;
-      border-right: 10px solid transparent;
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
+
+  .popover-content--left,
+  .popover-content--left-start,
+  .popover-content--left-end {
+    .popover-arrow {
+      border-left-color: $popover-dark-background-color;
     }
   }
-  .popoverContent--right {
-    .popoverArrow--right {
-      position: absolute;
-      border-left: 10px solid transparent;
-      border-right: 10px solid $popover-dark-background-color;
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
+
+  .popover-content--right,
+  .popover-content--right-start,
+  .popover-content--right-end {
+    .popover-arrow {
+      border-right-color: $popover-dark-background-color;
     }
   }
 }

package/dist/packages/rate/rate.scss

@@ -1,35 +1,36 @@
 
-body .nut-rate {
+.nut-rate {
   display: flex;
   &-item {
     display: flex;
     flex-shrink: 0;
     position: relative;
-    &:last-child {
-      margin-right: 0;
-    }
 
     &__icon {
       color: $rate-icon-color;
       cursor: pointer;
-
-      &::before {
-        position: relative;
-        top: auto;
-        left: auto;
-        transform: none;
-      }
-
       &--disabled {
         color: $rate-icon-void-color;
       }
-      &--half {
+
+      &.nut-rate-item__icon.nut-rate-item__icon--half {
         position: absolute;
         width: 50% !important;
         left: 0;
         top: 0;
         overflow: hidden;
       }
+
+      &.nut-rate-item__icon::before {
+        position: relative;
+        top: auto;
+        left: auto;
+        transform: none;
+      }
+    }
+
+    &:last-child {
+      margin-right: 0;
     }
   }
 }