@nutui/nutui 3.1.21 → 3.1.22-beta.5

package/dist/packages/menu/index.scss

@@ -1,48 +1,57 @@
-.nut-menu__bar {
-  position: relative;
-  display: flex;
-  line-height: $menu-bar-line-height;
-  background-color: $white;
-  box-shadow: $menu-bar-box-shadow;
-
-  &.opened {
-    z-index: $menu-bar-opened-z-index;
+.nut-menu {
+  &.scroll-fixed {
+    position: fixed;
+    top: $nut-menu-scroll-fixed-top;
+    z-index: $nut-menu-scroll-fixed-z-index;
+    width: 100%;
   }
 
-  .nut-menu__item {
-    flex: 1;
-    text-align: center;
-    font-size: $menu-item-font-size;
-    color: $menu-item-text-color;
-    min-width: 0;
+  .nut-menu__bar {
+    position: relative;
+    display: flex;
+    line-height: $menu-bar-line-height;
+    background-color: $white;
+    box-shadow: $menu-bar-box-shadow;
 
-    &.active {
-      color: $menu-item-active-text-color;
+    &.opened {
+      z-index: $menu-bar-opened-z-index;
     }
 
-    &.disabled {
-      color: $menu-item-disabled-color;
-    }
+    .nut-menu__item {
+      flex: 1;
+      text-align: center;
+      font-size: $menu-item-font-size;
+      color: $menu-item-text-color;
+      min-width: 0;
 
-    .nut-menu__title-icon {
-      transition: all 0.2s linear;
-    }
+      &.active {
+        color: $menu-item-active-text-color;
+      }
+
+      &.disabled {
+        color: $menu-item-disabled-color;
+      }
 
-    .nut-menu__title {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      max-width: 100%;
-
-      .nut-menu__title-text {
-        @include text-ellipsis;
-        display: block;
-        padding-left: $menu-title-text-padding-left;
-        padding-right: $menu-title-text-padding-right;
+      .nut-menu__title-icon {
+        transition: all 0.2s linear;
       }
 
-      &.active .nut-menu__title-icon {
-        transform: rotate(180deg);
+      .nut-menu__title {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        max-width: 100%;
+
+        .nut-menu__title-text {
+          @include text-ellipsis;
+          display: block;
+          padding-left: $menu-title-text-padding-left;
+          padding-right: $menu-title-text-padding-right;
+        }
+
+        &.active .nut-menu__title-icon {
+          transform: rotate(180deg);
+        }
       }
     }
   }

package/dist/packages/menuitem/index.scss

@@ -43,4 +43,8 @@
   right: 0;
   z-index: $menu-bar-opened-z-index;
   background-color: transparent;
+
+  &.up {
+    bottom: -$menu-bar-line-height;
+  }
 }

package/dist/packages/navbar/index.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/pagination/index.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;

package/dist/packages/radio/index.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;
   align-items: center;
@@ -24,6 +42,7 @@
     border-radius: $radio-button-border-radius;
     color: $radio-label-font-color;
     box-sizing: border-box;
+    border: 1px solid #f6f7f9;
     &--active {
       background: $radio-label-button-background;
       color: $radio-label-font-active-color;

package/dist/packages/range/index.scss

@@ -1,3 +1,22 @@
+.nut-theme-dark {
+  .nut-range-container {
+    background: $dark-background;
+    .min,
+    .max {
+      color: $dark-color-gray;
+    }
+    .nut-range {
+      &-mark-text {
+        color: $dark-color-gray;
+      }
+      &-button {
+        .number {
+          color: $dark-color;
+        }
+      }
+    }
+  }
+}
 .nut-range-container {
   display: flex;
   position: relative;

package/dist/packages/rate/index.scss

@@ -1,5 +1,5 @@
 .nut-rate {
-  display: flex;
+  display: inline-flex;
   &-item {
     display: flex;
     flex-shrink: 0;

package/dist/packages/searchbar/index.scss

@@ -1,3 +1,24 @@
+.nut-theme-dark {
+  .nut-searchbar {
+    background: $dark-background;
+    &__search-label {
+      color: $dark-color;
+    }
+    .nut-searchbar__input-clear {
+      & .nut-searchbar__nut-icon-mask-close {
+        color: $dark-color;
+        &:hover {
+          cursor: pointer;
+          color: $dark-color;
+        }
+      }
+    }
+    &__right-search-icon,
+    &__left-search-icon {
+      color: $dark-color;
+    }
+  }
+}
 .nut-searchbar {
   display: flex;
   align-items: center;

package/dist/packages/switch/index.scss

@@ -37,12 +37,13 @@
     opacity: 0.6;
   }
   &.nut-switch-base {
-    width: $switch-width;
+    min-width: $switch-width;
     height: $switch-height;
     line-height: $switch-line-height;
+    overflow: hidden;
     .switch-button {
-      height: $switch-inside-width;
-      width: $switch-inside-height;
+      height: $switch-inside-height;
+      width: $switch-inside-width;
       transform: $switch-inside-close-transform;
     }
     &.switch-open {

package/dist/packages/tabbar/index.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/index.scss

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

package/dist/packages/tabpane/index.scss

@@ -1,3 +1,8 @@
+.nut-theme-dark {
+  .nut-tabpane {
+    background: $dark-background2;
+  }
+}
 .nut-tabpane {
   width: 100%;
   flex-shrink: 0;
@@ -7,6 +12,7 @@
   box-sizing: border-box;
   overflow: auto;
   height: 100%;
+  word-break: break-all;
   &.inactive {
     overflow: visible;
     height: 0;

package/dist/packages/tabs/index.scss

@@ -1,3 +1,25 @@
+.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;
   overflow: hidden;

package/dist/packages/textarea/index.scss

@@ -1,3 +1,11 @@
+.nut-theme-dark {
+  .nut-textarea {
+    background: $dark-background;
+    &__textarea {
+      color: $dark-color;
+    }
+  }
+}
 .nut-textarea {
   position: relative;
   width: 100%;