@nutui/nutui-react 2.0.0-alpha.9 → 2.0.0-beta.1

package/dist/packages/popup/popup.scss

@@ -7,6 +7,25 @@
   color: $gray1;
   -webkit-overflow-scrolling: touch;
 
+  &-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;
+  }
+
+  &-left-icon {
+    position: absolute;
+    top: $popup-close-icon-margin;
+    left: $popup-close-icon-margin;
+  }
+
   &__close-icon {
     position: absolute !important;
     z-index: 1;
@@ -93,90 +112,181 @@
 }
 
 .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);
+    }
+  }
+
+  @keyframes popup-scale-fade-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+  }
+
+  &-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;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes popup-fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
   }
 
   &-center-enter-active {
-    opacity: 1;
-    transition: opacity 0.5s ease;
+    animation-fill-mode: both;
+    animation-name: popup-fade-in;
+    animation-duration: 0.3s;
   }
 
-  &-top-enter {
-    transform: translate(0, -100%);
+  &-center-exit-active {
+    animation-fill-mode: both;
+    animation-name: popup-fade-out;
+    animation-duration: 0.3s;
   }
 
-  &-top-enter-active {
-    transform: translate(0, 0);
-    transition: transform 0.5s;
+  /* 从顶部滑出 */
+  @keyframes popup-slide-top-enter {
+    from {
+      transform: translate3d(0, -100%, 0);
+    }
   }
 
-  &-top-exit {
-    transform: translate(0, 0);
+  @keyframes popup-slide-top-exit {
+    to {
+      transform: translate3d(0, -100%, 0);
+    }
   }
 
-  &-top-exit-active,
-  &-top-exit-done {
-    transform: translate(0, -100%);
-    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;
   }
 
-  &-right-enter {
-    transform: translate(100%, 0);
+  &-top-exit-active {
+    animation-fill-mode: both;
+    animation-name: popup-slide-top-exit;
+    animation-duration: 0.3s;
   }
 
-  &-right-enter-active {
-    transform: translate(0, 0);
-    transition: transform 0.5s;
+  /* 从右侧滑出 */
+  @keyframes popup-slide-right-enter {
+    from {
+      transform: translate3d(100%, 0, 0);
+    }
   }
 
-  &-right-exit {
-    transform: translate(0, 0);
+  @keyframes popup-slide-right-exit {
+    to {
+      transform: translate3d(100%, 0, 0);
+    }
   }
 
-  &-right-exit-active,
-  &-right-exit-done {
-    transform: translate(100%, 0);
-    transition: transform 0.5s;
+  &-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-enter {
-    transform: translate(0, 100%);
+  &-right-exit {
+    animation-fill-mode: both;
+    animation-name: popup-slide-right-exit;
+    animation-duration: 0.3s;
   }
 
-  &-bottom-enter-active {
-    transform: translate(0, 0);
-    transition: transform 0.5s;
+  /* 从底部滑出 */
+  @keyframes popup-slide-bottom-enter {
+    from {
+      transform: translate3d(0, 100%, 0);
+    }
   }
 
-  &-bottom-exit {
+  @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-active,
-  &-bottom-exit-done {
-    transform: translate(0, 100%);
-    transition: transform 0.5s;
+  &-bottom-exit {
+    animation-fill-mode: both;
+    animation-name: slide-bottom-exit;
+    animation-duration: 0.3s;
   }
 
-  &-left-enter {
-    transform: translate(-100%, 0);
+  /* 从左侧滑出 */
+  @keyframes popup-slide-left-enter {
+    from {
+      transform: translate3d(-100%, 0, 0);
+    }
   }
 
-  &-left-enter-active {
-    transform: translate(0, 0);
-    transition: transform 0.5s;
+  @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/searchbar/searchbar.scss

@@ -1,46 +1,3 @@
-.nut-theme-dark {
-  .nut-searchbar {
-    background: $dark5;
-
-    &__label {
-      color: $dark1;
-    }
-
-    &__action-text {
-      color: $dark1;
-    }
-
-    .nut-searchbar__input-clear {
-      & .nut-searchbar__nut-icon-mask-close {
-        color: $dark1;
-
-        &:hover {
-          cursor: pointer;
-          color: $dark1;
-        }
-      }
-    }
-
-    &__right-search-icon,
-    &__left-search-icon {
-      color: $dark1;
-    }
-
-    &__leftout-icon,
-    &__rightout-icon {
-      i {
-        color: $dark1;
-      }
-    }
-  }
-}
-
-.val-text {
-  font-size: 12px;
-  color: $title-color2;
-  padding: 0 20px;
-}
-
 .nut-searchbar {
   display: flex;
   align-items: center;
@@ -49,6 +6,7 @@
   background: $searchbar-background;
   color: $gray1;
   box-sizing: border-box;
+  justify-content: center;
 
   &__content {
     position: relative;
@@ -65,11 +23,12 @@
     padding: 0 5px 0 10px;
   }
 
-  &__rightin-icon {
+  &__rightin {
+    display: flex;
     padding: 0 5px;
   }
 
-  .nut-searchbar__input-box {
+  &__input-box {
     display: flex;
     align-items: center;
     flex: 1;
@@ -89,6 +48,7 @@
     color: $searchbar-input-text-color;
     caret-color: $searchbar-input-curror-color;
     background: transparent;
+    text-align: $searchbar-input-text-align;
   }
 
   &__round {
@@ -112,34 +72,16 @@
   }
 
   &__left {
-    text-align: left;
+    display: flex;
+    padding: $searchbar-left-padding;
+    font-size: $searchbar-left-fontsize;
+    color: $searchbar-left-color;
   }
 
   &__right {
-    text-align: right;
-  }
-
-  &__center {
-    text-align: center;
-  }
-
-  &__label {
-    padding: $searchbar-label-padding;
-    font-size: $searchbar-label-fontsize;
-    color: $searchbar-label-color;
-  }
-
-  &__action-text {
-    padding: $searchbar-action-text-padding;
-    font-size: $searchbar-action-text-fontsize;
-    color: $searchbar-action-text-color;
-  }
-
-  &__leftout-icon {
-    margin-right: 10px;
-  }
-
-  &__rightout-icon {
-    margin-left: 10px;
+    display: flex;
+    padding: $searchbar-right-padding;
+    font-size: $searchbar-right-fontsize;
+    color: $searchbar-right-color;
   }
 }

package/dist/packages/shortpassword/shortpassword.scss

@@ -1,87 +1,4 @@
 
-.nut-theme-dark {
-  .nut-shortpassword {
-    &__title {
-      color: $dark1;
-    }
-
-    &__subtitle {
-      color: $dark2;
-    }
-
-    &__message__forget {
-      color: $dark3;
-    }
-
-    &__input-real {
-      background-color: $dark6;
-      border-radius: 4px;
-    }
-
-    &__input-site {
-      background-color: $dark6;
-    }
-
-    &__input-fake {
-      border: none;
-      background-color: $dark4;
-
-      &__li__icon {
-        background-color: $dark1;
-      }
-    }
-
-    &__message__forget {
-      color: $dark2;
-    }
-  }
-}
-
-.nut-shortpsd-title {
-  line-height: 1;
-  font-size: $font-size-3;
-  color: $title-color;
-}
-
-.nut-shortpsd-subtitle {
-  display: block;
-  margin-top: 12px;
-  margin-bottom: 24px;
-  line-height: 1;
-  font-size: $font-size-1;
-  color: $text-color;
-}
-
-.nut-shortpsdWx-subtitle {
-  display: block;
-  margin-top: 12px;
-  line-height: 1;
-  font-size: $font-size-1;
-  color: $text-color;
-}
-
-.nut-input-w {
-  padding: 24px 0 10px 0;
-  text-align: center;
-  position: relative;
-
-  .nut-input-site {
-    width: 247px;
-    height: 41px;
-    border-radius: 4px;
-  }
-
-  .nut-input-real {
-    position: absolute;
-    right: 247px;
-    width: 247px;
-    height: 41px;
-    outline: 0 none;
-    border: 0;
-    text-decoration: none;
-  }
-}
-
 .nut-shortpassword {
   &__title {
     line-height: 1;
@@ -89,7 +6,7 @@
     color: $title-color;
   }
 
-  &__subtitle {
+  &__description {
     margin-top: 12px;
     margin-bottom: 24px;
     line-height: 1;
@@ -168,10 +85,6 @@
       color: $shortpassword-forget;
       display: flex;
       align-items: center;
-
-      &-tips {
-        margin-left: 3px;
-      }
     }
   }
 

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/signature/signature.scss

@@ -1,15 +1,3 @@
-.nut-theme-dark {
-  .nut-signature {
-    &__inner {
-      Canvas {
-        background-color: $dark3;
-      }
-    }
-  }
-  .demo-tips {
-    color: $dark1;
-  }
-}
 .nut-signature {
   .spcanvas_WEAPP {
     width: 100%;
@@ -22,18 +10,13 @@
     Canvas {
       background-color: #fff;
     }
-
     height: $signature-height;
-    margin-bottom: $signature-margin-bottom;
     border: $signature-border-width solid $signature-border-color;
     display: flex;
     justify-content: center;
     align-items: center;
   }
-  &__unsopport {
+  &__unsupport {
     font-size: $font-size-base;
   }
-  &__btn {
-    margin-right: $signature-btn-margin-right !important;
-  }
 }

package/dist/packages/skeleton/skeleton.scss

@@ -4,44 +4,42 @@
   position: relative;
   overflow: hidden;
   vertical-align: middle;
+  width: 100%;
 
-  .nut-skeleton-content {
+  &__content {
     display: flex;
 
-    .avatarClass {
+    .avatar {
       margin-right: 20px;
-      background: rgb(239, 239, 239);
+      background: $skeleton-background !important;
     }
 
-    .blockClass,
-    .blockClass--round {
-      width: 100%;
-      height: 100%;
-      background: rgb(239, 239, 239);
+    .nut-skeleton__block {
+      width: $skeleton-line-width;
+      height: $skeleton-line-height;
+      background: $skeleton-background;
       margin-top: 10px;
+      border-radius: $skeleton-line-border-radius;
 
       &:last-child {
-        width: 70% !important;
+        width: 70%;
       }
     }
 
-    .blockClass--round {
-      border-radius: 10px;
-    }
-
-    .skeleton-content-line {
+    &-line {
+      width: 100%;
       display: flex;
       flex-direction: column;
 
-      .skeleton-title {
+      .nut-skeleton__title {
         width: 30%;
-        height: 15px;
-        background: $skeleton-content-line-title-background-color;
+        height: $skeleton-line-height;
+        background: $skeleton-background;
       }
     }
   }
 
-  .skeleton-animation {
+  &__animation {
     position: absolute;
     top: 0;
     left: 0;
@@ -55,10 +53,10 @@
       hsla(0, 0%, 100%, 0) 80%
     );
     background-repeat: no-repeat;
-    animation: backpos 2s ease-in-out 0s infinite;
+    animation: nut-skeleton 2s ease-in-out 0s infinite;
   }
 
-  @keyframes backpos {
+  @keyframes nut-skeleton {
     0% {
       background-position-x: -500px;
     }