@nutui/nutui-react 1.3.8 → 1.3.9

package/dist/packages/card/card.scss

@@ -1,5 +1,13 @@
 @import '../../styles/mixins/text-ellipsis.scss';
 
+.nut-theme-dark {
+  .nut-card {
+    .nut-card__right {
+      color: $dark-color;
+    }
+  }
+}
+
 .nut-card {
   width: 100%;
   display: flex;

package/dist/packages/cascader/cascader.scss

@@ -1,3 +1,19 @@
+
+.nut-theme-dark {
+  .nut-cascader__bar {
+    background: $dark-background2;
+    color: $dark-color;
+  }
+
+  .nut-tabs__titles {
+    background: $dark-background3 !important;
+  }
+
+  .nut-cascader-item {
+    color: $dark-color-gray;
+  }
+}
+
 .nut-cascader {
   width: 100%;
   font-size: $cascader-font-size;

package/dist/packages/cell/cell.scss

@@ -1,3 +1,10 @@
+.nut-theme-dark {
+  .nut-cell {
+    background: $dark-background2;
+    color: $dark-color;
+    box-shadow: none;
+  }
+}
 
 .nut-cell {
   position: relative;

package/dist/packages/checkbox/checkbox.scss

@@ -1,3 +1,14 @@
+.nut-theme-dark {
+  .nut-checkbox {
+    &__label {
+      color: $dark-color;
+      &--disabled {
+        color: $checkbox-label-disable-color;
+      }
+    }
+  }
+}
+
 .nut-checkbox {
   display: flex;
   align-items: center;

package/dist/packages/circleprogress/circleprogress.scss

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

package/dist/packages/collapseitem/collapseitem.scss

@@ -1,3 +1,24 @@
+.nut-theme-dark {
+  .nut-collapse-item {
+    .collapse-item {
+      background: $dark-background;
+      color: $dark-color;
+      box-shadow: none;
+    }
+    .collapse-wrapper {
+      .collapse-content,
+      .collapse-extraRender {
+        background: $dark-background;
+        color: $dark-color;
+      }
+    }
+    .collapse-extraWrapper {
+      .collapse-extraRender {
+        background: $dark-background;
+      }
+    }
+  }
+}
 
 .nut-collapseitem {
 }

package/dist/packages/elevator/elevator.scss

@@ -1,3 +1,19 @@
+.nut-theme-dark {
+  .nut-elevator {
+    background-color: $dark-background2;
+    &__list {
+      &__item {
+        color: $dark-color;
+        &__code {
+          color: $dark-color;
+        }
+      }
+      &__fixed {
+        background-color: $dark-background2;
+      }
+    }
+  }
+}
 .nut-elevator {
   width: 100%;
   display: block;
@@ -12,7 +28,7 @@
       height: 100%;
       width: 100%;
       display: block;
-      overflow: auto;
+      //   overflow: auto;
     }
     &__item {
       display: block;

package/dist/packages/empty/empty.scss

@@ -1,3 +1,9 @@
+.nut-theme-dark {
+  .nut-empty {
+    background: $dark-background;
+  }
+}
+
 .nut-empty {
   box-sizing: border-box;
   display: flex;

package/dist/packages/infiniteloading/infiniteloading.scss

@@ -1,3 +1,21 @@
+.nut-theme-dark {
+  .nut-infiniteloading {
+    .nut-infinite-top {
+      .top-text {
+        color: $dark-color;
+      }
+    }
+
+    .nut-infinite-bottom {
+      color: $dark-color;
+
+      .bottom-text {
+        color: $dark-color;
+      }
+    }
+  }
+}
+
 .nut-infiniteloading {
   display: block;
   width: 100%;

package/dist/packages/inputnumber/inputnumber.scss

@@ -1,3 +1,25 @@
+.nut-theme-dark {
+  .nut-inputnumber {
+    &__icon {
+      color: $dark-color;
+      &--disabled {
+        color: $dark-color-gray;
+      }
+    }
+    input,
+    &__text--readonly {
+      background-color: $dark-background;
+      color: $dark-color;
+      border: 1px solid $dark-color-gray;
+    }
+    &--disabled {
+      input {
+        color: $dark-color-gray;
+      }
+    }
+  }
+}
+
 .nut-inputnumber {
   display: flex;
   align-items: center;

package/dist/packages/navbar/navbar.scss

@@ -1,3 +1,12 @@
+.nut-theme-dark {
+  .nut-navbar {
+    background: $dark-background;
+    color: $dark-color;
+    .title {
+      color: $dark-color;
+    }
+  }
+}
 .nut-navbar {
   position: relative;
   display: flex;

package/dist/packages/numberkeyboard/numberkeyboard.scss

@@ -1,3 +1,13 @@
+.nut-theme-dark {
+  .nut-numberkeyboard {
+    background-color: $dark-background4;
+    .number-board-body .key-board-wrapper .key {
+      background-color: $dark-background5;
+      color: $dark-color;
+    }
+  }
+}
+
 .nut-numberkeyboard {
   width: $numberkeyboard-width;
   padding: $numberkeyboard-padding;

package/dist/packages/pagination/pagination.scss

@@ -1,3 +1,22 @@
+.nut-theme-dark {
+  .nut-pagination {
+    &-prev,
+    &-item,
+    &-next {
+      background: $dark-background;
+      border-color: $dark-color-gray;
+    }
+    &-simple {
+      background: $dark-background;
+    }
+    .simple-border {
+      border-color: $dark-color-gray;
+    }
+    .disabled {
+      background: $dark-background;
+    }
+  }
+}
 .nut-pagination {
   display: flex;
   font-size: $pagination-font-size;
@@ -35,7 +54,8 @@
     padding: $pagination-prev-next-padding;
   }
   .simple-border {
-    border-right: $pagination-item-border-width solid $pagination-item-border-color;
+    border-right: $pagination-item-border-width solid
+      $pagination-item-border-color;
   }
   .active {
     color: $white;

package/dist/packages/picker/picker.scss

@@ -1,3 +1,42 @@
+
+.nut-theme-dark {
+  .nut-picker {
+    &__title {
+      color: $dark-color;
+    }
+
+    &-roller {
+      &-item {
+        color: $dark-color;
+      }
+
+      &-item-tile {
+        color: $dark-color;
+      }
+    }
+
+    &-roller-mask {
+      background-image: linear-gradient(
+          180deg,
+          rgba(27, 27, 27, 0.9),
+          rgba(27, 27, 27, 0.4)
+        ),
+        linear-gradient(0deg, rgba(27, 27, 27, 0.9), rgba(27, 27, 27, 0.4));
+      background-repeat: no-repeat;
+      background-position: top, bottom;
+      background-size: 100% 108px;
+      z-index: 1;
+    }
+
+    &-content {
+      color: $dark-color;
+    }
+    &-item {
+      color: $dark-color;
+    }
+  }
+}
+
 .nut-picker {
   background-color: #fff;
   width: 100%;

package/dist/packages/popup/popup.scss

@@ -1,3 +1,14 @@
+.nut-theme-dark {
+  .nut-popup {
+    background: $dark-background2;
+  }
+  .nutui-popup {
+    &__close-icon {
+      color: $dark-color;
+    }
+  }
+}
+
 .popup-slide {
   &-center-enter,
   &-center-exit {

package/dist/packages/radio/radio.scss

@@ -1,3 +1,21 @@
+.nut-theme-dark {
+  .nut-radio {
+    &__label {
+      color: $dark-color;
+      &--disabled {
+        color: $radio-label-disable-color;
+      }
+    }
+    &__button {
+      background: $dark-background;
+      color: $dark-color;
+      &--disabled {
+        color: $radio-label-disable-color;
+        border: 1px solid $radio-label-disable-color;
+      }
+    }
+  }
+}
 
 .nut-radio {
   display: flex;

package/dist/packages/shortpassword/shortpassword.scss

@@ -1,3 +1,65 @@
+.nut-theme-dark {
+  .nut-shortpsd-title {
+    color: $dark-color;
+  }
+  .nut-input-normalw {
+    .nut-input-real {
+      background: $dark-background3;
+    }
+    .nut-shortpsd-fake {
+      border: none;
+      background: $dark-background3;
+      .nut-shortpsd-li {
+        .nut-shortpsd-icon {
+          background: $dark-color;
+        }
+      }
+    }
+  }
+}
+
+.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;

package/dist/packages/sidenavbaritem/sidenavbaritem.scss

@@ -1,3 +1,12 @@
+.nut-theme-dark {
+  .nut-sidenavbaritem {
+    background-color: $dark-background2;
+    &__title {
+      background-color: $dark-background2;
+      color: $dark-color;
+    }
+  }
+}
 $nutSidenavbarItemHeight: 40px;
 
 .nut-subsidenavbar {

package/dist/packages/subsidenavbar/subsidenavbar.scss

@@ -1,3 +1,15 @@
+.nut-theme-dark {
+  .nut-subsidenavbar {
+    background-color: $dark-background2;
+    &__title {
+      background-color: $dark-background3;
+      color: $dark-color;
+      &__text {
+        color: $dark-color;
+      }
+    }
+  }
+}
 $nutSidenavbarItemHeight: 40px;
 
 .nut-subsidenavbar {

package/dist/packages/tabbar/tabbar.scss

@@ -1,3 +1,8 @@
+.nut-theme-dark {
+  .nut-tabbar {
+    background: $dark-background;
+  }
+}
 .nut-tabbar {
   border: 0px;
   box-shadow: $tabbar-box-shadow;

package/dist/packages/tabbaritem/tabbaritem.scss

@@ -1,3 +1,10 @@
+.nut-theme-dark {
+  .nut-tabbar-item {
+    &__icon--unactive {
+      color: $dark-color-gray;
+    }
+  }
+}
 
 .nut-tabbar-item {
   flex: 1;

package/dist/packages/table/table.scss

@@ -1,3 +1,41 @@
+.nut-theme-dark {
+  .nut-table {
+    &__main {
+      color: $dark-color;
+      background-color: $dark-background2;
+
+      &--striped {
+        .nut-table__main__head {
+          &__tr {
+            background-color: $dark-background3;
+          }
+        }
+
+        .nut-table__main__body {
+          &__tr:nth-child(odd) {
+            background-color: $dark-color-gray;
+          }
+        }
+
+        .nut-table__main__body {
+          &__tr:nth-child(even) {
+            background-color: $dark-background3;
+          }
+        }
+      }
+    }
+
+    &__summary {
+      color: $dark-color;
+      background-color: $dark-background;
+    }
+
+    &__nodata {
+      color: $dark-color;
+      background-color: $dark-background;
+    }
+  }
+}
 .nut-table {
   display: flex;
   width: 100%;

package/dist/packages/tabpane/tabpane.scss

@@ -1,3 +1,8 @@
+.nut-theme-dark {
+  .nut-tabpane {
+    background: $dark-background2;
+  }
+}
 .nut-tabpane {
   width: 100%;
   flex-shrink: 0;

package/dist/packages/tabs/tabs.scss

@@ -1,4 +1,26 @@
 @import '../../styles/mixins/index';
+.nut-theme-dark {
+  .nut-tabs {
+    &__titles {
+      background: $dark-background3;
+      &-item {
+        color: $dark-color-gray;
+        &.active {
+          color: $dark-color;
+        }
+      }
+    }
+    &.vertical {
+      .nut-tabs__titles {
+        &-item {
+          &.active {
+            background-color: $dark-background2;
+          }
+        }
+      }
+    }
+  }
+}
 
 .nut-tabs {
   display: flex;
@@ -12,6 +34,7 @@
     width: 100%;
 
     .nut-tabs__titles {
+      box-sizing: border-box;
       flex-direction: column;
       height: 100%;
       padding: 10px 0 !important;
@@ -62,8 +85,11 @@
     }
 
     .nut-tabs__content {
-      flex: 1;
       flex-direction: column;
+      &__wrap {
+        flex: 1;
+      }
+      height: 100%;
 
       .nut-tabpane {
         height: 100%;
@@ -79,6 +105,7 @@
     background: $tabs-titles-background-color;
     border-radius: $tabs-titles-border-radius;
     flex-shrink: 0;
+    overflow: hidden;
 
     &.large {
       .nut-tabs__titles-item {

package/dist/packages/timedetail/timedetail.scss

@@ -1,3 +1,19 @@
+.nut-theme-dark {
+  .nut-timedetail {
+    background-color: $dark-background2;
+    &__detail {
+      &__list {
+        &__item {
+          background-color: $dark-background;
+          color: $dark-color;
+          &--curr {
+            color: $timeselect-timedetail-item-cur-text-color;
+          }
+        }
+      }
+    }
+  }
+}
 .nut-timedetail {
   display: flex;
   align-content: flex-start;

package/dist/packages/timepannel/timepannel.scss

@@ -1,3 +1,13 @@
+.nut-theme-dark {
+  .nut-timepannel {
+    background-color: $dark-background3;
+    color: $dark-color-gray;
+    &--curr {
+      background-color: $dark-background2;
+      color: $dark-color;
+    }
+  }
+}
 .nut-timepannel {
   height: 40px;
   line-height: 40px;

package/dist/packages/timeselect/timeselect.scss

@@ -1,3 +1,21 @@
+.nut-theme-dark {
+  .nut-timeselect {
+    background-color: $dark-background2;
+    &__title {
+      background-color: $dark-background2;
+      color: $dark-color;
+    }
+    &__content {
+      &__pannel {
+        background-color: $dark-background3;
+        color: $dark-color;
+      }
+      &__detail {
+        background-color: $dark-background2;
+      }
+    }
+  }
+}
 
 .nut-timeselect {
   display: flex;

package/dist/packages/uploader/uploader.scss

@@ -1,5 +1,13 @@
 @import '../../styles/mixins/text-ellipsis.scss';
-
+.nut-theme-dark {
+  .nut-uploader__preview-list {
+    background: $dark-background2;
+    color: $dark-color;
+  }
+  .close {
+    color: $dark-color !important;
+  }
+}
 .nut-uploader {
   position: relative;
   display: flex;