@nutui/nutui-react 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/packages/popup/popup.scss

@@ -1,65 +1,89 @@
-.popup-slide {
-  &-center-enter,
-  &-center-exit {
-    opacity: 0;
-  }
-  &-center-enter-active {
-    opacity: 1;
-    transition: opacity 0.5s ease;
-  }
 
-  &-top-enter,
-  &-top-exit {
-    transform: translate(0, -100%);
-  }
-  &-top-enter-active {
-    transform: translate(0, 0);
-  }
+.nut-popup {
+  position: fixed;
+  max-height: 100%;
+  overflow-y: auto;
+  background-color: $white;
+  color: $gray1;
+  -webkit-overflow-scrolling: touch;
 
-  &-right-enter,
-  &-right-exit {
-    transform: translate(100%, 0);
-  }
-  &-right-enter-active {
-    transform: translate(0, 0);
+  &-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;
+    border-bottom: $popup-title-border-bottom;
   }
 
-  &-bottom-enter,
-  &-bottom-exit {
-    transform: translate(0, 100%);
-  }
-  &-bottom-enter-active {
-    transform: translate(0, 0);
+  &-left-icon {
+    position: absolute;
+    top: $popup-close-icon-margin;
+    left: $popup-close-icon-margin;
   }
 
-  &-left-enter,
-  &-left-exit {
-    transform: translate(-100%, 0);
-  }
-  &-left-enter-active {
-    transform: translate(0, 0);
+  &__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;
+    }
+
+    &--top-left {
+      top: $popup-close-icon-margin;
+      left: $popup-close-icon-margin;
+    }
+
+    &--top-right {
+      top: $popup-close-icon-margin;
+      right: $popup-close-icon-margin;
+    }
+
+    &--bottom-left {
+      bottom: $popup-close-icon-margin;
+      left: $popup-close-icon-margin;
+    }
+
+    &--bottom-right {
+      right: $popup-close-icon-margin;
+      bottom: $popup-close-icon-margin;
+    }
   }
 }
 
-.popup-center {
+.nut-popup-center {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+
   &.round {
     border-radius: $popup-border-radius;
   }
 }
 
-.popup-bottom {
+.nut-popup-bottom {
   bottom: 0;
   left: 0;
   width: 100%;
+
   &.round {
     border-radius: $popup-border-radius $popup-border-radius 0 0;
   }
 }
 
-.popup-right {
+.nut-popup-right {
   top: 0;
   right: 0;
 
@@ -68,7 +92,7 @@
   }
 }
 
-.popup-left {
+.nut-popup-left {
   top: 0;
   left: 0;
 
@@ -77,7 +101,7 @@
   }
 }
 
-.popup-top {
+.nut-popup-top {
   top: 0;
   left: 0;
   width: 100%;
@@ -87,63 +111,185 @@
   }
 }
 
-.nut-popup {
-  position: fixed;
-  max-height: 100%;
-  overflow-y: auto;
-  background-color: $white;
-  transition: transform 0.2s;
-  -webkit-overflow-scrolling: touch;
-}
+.nut-popup-slide {
+  @keyframes popup-scale-fade-in {
+    from {
+      opacity: 0;
+      transform: scale(0.8);
+    }
 
-.nut-overflow-hidden {
-  overflow: hidden !important;
-}
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
 
-.nutui-popup {
-  &__close-icon {
-    position: absolute !important;
-    z-index: 1;
-    color: #969799;
-    font-size: 18px;
-    cursor: pointer;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    text-align: center;
+  @keyframes popup-scale-fade-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
 
-    &:active {
-      opacity: 0.7;
+    to {
+      opacity: 0;
+      transform: scale(0.8);
     }
+  }
 
-    &--top-left {
-      top: $popup-close-icon-margin;
-      left: $popup-close-icon-margin;
+  &-default-enter-active {
+    animation-fill-mode: both;
+    animation-name: popup-scale-fade-in;
+    animation-duration: 0.3s;
+  }
+
+  &-default-exit-active {
+    animation-fill-mode: both;
+    animation-name: popup-scale-fade-out;
+    animation-duration: 0.3s;
+  }
+
+  @keyframes popup-fade-in {
+    from {
+      opacity: 0;
     }
 
-    &--top-right {
-      top: $popup-close-icon-margin;
-      right: $popup-close-icon-margin;
+    to {
+      opacity: 1;
     }
+  }
 
-    &--bottom-left {
-      bottom: $popup-close-icon-margin;
-      left: $popup-close-icon-margin;
+  @keyframes popup-fade-out {
+    from {
+      opacity: 1;
     }
 
-    &--bottom-right {
-      right: $popup-close-icon-margin;
-      bottom: $popup-close-icon-margin;
+    to {
+      opacity: 0;
     }
   }
-}
 
-.fade-enter {
-  transform: translate(0, -100%);
-}
-.fade-enter-active {
-  transform: translate(0, 0);
+  &-center-enter-active {
+    animation-fill-mode: both;
+    animation-name: popup-fade-in;
+    animation-duration: 0.3s;
+  }
+
+  &-center-exit-active {
+    animation-fill-mode: both;
+    animation-name: popup-fade-out;
+    animation-duration: 0.3s;
+  }
+
+  /* 从顶部滑出 */
+  @keyframes popup-slide-top-enter {
+    from {
+      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: 0.3s;
+  }
+
+  &-top-exit-active {
+    animation-fill-mode: both;
+    animation-name: popup-slide-top-exit;
+    animation-duration: 0.3s;
+  }
+
+  /* 从右侧滑出 */
+  @keyframes popup-slide-right-enter {
+    from {
+      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: 0.3s;
+  }
+
+  &-right-exit {
+    animation-fill-mode: both;
+    animation-name: popup-slide-right-exit;
+    animation-duration: 0.3s;
+  }
+
+  /* 从底部滑出 */
+  @keyframes popup-slide-bottom-enter {
+    from {
+      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: 0.3s;
+  }
+
+  &-bottom-exit {
+    animation-fill-mode: both;
+    animation-name: slide-bottom-exit;
+    animation-duration: 0.3s;
+  }
+
+  /* 从左侧滑出 */
+  @keyframes popup-slide-left-enter {
+    from {
+      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: 0.3s;
+  }
+
+  &-left-exit-active,
+  &-left-exit-done {
+    animation-fill-mode: both;
+    animation-name: popup-slide-left-exit;
+    animation-duration: 0.3s;
+  }
 }
-.fade-exit {
-  transform: translate(0, -100%);
+
+.nut-overflow-hidden {
+  overflow: hidden !important;
 }

package/dist/packages/price/price.scss

@@ -2,20 +2,44 @@
   font-size: $font-size-3;
   display: inline;
   color: $primary-color;
-  &__symbol {
-    display: inline-block;
-    font-size: $font-size-3;
+  &--line {
+    div {
+      text-decoration: line-through;
+      font-size: $price-line-font-size !important;
+      color: $price-line-color !important;
+    }
   }
-  &__big {
+  &__symbol,
+  &__integer,
+  &__decimal {
     display: inline-block;
-    font-size: $price-big-size;
   }
-  &__point {
-    display: inline-block;
-    font-size: $price-big-size;
+  &__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;
+    }
   }
-  &__small {
-    display: inline-block;
-    font-size: $font-size-4;
+  &__integer {
+    font-size: $price-integer-medium-size;
+    &-large {
+      font-size: $price-integer-big-size;
+    }
+    &-small {
+      font-size: $price-integer-small-size;
+    }
+  }
+  &__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

@@ -3,10 +3,13 @@
   align-items: center;
   position: relative;
   width: 100%;
+
   &-outer {
     flex: auto;
-    .nut-progress-text {
-    }
+    border-radius: $progress-border-radius;
+    height: $progress-height;
+    background: $progress-background;
+
     .nut-progress-active:before {
       content: '';
       position: absolute;
@@ -18,61 +21,51 @@
       animation: progressActive 2s ease-in-out infinite;
     }
   }
-  &-small {
-    height: $progress-small-height;
-    .nut-progress-text {
-      font-size: $progress-small-font-size;
-      padding: $progress-small-padding;
-    }
-  }
-  &-base {
-    height: $progress-base-height;
-    .nut-progress-text {
-      font-size: $progress-base-font-size;
-      padding: $progress-base-padding;
-    }
-  }
-  &-large {
-    height: $progress-large-height;
-    .nut-progress-text {
-      font-size: $progress-large-font-size;
-      padding: $progress-large-padding;
-    }
-  }
+
   &-inner {
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     transition: all 0.4s;
+    border-radius: $progress-border-radius;
+    background: $progress-color;
   }
+
   &-text {
-    display: flex;
-    padding: $progress-text-padding;
-    font-size: $progress-text-font-size;
-    line-height: 1;
-    min-width: 35px;
-  }
-  &-insidetext {
-    position: absolute;
-    top: -4px;
-    bottom: -4px;
     display: flex;
     align-items: center;
-    min-width: 0px;
+    position: absolute;
+    top: $progress-text-position-top;
+    bottom: $progress-text-position-bottom;
     transition: all 0.4s;
     transform: translate(-50%);
-    border-radius: $progress-insidetext-border-radius;
+
+    &__inner {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      width: 100%;
+      color: $progress-text-color;
+      padding: $progress-text-padding;
+      border-radius: $progress-text-border-radius;
+      font-size: $progress-text-font-size;
+      line-height: 1;
+      background: $progress-text-background;
+    }
   }
+
   @keyframes progressActive {
     0% {
       background: rgba(255, 255, 255, 0.1);
       width: 0;
     }
+
     20% {
       background: rgba(255, 255, 255, 0.5);
       width: 0;
     }
+
     to {
       background: rgba(255, 255, 255, 0);
       width: 100%;

package/dist/packages/pulltorefresh/pulltorefresh.scss

@@ -0,0 +1,18 @@
+.nut-pulltorefresh {
+  &-head {
+    overflow: hidden;
+    position: relative;
+    font-size: 14px;
+
+    &-content {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      color: $title-color;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}

package/dist/packages/radio/radio.scss

@@ -9,9 +9,9 @@
     margin-right: 0 !important;
   }
 
-  &--reverse {
+  &.nut-radio--reverse {
     .nut-radio__label {
-      margin-right: 15px;
+      margin-right: $radio-label-margin-left;
       margin-left: 0;
     }
   }
@@ -19,27 +19,36 @@
   &__button {
     display: inline-flex;
     align-items: center;
-    padding: 5px 18px;
-    font-size: 12px;
-    background: #f6f7f9;
-    border-radius: 15px;
+    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;
     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;
     }
+
     &--disabled {
       color: $radio-label-disable-color;
-      border: none;
+      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: 15px;
-    font-size: 14px;
+    margin-left: $radio-label-margin-left;
+    font-size: $radio-label-font-size;
     color: $radio-label-font-color;
+
     &--disabled {
       color: $radio-label-disable-color;
     }
@@ -49,11 +58,16 @@
     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;
-  }
-  &__icon--disable {
-    color: $help-color;
+
+  &__icon {
+    &--unchecked {
+      color: $radio-icon-disable-color;
+    }
+
+    &--disable {
+      color: $radio-icon-disable-color2;
+    }
   }
 }

package/dist/packages/radiogroup/radiogroup.scss

@@ -1,22 +1,52 @@
 .nut-radiogroup {
-  display: inline-block;
   .nut-radio {
-    margin-bottom: 5px;
+    margin: $radiogroup-radio-margin;
+
+    &__label {
+      margin: $radiogroup-radio-label-margin;
+    }
+
+    &__button {
+      background-color: $radio-button-background;
+    }
   }
+
   &--vertical {
+    .nut-radio {
+      &.nut-radio--reverse {
+        width: 100%;
+        justify-content: space-between;
+      }
+
+      &__button {
+        border: 1px solid $radio-button-background;
+      }
+
+      &__button--active {
+        border-color: $radio-label-button-border-color;
+        background-color: $radio-label-button-background;
+      }
+    }
   }
+
   &--horizontal {
     .nut-radio {
       display: inline-flex;
-      margin-right: 10px;
-      &--round {
-        .nut-radio__label {
-          margin: 0 6px;
-        }
+
+      &__button {
+        border: 1px solid $gray6;
       }
-      &--button {
-        // ...
+
+      &__button--active {
+        border-color: $radio-label-button-border-color;
+        background-color: $radio-label-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;
+  }
 }