@nutui/nutui-react 1.3.7 → 1.3.9-beta.0

package/dist/packages/actionsheet/actionsheet.scss

@@ -1,3 +1,20 @@
+.nut-theme-dark {
+  .nut-actionsheet-panel {
+    .nut-actionsheet-cancel {
+      border-top: 1px solid $dark-background2;
+    }
+    .nut-actionsheet-title {
+      border-bottom: 1px solid $dark-background2;
+    }
+    .nut-actionsheet-cancel,
+    .nut-actionsheet-item,
+    .nut-actionsheet-title {
+      background: $dark-background;
+      color: $dark-color;
+    }
+  }
+}
+
 .nut-actionsheet {
   display: block;
   padding-bottom: constant(safe-area-inset-bottom);

package/dist/packages/address/address.scss

@@ -1,3 +1,45 @@
+.nut-theme-dark {
+  .nut-address {
+    &__header {
+      color: $dark-color;
+
+      &__title {
+        color: $dark-color;
+      }
+    }
+
+    .custom-address {
+      .region-tab {
+        color: $dark-color;
+      }
+      .region-con {
+        .region-group {
+          .region-item {
+            color: $dark-color;
+          }
+        }
+      }
+    }
+
+    .exist-address {
+      .exist-address-group {
+        .exist-ul {
+          .exist-item {
+            color: $dark-color;
+          }
+        }
+      }
+
+      .choose-other {
+        border-top: 1px solid $dark-background;
+      }
+    }
+    &-custom-buttom {
+      border-top: 1px solid $dark-background;
+    }
+  }
+}
+
 .nut-address {
   display: block;
   &__header {

package/dist/packages/badge/badge.scss

@@ -1,3 +1,11 @@
+.nut-theme-dark {
+  .nut-badge {
+    &.show {
+      background: $dark-background;
+      color: $dark-color;
+    }
+  }
+}
 .nut-badge {
   position: relative;
   display: inline-block;

package/dist/packages/calendar/calendar.scss

@@ -1,3 +1,30 @@
+.nut-theme-dark {
+  .nut-calendar {
+    background: $dark-background;
+    color: $dark-color;
+    .nut-calendar-header {
+      background: $dark-background;
+      color: $dark-color;
+    }
+    .nut-calendar-content {
+      .calendar-months-panel {
+        .calendar-month-con {
+          .calendar-month-day {
+            &-choose {
+              background-color: $dark-calendar-choose-color;
+              color: $calendar-choose-font-color;
+            }
+          }
+        }
+      }
+    }
+    .nut-calendar-footer {
+      background: $dark-background2;
+      color: $dark-color;
+    }
+  }
+}
+
 .nut-calendar {
   position: relative;
   display: flex;

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

@@ -4,7 +4,7 @@
   font-size: $divider-text-font-size;
   color: $divider-text-color;
   margin: $divider-margin;
-  //   width: 100%;
+  width: 100%;
 
   &::before,
   &::after {
@@ -59,5 +59,6 @@
     height: $divider-vertical-height;
     border-left: 1px solid $divider-vertical-border-left;
     margin: $divider-vertical-margin;
+    width: auto;
   }
 }

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

@@ -11,6 +11,7 @@
   }
 }
 .nut-noticebar {
+  width: 100%;
   .nut-noticebar-page {
     display: flex;
     padding: $noticebar-box-padding;
@@ -107,12 +108,14 @@
     font-size: $noticebar-font-size;
     overflow: hidden;
     padding: $noticebar-box-padding;
-
+    background: $noticebar-background;
+    color: $noticebar-color;
     .horseLamp_list {
       margin: 0;
       padding: 0;
       display: block;
       flex: 1;
+
       .horseLamp_list_item {
         display: flex;
         align-items: center;

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;