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

package/dist/packages/popup/popup.scss

@@ -1,295 +1,307 @@
 
 .nut-popup {
   position: fixed;
+  min-height: 40%;
   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/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-top-icon-width;
+        height: $pulltorefresh-top-icon-height;
+        margin-bottom: 4px;
+      }
     }
   }
 }

package/dist/packages/radio/radio.scss

@@ -9,66 +9,71 @@
     margin-right: 0 !important;
   }
 
-  &.nut-radio--reverse {
+  &.nut-radio-reverse {
     flex-direction: row-reverse;
-    .nut-radio__label {
+    .nut-radio-label {
       margin-right: $radio-label-margin-left;
       margin-left: 0;
     }
   }
 
-  &__button {
+  &-label {
+    margin-left: $radio-label-margin-left;
+    font-size: $radio-label-font-size;
+    color: $radio-label-color;
+
+    &-disabled {
+      color: $color-text-disabled;
+    }
+  }
+
+  &-icon {
+    color: $color-text-disabled;
+    transition-duration: 0.3s;
+    transition-property: color, border-color, background-color;
+    font-size: $radio-icon-font-size;
+  }
+
+  &-icon {
+    &-checked {
+      color: $color-primary;
+
+      &.nut-radio-icon-disabled {
+        color: $color-primary-disabled;
+      }
+    }
+
+    &-disabled {
+      color: $color-text-disabled;
+    }
+  }
+
+  &-button {
     display: inline-flex;
     align-items: center;
     padding: $radio-button-padding;
     font-size: $radio-button-font-size;
     background: $radio-button-background;
     border-radius: $radio-button-border-radius;
-    color: $radio-label-font-color;
+    color: $radio-label-color;
     box-sizing: border-box;
     border: 1px solid $radio-button-background;
 
-    &--active {
-      background: $radio-label-button-background;
-      color: $radio-label-font-active-color;
-      border: 1px solid $radio-label-button-border-color;
+    &-active {
+      background: $color-primary-light;
+      color: $color-primary;
+      border: $radio-button-active-border;
     }
 
-    &--disabled {
-      color: $radio-label-disable-color;
+    &-disabled {
+      color: $color-text-disabled;
       border: 1px solid $radio-button-background;
     }
   }
-  .nut-radio__button--active.nut-radio__button--disabled {
-    background: $radio-button-disabled-active-background;
-    color: $radio-button-disabled-active-color;
-    border: 1px solid $radio-button-disabled-active-border-color;
-  }
-
-  &__label {
-    margin-left: $radio-label-margin-left;
-    font-size: $radio-label-font-size;
-    color: $radio-label-font-color;
-
-    &--disabled {
-      color: $radio-label-disable-color;
-    }
-  }
 
-  &__icon {
-    color: $radio-label-font-active-color;
-    transition-duration: 0.3s;
-    transition-property: color, border-color, background-color;
-    font-size: $radio-icon-font-size;
-  }
-
-  &__icon {
-    &--unchecked {
-      color: $radio-icon-disable-color;
-    }
-
-    &--disable {
-      color: $radio-icon-disable-color2;
-    }
+  .nut-radio-button-active.nut-radio-button-disabled {
+    background: $color-text-disabled;
+    color: $white;
+    border: 1px solid $color-text-disabled;
   }
 }