@nutui/nutui-react 2.2.0 → 2.3.0-beta.1

package/dist/packages/popup/popup.scss

@@ -1,295 +1,307 @@
 
 .nut-popup {
   position: fixed;
+  min-height: 32%;
   max-height: 100%;
   overflow-y: auto;
-  background-color: $white;
-  color: $gray1;
+  background-color: $overlay-content-bg-color;
+  color: $color-title;
   -webkit-overflow-scrolling: touch;
+  font-size: $font-size-base;
 
   &-title {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: $gray6;
-    color: $gray1;
-    padding: $popup-title-padding;
-    font-weight: $font-weight-bold;
-    line-height: $popup-title-line-height;
-    font-size: $popup-title-font-size;
+    height: $popup-title-height;
     border-bottom: $popup-title-border-bottom;
-  }
-
-  &-left-icon {
-    position: absolute;
-    top: $popup-close-icon-margin;
-    left: $popup-close-icon-margin;
-  }
-
-  &__close-icon {
-    position: absolute !important;
-    z-index: 1;
-    color: $popup-close-icon-color;
-    cursor: pointer;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    padding: $popup-title-padding;
+    position: relative;
 
-    &:active {
-      opacity: 0.7;
+    &-left {
+      position: absolute;
+      left: $popup-title-padding;
     }
 
-    &--top-left {
-      top: $popup-close-icon-margin;
-      left: $popup-close-icon-margin;
+    &-title {
+      font-weight: $font-weight-bold;
+      font-size: $popup-title-font-size;
     }
 
-    &--top-right {
-      top: $popup-close-icon-margin;
-      right: $popup-close-icon-margin;
+    &-description {
+      color: $color-text-help;
+      font-size: $popup-description-font-size;
+      font-weight: $font-weight;
     }
 
-    &--bottom-left {
-      bottom: $popup-close-icon-margin;
-      left: $popup-close-icon-margin;
+    &-right {
+      position: absolute !important;
+      z-index: 1;
+      cursor: pointer;
+      width: $popup-icon-size;
+      height: $popup-icon-size;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      top: $popup-title-padding;
+      right: $popup-title-padding;
+      color: $color-text-help;
+
+      &:active {
+        opacity: 0.7;
+      }
+
+      &-top-left {
+        top: $popup-title-padding;
+        left: $popup-title-padding;
+      }
+
+      &-bottom-left {
+        bottom: $popup-title-padding;
+        left: $popup-title-padding;
+      }
+
+      &-bottom-right {
+        right: $popup-title-padding;
+        bottom: $popup-title-padding;
+      }
     }
+  }
 
-    &--bottom-right {
-      right: $popup-close-icon-margin;
-      bottom: $popup-close-icon-margin;
+  &-center {
+    top: 50%;
+    left: 50%;
+    min-height: 10%;
+    transform: translate(-50%, -50%);
+
+    &.nut-popup-round {
+      border-radius: $popup-border-radius;
     }
   }
-}
 
-.nut-popup-center {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  &.round {
-    border-radius: $popup-border-radius;
+  &-bottom,
+  &-top {
+    max-height: 83%;
   }
-}
 
-.nut-popup-bottom {
-  bottom: 0;
-  left: 0;
-  width: 100%;
+  &-bottom {
+    bottom: 0;
+    left: 0;
+    width: 100%;
 
-  &.round {
-    border-radius: $popup-border-radius $popup-border-radius 0 0;
+    &.nut-popup-round {
+      border-radius: $popup-border-radius $popup-border-radius 0 0;
+    }
   }
-}
 
-.nut-popup-right {
-  top: 0;
-  right: 0;
+  &-right {
+    top: 0;
+    right: 0;
 
-  &.round {
-    border-radius: $popup-border-radius 0 0 $popup-border-radius;
+    &.nut-popup-round {
+      border-radius: $popup-border-radius 0 0 $popup-border-radius;
+    }
   }
-}
 
-.nut-popup-left {
-  top: 0;
-  left: 0;
+  &-left {
+    top: 0;
+    left: 0;
 
-  &.round {
-    border-radius: 0 $popup-border-radius $popup-border-radius 0;
+    &.nut-popup-round {
+      border-radius: 0 $popup-border-radius $popup-border-radius 0;
+    }
   }
-}
 
-.nut-popup-top {
-  top: 0;
-  left: 0;
-  width: 100%;
+  &-top {
+    top: 0;
+    left: 0;
+    width: 100%;
 
-  &.round {
-    border-radius: 0 0 $popup-border-radius $popup-border-radius;
+    &.nut-popup-round {
+      border-radius: 0 0 $popup-border-radius $popup-border-radius;
+    }
   }
-}
 
-.nut-popup-slide {
-  @keyframes popup-scale-fade-in {
-    from {
-      opacity: 0;
-      transform: scale(0.8);
-    }
+  &-slide {
+    @keyframes popup-scale-fade-in {
+      from {
+        opacity: 0;
+        transform: scale(0.8);
+      }
 
-    to {
-      opacity: 1;
-      transform: scale(1);
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
     }
-  }
 
-  @keyframes popup-scale-fade-out {
-    from {
-      opacity: 1;
-      transform: scale(1);
+    @keyframes popup-scale-fade-out {
+      from {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      to {
+        opacity: 0;
+        transform: scale(0.8);
+      }
     }
 
-    to {
-      opacity: 0;
-      transform: scale(0.8);
+    &-default-enter-active {
+      animation-fill-mode: both;
+      animation-name: popup-scale-fade-in;
+      animation-duration: $popup-animation-duration;
     }
-  }
 
-  &-default-enter-active {
-    animation-fill-mode: both;
-    animation-name: popup-scale-fade-in;
-    animation-duration: $popup-animation-duration;
-  }
+    &-default-exit-active {
+      animation-fill-mode: both;
+      animation-name: popup-scale-fade-out;
+      animation-duration: $popup-animation-duration;
+    }
 
-  &-default-exit-active {
-    animation-fill-mode: both;
-    animation-name: popup-scale-fade-out;
-    animation-duration: $popup-animation-duration;
-  }
+    @keyframes popup-fade-in {
+      from {
+        opacity: 0;
+      }
 
-  @keyframes popup-fade-in {
-    from {
-      opacity: 0;
+      to {
+        opacity: 1;
+      }
     }
 
-    to {
-      opacity: 1;
-    }
-  }
+    @keyframes popup-fade-out {
+      from {
+        opacity: 1;
+      }
 
-  @keyframes popup-fade-out {
-    from {
-      opacity: 1;
+      to {
+        opacity: 0;
+      }
     }
 
-    to {
-      opacity: 0;
+    &-center-enter-active {
+      animation-fill-mode: both;
+      animation-name: popup-fade-in;
+      animation-duration: $popup-animation-duration;
     }
-  }
 
-  &-center-enter-active {
-    animation-fill-mode: both;
-    animation-name: popup-fade-in;
-    animation-duration: $popup-animation-duration;
-  }
+    &-center-exit-active {
+      animation-fill-mode: both;
+      animation-name: popup-fade-out;
+      animation-duration: $popup-animation-duration;
+    }
 
-  &-center-exit-active {
-    animation-fill-mode: both;
-    animation-name: popup-fade-out;
-    animation-duration: $popup-animation-duration;
-  }
+    /* 从顶部滑出 */
+    @keyframes popup-slide-top-enter {
+      from {
+        transform: translate3d(0, -100%, 0);
+      }
+    }
 
-  /* 从顶部滑出 */
-  @keyframes popup-slide-top-enter {
-    from {
-      transform: translate3d(0, -100%, 0);
+    @keyframes popup-slide-top-exit {
+      to {
+        transform: translate3d(0, -100%, 0);
+      }
     }
-  }
 
-  @keyframes popup-slide-top-exit {
-    to {
-      transform: translate3d(0, -100%, 0);
+    &-top-enter-active,
+    &-top-appear-active {
+      transform: translate3d(0, 0%, 0);
+      animation-fill-mode: both;
+      animation-name: popup-slide-top-enter;
+      animation-duration: $popup-animation-duration;
     }
-  }
 
-  &-top-enter-active,
-  &-top-appear-active {
-    transform: translate3d(0, 0%, 0);
-    animation-fill-mode: both;
-    animation-name: popup-slide-top-enter;
-    animation-duration: $popup-animation-duration;
-  }
+    &-top-exit-active {
+      animation-fill-mode: both;
+      animation-name: popup-slide-top-exit;
+      animation-duration: $popup-animation-duration;
+    }
 
-  &-top-exit-active {
-    animation-fill-mode: both;
-    animation-name: popup-slide-top-exit;
-    animation-duration: $popup-animation-duration;
-  }
+    /* 从右侧滑出 */
+    @keyframes popup-slide-right-enter {
+      from {
+        transform: translate3d(100%, 0, 0);
+      }
+    }
 
-  /* 从右侧滑出 */
-  @keyframes popup-slide-right-enter {
-    from {
-      transform: translate3d(100%, 0, 0);
+    @keyframes popup-slide-right-exit {
+      to {
+        transform: translate3d(100%, 0, 0);
+      }
     }
-  }
 
-  @keyframes popup-slide-right-exit {
-    to {
-      transform: translate3d(100%, 0, 0);
+    &-right-enter-active,
+    &-right-appear-active {
+      transform: translate3d(0, 0, 0);
+      animation-fill-mode: both;
+      animation-name: popup-slide-right-enter;
+      animation-duration: $popup-animation-duration;
     }
-  }
 
-  &-right-enter-active,
-  &-right-appear-active {
-    transform: translate3d(0, 0, 0);
-    animation-fill-mode: both;
-    animation-name: popup-slide-right-enter;
-    animation-duration: $popup-animation-duration;
-  }
+    &-right-exit {
+      animation-fill-mode: both;
+      animation-name: popup-slide-right-exit;
+      animation-duration: $popup-animation-duration;
+    }
 
-  &-right-exit {
-    animation-fill-mode: both;
-    animation-name: popup-slide-right-exit;
-    animation-duration: $popup-animation-duration;
-  }
+    /* 从底部滑出 */
+    @keyframes popup-slide-bottom-enter {
+      from {
+        transform: translate3d(0, 100%, 0);
+      }
+    }
 
-  /* 从底部滑出 */
-  @keyframes popup-slide-bottom-enter {
-    from {
-      transform: translate3d(0, 100%, 0);
+    @keyframes slide-bottom-exit {
+      to {
+        transform: translate3d(0, 100%, 0);
+      }
     }
-  }
 
-  @keyframes slide-bottom-exit {
-    to {
-      transform: translate3d(0, 100%, 0);
+    &-bottom-enter-active,
+    &-bottom-appear-active {
+      transform: translate(0, 0);
+      animation-fill-mode: both;
+      animation-name: popup-slide-bottom-enter;
+      animation-duration: $popup-animation-duration;
     }
-  }
 
-  &-bottom-enter-active,
-  &-bottom-appear-active {
-    transform: translate(0, 0);
-    animation-fill-mode: both;
-    animation-name: popup-slide-bottom-enter;
-    animation-duration: $popup-animation-duration;
-  }
+    &-bottom-exit {
+      animation-fill-mode: both;
+      animation-name: slide-bottom-exit;
+      animation-duration: $popup-animation-duration;
+    }
 
-  &-bottom-exit {
-    animation-fill-mode: both;
-    animation-name: slide-bottom-exit;
-    animation-duration: $popup-animation-duration;
-  }
+    /* 从左侧滑出 */
+    @keyframes popup-slide-left-enter {
+      from {
+        transform: translate3d(-100%, 0, 0);
+      }
+    }
 
-  /* 从左侧滑出 */
-  @keyframes popup-slide-left-enter {
-    from {
-      transform: translate3d(-100%, 0, 0);
+    @keyframes popup-slide-left-exit {
+      to {
+        transform: translate3d(-100%, 0, 0);
+      }
     }
-  }
 
-  @keyframes popup-slide-left-exit {
-    to {
-      transform: translate3d(-100%, 0, 0);
+    &-left-enter-active,
+    &-left-appear-active {
+      transform: translate(0, 0);
+      animation-fill-mode: both;
+      animation-name: popup-slide-left-enter;
+      animation-duration: $popup-animation-duration;
     }
-  }
 
-  &-left-enter-active,
-  &-left-appear-active {
-    transform: translate(0, 0);
-    animation-fill-mode: both;
-    animation-name: popup-slide-left-enter;
-    animation-duration: $popup-animation-duration;
+    &-left-exit-active,
+    &-left-exit-done {
+      animation-fill-mode: both;
+      animation-name: popup-slide-left-exit;
+      animation-duration: $popup-animation-duration;
+    }
   }
 
-  &-left-exit-active,
-  &-left-exit-done {
-    animation-fill-mode: both;
-    animation-name: popup-slide-left-exit;
-    animation-duration: $popup-animation-duration;
+  .nut-overflow-hidden {
+    overflow: hidden !important;
   }
 }
-
-.nut-overflow-hidden {
-  overflow: hidden !important;
-}

package/dist/packages/price/price.scss

@@ -2,19 +2,19 @@
   font-size: $font-size-large;
   display: inline;
   color: $color-primary;
-  &--line {
+  &-line {
     div {
       text-decoration: line-through;
       font-size: $price-line-font-size !important;
       color: $price-line-color !important;
     }
   }
-  &__symbol,
-  &__integer,
-  &__decimal {
+  &-symbol,
+  &-integer,
+  &-decimal {
     display: inline-block;
   }
-  &__symbol {
+  &-symbol {
     font-size: $price-symbol-medium-size;
     padding-right: $price-symbol-padding-right;
     &-large {
@@ -24,7 +24,7 @@
       font-size: $price-symbol-small-size;
     }
   }
-  &__integer {
+  &-integer {
     font-size: $price-integer-medium-size;
     &-large {
       font-size: $price-integer-big-size;
@@ -33,7 +33,7 @@
       font-size: $price-integer-small-size;
     }
   }
-  &__decimal {
+  &-decimal {
     font-size: $price-decimal-medium-size;
     &-large {
       font-size: $price-decimal-big-size;

package/dist/packages/progress/progress.scss

@@ -41,7 +41,7 @@
     transition: all 0.4s;
     transform: translate(-50%);
 
-    &__inner {
+    &-inner {
       display: flex;
       align-items: center;
       height: 100%;

package/dist/packages/pulltorefresh/pulltorefresh.scss

@@ -2,17 +2,24 @@
   &-head {
     overflow: hidden;
     position: relative;
-    font-size: 14px;
+    font-size: 12px;
 
     &-content {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
-      color: $title-color;
+      color: $color-title;
       display: flex;
+      flex-direction: column;
       justify-content: center;
       align-items: center;
+
+      &-icons {
+        width: $pulltorefresh-icon-width;
+        height: $pulltorefresh-icon-height;
+        margin-bottom: 4px;
+      }
     }
   }
 }