@nutui/nutui-react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/dist/packages/audio/audio.scss

@@ -1,17 +1,3 @@
-.nut-theme-dark {
-  .nut-audio {
-    .nut-audio__icon {
-      &-stop::after {
-        background-color: $dark3;
-      }
-    }
-    .nut-audio__none-container {
-      .nut-voice {
-        border: 1px solid $white;
-      }
-    }
-  }
-}
 
 .nut-audio {
   &__icon {
@@ -23,7 +9,7 @@
       justify-content: center;
       width: 30px;
       height: 30px;
-      background: #fff;
+      background: $white;
       border-radius: 50%;
       box-shadow: 0 0 8px rgba(117, 117, 117, 0.5);
 
@@ -88,6 +74,7 @@
   .nut-audio__none-container {
     .nut-voice {
       border: 1px solid $title-color;
+      align-items: center;
     }
   }
 }

package/dist/packages/badge/badge.scss

@@ -1,18 +1,8 @@
-.nut-theme-dark {
-  .nut-badge {
-    &.show {
-      background: $dark4;
-      color: $dark1;
-    }
-  }
-}
-
 .nut-badge {
   position: relative;
   display: inline-block;
-  margin-right: 40px;
 
-  .slot-icon {
+  &__icon {
     display: flex;
     position: absolute;
     background: $badge-background-color;
@@ -25,10 +15,10 @@
     z-index: $badge-z-index;
   }
 
-  .sup {
+  &__sup {
     position: absolute;
     background: $badge-background-color;
-    color: $badge-default-background-color;
+    color: $badge-color;
     padding: $badge-padding;
     font-size: $badge-font-size;
     font-weight: normal;
@@ -38,15 +28,15 @@
     border-radius: $badge-border-radius;
   }
 
-  .nut-badge__content {
+  &__content {
     transform: $badge-content-transform;
   }
 
-  .is-dot {
+  &__dot {
     width: $badge-dot-width;
-    height: $badge-dot-height;
+    height: $badge-dot-width;
     border: $badge-border;
-    border-radius: $badge-dot-border-radius;
-    padding: $badge-dot-padding;
+    border-radius: $badge-dot-width;
+    padding: 0;
   }
 }

package/dist/packages/calendar/calendar.scss

@@ -1,34 +1,4 @@
 
-.nut-theme-dark {
-  .nut-calendar {
-    background: $dark5;
-    color: $dark1;
-
-    .nut-calendar-header {
-      background: $dark5;
-      color: $dark1;
-    }
-
-    .nut-calendar-content {
-      .calendar-months-panel {
-        .calendar-month-con {
-          .calendar-month-day {
-            &-choose {
-              background-color: rgba(#fa2c19, 0.09);
-              color: $calendar-choose-font-color;
-            }
-          }
-        }
-      }
-    }
-
-    .nut-calendar-footer {
-      background: $dark5;
-      color: $dark1;
-    }
-  }
-}
-
 .nut-calendar {
   position: relative;
   display: flex;

package/dist/packages/cascader/cascader.scss

@@ -1,30 +1,4 @@
 
-.nut-theme-dark {
-  .nut-cascader {
-    .nut-cascader__bar {
-      background: $dark5;
-      color: $dark1;
-    }
-
-    .nut-tabs__titles {
-      background: $dark5;
-    }
-
-    &__title {
-      color: $dark1;
-      background-color: $dark5;
-    }
-
-    .nut-tabpane {
-      background-color: $dark5;
-    }
-
-    .nut-cascader-item {
-      color: $dark1;
-    }
-  }
-}
-
 .nut-cascader {
   width: 100%;
   font-size: $cascader-font-size;

package/dist/packages/cellgroup/cellgroup.scss

@@ -27,25 +27,29 @@
     overflow: hidden;
     background-color: $cell-group-background-color;
     margin: 10px 0;
+    .nut-cell {
+      margin: 0;
+      box-shadow: none;
+      border-radius: 0;
+    }
   }
 
-  .nut-cell {
-    margin: 0;
-    box-shadow: none;
-    border-radius: 0;
-    &__divider {
-      position: absolute;
-      box-sizing: border-box;
-      pointer-events: none;
-      right: $cell-divider-right;
-      bottom: 0;
-      left: $cell-divider-left;
-      transform: scaleY(0.5);
-      border-bottom: $cell-divider-border-bottom;
-    }
-    &:last-child {
+  &__wrap--divider {
+    .nut-cell {
       &__divider {
-        border: 0 !important;
+        position: absolute;
+        box-sizing: border-box;
+        pointer-events: none;
+        right: $cell-divider-right;
+        bottom: 0;
+        left: $cell-divider-left;
+        transform: scaleY(0.5);
+        border-top: $cell-divider-border-bottom;
+      }
+      &:last-child {
+        .nut-cell__divider {
+          border-top: 0 !important;
+        }
       }
     }
   }

package/dist/packages/checkbox/checkbox.scss

@@ -1,47 +1,44 @@
 
-.nut-theme-dark {
-  .nut-checkbox {
-    &__label {
-      color: $dark1;
-      &--disabled {
-        color: $checkbox-label-disable-color;
-      }
-    }
-  }
-}
-
 .nut-checkbox {
   display: flex;
   align-items: center;
+
   &--reverse {
     flex-direction: row-reverse;
+
     .nut-checkbox__label {
       margin-right: $checkbox-label-margin-left;
       margin-left: 0;
     }
   }
+
   &__label {
     margin-left: $checkbox-label-margin-left;
     font-size: $checkbox-label-font-size;
     color: $checkbox-label-color;
+
     &--disabled {
       color: $checkbox-label-disable-color;
     }
   }
+
   &__icon {
     color: $primary-color;
     font-size: $checkbox-icon-font-size;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
   }
+
   &__icon--unchecked {
     color: $checkbox-icon-disable-color;
     font-size: $checkbox-icon-font-size;
   }
+
   &__icon--indeterminate {
     color: $primary-color;
     font-size: $checkbox-icon-font-size;
   }
+
   &__icon--disable {
     color: $disable-color;
     font-size: $checkbox-icon-font-size;

package/dist/packages/circleprogress/circleprogress.scss

@@ -1,12 +1,3 @@
-.nut-theme-dark {
-  .nut-circleprogress-text {
-    color: $dark1;
-  }
-}
-
-.demo-circleprogress {
-  min-height: 100vh;
-}
 .nut-circleprogress {
   position: relative;
 

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

@@ -1,22 +1,3 @@
-.nut-theme-dark {
-  .nut-elevator {
-    background-color: $dark6;
-    &__list {
-      &__inner {
-        background-color: $dark6;
-      }
-      &__item {
-        color: $dark1;
-        &__code {
-          color: $dark1;
-        }
-      }
-      &__fixed {
-        background-color: $dark6;
-      }
-    }
-  }
-}
 .nut-elevator {
   width: 100%;
   display: block;
@@ -48,15 +29,8 @@
         padding: $elevator-list-item-code-padding;
         font-weight: $elevator-list-item-code-font-weight;
         box-sizing: border-box;
-        &::after {
-          content: ' ';
-          width: $elevator-list-item-code-after-width;
-          height: $elevator-list-item-code-after-height;
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          background-color: $elevator-list-item-code-after-bg-color;
-        }
+        border-bottom: $elevator-list-item-code-border-bottom solid
+          $elevator-list-item-code-border-bottom-color;
       }
       &__name {
         display: flex;

package/dist/packages/empty/empty.scss

@@ -1,12 +1,3 @@
-.nut-theme-dark {
-  .nut-empty {
-    background: $dark6;
-    &__description {
-      color: $dark1;
-    }
-  }
-}
-
 .nut-empty {
   box-sizing: border-box;
   display: flex;

package/dist/packages/imagepreview/imagepreview.scss

@@ -1,18 +1,14 @@
+
 .nut-imagepreview {
   width: 100%;
+  height: 100%;
 
   &-swiper {
-    height: 327px;
+    height: 100%;
     width: 100vw;
     background-color: transparent;
   }
 
-  &-img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-
   &-index {
     position: fixed;
     z-index: 2002;
@@ -39,13 +35,53 @@
     overflow: visible;
     background-color: transparent;
   }
-}
-.custom-pop {
-  height: 100%;
-  background: transparent !important;
-  display: flex;
-  align-items: center;
-}
-.nut-imagepreview-swiper .nut-swiper-item {
-  height: 327px;
+
+  &-pop {
+    height: 100%;
+    background: transparent !important;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  &-swiper {
+    swiper {
+      width: 100%;
+      height: 100%;
+    }
+
+    swiper-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      .nut-image-preview-box {
+        width: 100%;
+      }
+
+      .nut-video {
+        video {
+          object-fit: contain;
+        }
+      }
+    }
+
+    .nut-swiper-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      .nut-image-preview-box {
+        width: 100%;
+      }
+
+      .nut-video {
+        video {
+          object-fit: contain;
+        }
+      }
+    }
+  }
 }