@nutui/nutui-react 2.0.0-alpha.12 → 2.0.0-alpha.14

package/dist/packages/popup/popup.scss

@@ -93,90 +93,177 @@
 }
 
 .nut-popup-slide {
-  &-center-enter,
-  &-center-exit {
-    opacity: 0;
+  @keyframes popup-scale-fade-in {
+    from {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
   }
 
-  &-center-enter-active {
-    opacity: 1;
-    transition: opacity 0.5s ease;
+  @keyframes popup-scale-fade-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(0.8);
+    }
   }
 
-  &-top-enter {
-    transform: translate(0, -100%);
+  &-default-enter-active {
+    animation-fill-mode: both;
+    animation-name: popup-scale-fade-in;
+    animation-duration: 0.3s;
   }
 
-  &-top-enter-active {
-    transform: translate(0, 0);
-    transition: transform 0.5s;
+  &-default-exit-active {
+    animation-fill-mode: both;
+    animation-name: popup-scale-fade-out;
+    animation-duration: 0.3s;
   }
 
-  &-top-exit {
-    transform: translate(0, 0);
+  @keyframes popup-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
   }
 
-  &-top-exit-active,
-  &-top-exit-done {
-    transform: translate(0, -100%);
-    transition: transform 0.5s;
+  @keyframes popup-fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
   }
 
-  &-right-enter {
-    transform: translate(100%, 0);
+  &-center-enter-active {
+    animation-fill-mode: both;
+    animation-name: popup-fade-in;
+    animation-duration: 0.3s;
   }
 
-  &-right-enter-active {
-    transform: translate(0, 0);
-    transition: transform 0.5s;
+  &-center-exit-active {
+    animation-fill-mode: both;
+    animation-name: popup-fade-out;
+    animation-duration: 0.3s;
   }
 
-  &-right-exit {
-    transform: translate(0, 0);
+  /* 从顶部滑出 */
+  @keyframes popup-slide-top-enter {
+    from {
+      transform: translate3d(0, -100%, 0);
+    }
+  }
+  @keyframes popup-slide-top-exit {
+    to {
+      transform: translate3d(0, -100%, 0);
+    }
   }
 
-  &-right-exit-active,
-  &-right-exit-done {
-    transform: translate(100%, 0);
-    transition: transform 0.5s;
+  &-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;
   }
 
-  &-bottom-enter {
-    transform: translate(0, 100%);
+  &-top-exit-active {
+    animation-fill-mode: both;
+    animation-name: popup-slide-top-exit;
+    animation-duration: 0.3s;
   }
 
-  &-bottom-enter-active {
-    transform: translate(0, 0);
-    transition: transform 0.5s;
+  /* 从右侧滑出 */
+  @keyframes popup-slide-right-enter {
+    from {
+      transform: translate3d(100%, 0, 0);
+    }
+  }
+  @keyframes popup-slide-right-exit {
+    to {
+      transform: translate3d(100%, 0, 0);
+    }
   }
 
-  &-bottom-exit {
-    transform: translate(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;
   }
 
-  &-bottom-exit-active,
-  &-bottom-exit-done {
-    transform: translate(0, 100%);
-    transition: transform 0.5s;
+  &-right-exit {
+    animation-fill-mode: both;
+    animation-name: popup-slide-right-exit;
+    animation-duration: 0.3s;
   }
 
-  &-left-enter {
-    transform: translate(-100%, 0);
+  /* 从底部滑出 */
+  @keyframes popup-slide-bottom-enter {
+    from {
+      transform: translate3d(0, 100%, 0);
+    }
+  }
+  @keyframes slide-bottom-exit {
+    to {
+      transform: translate3d(0, 100%, 0);
+    }
   }
 
-  &-left-enter-active {
+  &-bottom-enter-active,
+  &-bottom-appear-active {
     transform: translate(0, 0);
-    transition: transform 0.5s;
+    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-exit {
+  &-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 {
-    transform: translate(-100%, 0);
-    transition: transform 0.5s;
+    animation-fill-mode: both;
+    animation-name: popup-slide-left-exit;
+    animation-duration: 0.3s;
   }
 }
 

package/dist/packages/sidenavbar/sidenavbar.scss

@@ -1,13 +1,11 @@
 
-$nutSidenavbarItemHeight: 40px;
-
 .nut-sidenavbar {
   color: #1d1d21;
   font-size: 14px;
   height: 100%;
   overflow: auto;
   display: block;
-  background-color: $gray6;
+  background-color: $sidenavbar-content-bg-color;
 
   .arrow-icon {
     position: absolute;
@@ -30,17 +28,13 @@ $nutSidenavbarItemHeight: 40px;
     border-right: 4px solid transparent;
   }
 
-  &__head {
-    height: $nutSidenavbarItemHeight;
-    background: #eeeff2;
-    padding: 10px;
-  }
-
   &__title {
-    height: $nutSidenavbarItemHeight;
-    padding: 10px 8px 10px 20px;
-    background: $gray4;
-    color: $gray1;
+    height: $sidenav-bar-item-height;
+    padding: $sidenavbar-title-padding;
+    background: $sidenavbar-title-background;
+    color: $sidenavbar-title-color;
+    box-sizing: border-box;
+    transition: transform 0.5s;
   }
 
   &__content {
@@ -49,14 +43,14 @@ $nutSidenavbarItemHeight: 40px;
   }
 
   &__list {
-    &.nutShow {
+    &.sidenavbar-show {
       .nut-sidenavbar__content {
         height: auto;
         overflow: inherit;
       }
     }
 
-    &.nutHide {
+    &.sidenavbar-hide {
       .nut-sidenavbar__content {
         height: 0;
         overflow: hidden;
@@ -64,7 +58,7 @@ $nutSidenavbarItemHeight: 40px;
     }
   }
 
-  .border-bt {
+  .nut-subsidenavbar-border-bt {
     position: relative;
 
     &:after {

package/dist/packages/sidenavbaritem/sidenavbaritem.scss

@@ -1,25 +1,13 @@
-.nut-theme-dark {
-  .nut-subsidenavbar {
-    &__item {
-      background-color: $dark6;
-      color: $dark2;
-    }
-  }
-}
-$nutSidenavbarItemHeight: 40px;
-
 .nut-subsidenavbar {
   &__item {
-    height: $nutSidenavbarItemHeight;
-    color: $gray2;
-    padding: 10px 8px 10px 55px;
-  }
-  &__title {
-    background-color: $gray5;
-    color: $gray1;
+    height: $sidenav-bar-item-height;
+    color: $sidenavbar-sub-item-color;
+    padding: $sidenavbar-sub-item-padding;
+    box-sizing: border-box;
   }
+
   &__list {
-    background-color: $gray6;
-    color: $gray2;
+    background-color: $sidenavbar-sub-list-background;
+    color: $sidenavbar-sub-list-color;
   }
 }

package/dist/packages/subsidenavbar/subsidenavbar.scss

@@ -1,31 +1,22 @@
-.nut-theme-dark {
-  .nut-subsidenavbar {
-    background-color: $dark5;
-    &__title {
-      background-color: $dark6;
-      color: $dark1;
-      &__text {
-        color: $dark1;
-      }
-    }
-  }
-}
-$nutSidenavbarItemHeight: 40px;
-
 .nut-subsidenavbar {
   &__title {
-    height: $nutSidenavbarItemHeight;
-    padding: 10px 8px 10px 35px;
-    background: #f7f8fa;
+    height: $sidenav-bar-item-height;
+    padding: $sidenavbar-sub-title-padding;
+    box-sizing: border-box;
+    background-color: $sidenavbar-sub-title-background;
+    color: $sidenavbar-sub-title-color;
+    box-sizing: border-box;
   }
+
   &__list {
-    &.nutShow {
+    &.sidenavbar-show {
       .nut-subsidenavbar__content {
         height: auto;
         overflow: inherit;
       }
     }
-    &.nutHide {
+
+    &.sidenavbar-hide {
       .nut-subsidenavbar__content {
         height: 0;
         overflow: hidden;

package/dist/packages/trendarrow/trendarrow.scss

@@ -1,11 +1,12 @@
 .nut-trendarrow {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   font-size: $trendarrow-font-size;
   &__icon-before {
-    margin-right: $trendarrow-before-icon-margin;
+    margin-right: $trendarrow-icon-margin;
   }
   &__icon-after {
-    margin-left: $trendarrow-before-icon-margin;
+    margin-left: $trendarrow-icon-margin;
   }
   &__rate {
     vertical-align: middle;