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

package/dist/packages/popup/popup.scss

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

package/dist/packages/price/price.scss

@@ -2,53 +2,42 @@
   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 {
       font-size: $price-symbol-big-size;
     }
-
     &-small {
       font-size: $price-symbol-small-size;
     }
   }
-
-  &-integer {
+  &__integer {
     font-size: $price-integer-medium-size;
-
     &-large {
       font-size: $price-integer-big-size;
     }
-
     &-small {
       font-size: $price-integer-small-size;
     }
   }
-
-  &-decimal {
+  &__decimal {
     font-size: $price-decimal-medium-size;
-
     &-large {
       font-size: $price-decimal-big-size;
     }
-
     &-small {
       font-size: $price-decimal-small-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,24 +2,17 @@
   &-head {
     overflow: hidden;
     position: relative;
-    font-size: 12px;
+    font-size: 14px;
 
     &-content {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
-      color: $color-title;
+      color: $title-color;
       display: flex;
-      flex-direction: column;
       justify-content: center;
       align-items: center;
-
-      &-icons {
-        width: $pulltorefresh-top-icon-width;
-        height: $pulltorefresh-top-icon-height;
-        margin-bottom: 4px;
-      }
     }
   }
 }