@nutui/nutui-react 2.0.0-alpha.2 → 2.0.0-alpha.3

package/dist/packages/dialog/dialog.scss

@@ -9,10 +9,25 @@
   padding: $dialog-padding;
   box-sizing: border-box;
 
+  &__outer {
+    position: fixed;
+    max-height: 100%;
+    overflow-y: auto;
+    background-color: $white;
+    transition: transform 0.2s, -webkit-transform 0.2s;
+    -webkit-overflow-scrolling: touch;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    border-radius: $dialog-outer-bordder-radius;
+    z-index: $dialog-outer-z-index;
+    animation-duration: 0.3s;
+  }
+
   &__header {
     display: block;
     text-align: center;
-    // height: $dialog-header-height;
     font-size: $font-size-3;
     color: $title-color;
     @include oneline-ellipsis();
@@ -30,6 +45,7 @@
     word-wrap: break-word;
     word-break: break-all;
     white-space: pre-wrap;
+    text-align: $dialog-content-text-align;
   }
 
   &__footer {
@@ -69,67 +85,22 @@
   }
 }
 
-.nut-dialog__mask {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  background-color: $dialog-mask-background-color;
-  z-index: $dialog-mask-z-index;
-}
-
-.nut-dialog__wrap {
-  position: fixed;
-  overflow: auto;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $dialog-mask-z-index;
-  -webkit-overflow-scrolling: touch;
-  outline: 0;
-}
-
-.nut-dialog__outer {
-  position: fixed;
-  max-height: 100%;
-  overflow-y: auto;
-  background-color: $white;
-  -webkit-transition: -webkit-transform 0.2s;
-  transition: -webkit-transform 0.2s;
-  transition: transform 0.2s;
-  transition: transform 0.2s, -webkit-transform 0.2s;
-  -webkit-overflow-scrolling: touch;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-  border-radius: $dialog-outer-bordder-radius;
-  z-index: $dialog-outer-z-index;
-  animation-duration: 0.3s;
-}
-
-.fadeDialog-enter,
-.fadeDialog-appear {
-  opacity: 0;
-}
-
-.fadeDialog-enter-active,
-.fadeDialog-appear-active {
-  opacity: 1;
-  transition: opacity 1s cubic-bezier(0.3, 1.3, 0.3, 1);
-}
-
-.fadeDialog-exit {
-  opacity: 1;
-}
-
-.fadeDialog-exit-active {
-  opacity: 0;
-  transition: opacity 1s cubic-bezier(0.3, 1.3, 0.3, 1);
-}
-
-.nut-overflow-hidden {
-  overflow: hidden !important;
-}
+// .fadeDialog-enter,
+// .fadeDialog-appear {
+//   opacity: 0;
+// }
+
+// .fadeDialog-enter-active,
+// .fadeDialog-appear-active {
+//   opacity: 1;
+//   transition: opacity 1s cubic-bezier(0.3, 1.3, 0.3, 1);
+// }
+
+// .fadeDialog-exit {
+//   opacity: 1;
+// }
+
+// .fadeDialog-exit-active {
+//   opacity: 0;
+//   transition: opacity 1s cubic-bezier(0.3, 1.3, 0.3, 1);
+// }

package/dist/packages/overlay/overlay.scss

@@ -6,11 +6,14 @@
   height: 100%;
   background: $overlay-bg-color;
 }
+
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
-.overlay-fade-enter-active {
+
+.nut-overlay-fade-enter-active {
   animation: nut-fade-in;
+
   .wrapper {
     .content {
       background-color: $overlay-content-bg-color;
@@ -18,15 +21,19 @@
     }
   }
 }
-.overlay-fade-leave-active {
+
+.nut-overlay-fade-leave-active {
   animation: nut-fade-out;
 }
-.first-render {
+
+.nut-overlay-first-render {
   display: none;
 }
-.hidden-render {
+
+.nut-overlay-hidden-render {
   display: none;
 }
+
 @keyframes nut-fade-in {
   0% {
     opacity: 0;

package/dist/packages/switch/switch.scss

@@ -1,24 +1,8 @@
-.nut-theme-dark {
-  .nut-switch {
-    background-color: $dark4;
-
-    &.switch-close {
-      color: $dark1;
-    }
-
-    .switch-button {
-      .close {
-        color: $dark4;
-      }
-    }
-  }
-}
-
 .nut-switch {
   cursor: pointer;
   display: flex;
   align-items: center;
-  background-color: $primary-color;
+  background-color: $switch-active-background-color;
   border-radius: $switch-border-radius;
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -26,10 +10,9 @@
   flex: 0 0 auto; // 防止被压缩
 
   &.switch-close {
-    background-color: $switch-close-bg-color;
-
+    background-color: $switch-inactive-background-color;
     .close-line {
-      background: $switch-close--line-bg-color;
+      background: $switch-close-line-background-color;
       border-radius: 2px;
     }
   }
@@ -41,22 +24,21 @@
     border-radius: 50%;
     background: $primary-text-color;
     transition: transform 0.3s;
+  }
 
-    .nut-switch__label {
-      color: $primary-text-color;
-      font-size: $font-size-1;
-
-      &.open {
-        transform: translateX(-16px);
-      }
+  &__label {
+    color: $primary-text-color;
+    font-size: $font-size-1;
+    &.open {
+      transform: translateX(-16px);
+    }
 
-      &.close {
-        transform: translateX(16px);
-      }
+    &.close {
+      transform: translateX(16px);
     }
   }
 
-  &-disable {
+  &-disabled {
     opacity: 0.6;
   }