@nutui/nutui 3.1.15-beta.0 → 3.1.15-beta.1

package/dist/packages/menu/index.scss

@@ -1,12 +1,12 @@
 .nut-menu__bar {
   position: relative;
   display: flex;
-  line-height: $nut-menu-bar-line-height;
+  line-height: $menu-bar-line-height;
   background-color: $white;
-  border-bottom: 1px solid $nut-menu-bar-border-bottom-color;
+  border-bottom: 1px solid $menu-bar-border-bottom-color;
 
   &.opened {
-    z-index: $nut-menu-bar-opened-z-index;
+    z-index: $menu-bar-opened-z-index;
   }
 
   .nut-menu__item {
@@ -16,8 +16,12 @@
     color: $title-color;
     min-width: 0;
 
+    &.active {
+      color: $menu-item-active-text-color;
+    }
+
     &.disabled {
-      color: $nut-menu-item-disabled-color;
+      color: $menu-item-disabled-color;
     }
 
     .nut-menu__title-icon {
@@ -33,8 +37,8 @@
       .nut-menu__title-text {
         @include text-ellipsis;
         display: block;
-        padding-left: $nut-menu-title-text-padding-left;
-        padding-right: $nut-menu-title-text-padding-right;
+        padding-left: $menu-title-text-padding-left;
+        padding-right: $menu-title-text-padding-right;
       }
 
       &.active .nut-menu__title-icon {

package/dist/packages/menuitem/index.scss

@@ -1,12 +1,13 @@
 .nut-menu-item {
   .active {
     font-weight: 500;
+    color: $menu-item-active-text-color !important;
   }
 }
 
 .nut-menu-item__content {
-  padding: $nut-menu-item-content-padding;
-  max-height: $nut-menu-item-content-max-height;
+  padding: $menu-item-content-padding;
+  max-height: $menu-item-content-max-height;
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
@@ -14,13 +15,13 @@
   .nut-menu-item__option {
     color: $title-color;
     font-size: $font-size-2;
-    padding-top: $nut-menu-item-option-padding-top;
-    padding-bottom: $nut-menu-item-option-padding-bottom;
+    padding-top: $menu-item-option-padding-top;
+    padding-bottom: $menu-item-option-padding-bottom;
     display: flex;
     align-items: center;
 
     i {
-      margin-right: $nut-menu-item-option-i-margin-right;
+      margin-right: $menu-item-option-i-margin-right;
     }
   }
 }
@@ -38,9 +39,9 @@
 
 .placeholder-element {
   position: fixed;
-  top: -$nut-menu-bar-line-height;
+  top: -$menu-bar-line-height;
   left: 0;
   right: 0;
-  z-index: $nut-menu-bar-opened-z-index;
+  z-index: $menu-bar-opened-z-index;
   background-color: transparent;
 }

package/dist/packages/noticebar/index.scss

@@ -1,8 +1,8 @@
 .nut-noticebar-page {
   width: 100%;
   display: flex;
-  height: $noticeBar-height;
-  font-size: $noticeBar-font-size;
+  height: $noticebar-height;
+  font-size: $noticebar-font-size;
   position: relative;
   align-items: center;
   &.wrapable {
@@ -23,8 +23,8 @@
     padding-right: 40px;
   }
   .left-icon {
-    height: $noticeBar-left-icon-width;
-    min-width: $noticeBar-left-icon-width;
+    height: $noticebar-left-icon-width;
+    min-width: $noticebar-left-icon-width;
     margin: 0 5px 0 10px;
     background-size: 100% 100%;
   }
@@ -32,13 +32,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: $noticeBar-right-icon-width;
+    width: $noticebar-right-icon-width;
     margin: 0 10px 0 5px;
   }
   .wrap {
     flex: 1;
-    height: $noticeBar-line-height;
-    line-height: $noticeBar-line-height;
+    height: $noticebar-line-height;
+    line-height: $noticebar-line-height;
     overflow: hidden;
     position: relative;
   }
@@ -78,7 +78,7 @@
 // 垂直方向的滚动
 @keyframes nut-notice-bar-play-vertical {
   to {
-    transform: translateY($noticeBar-height);
+    transform: translateY($noticebar-height);
   }
 }
 
@@ -87,8 +87,8 @@
   position: relative;
   display: flex;
   justify-content: space-between;
-  height: $noticeBar-height;
-  font-size: $noticeBar-font-size;
+  height: $noticebar-height;
+  font-size: $noticebar-font-size;
   overflow: hidden;
 
   .horseLamp_list {
@@ -99,7 +99,7 @@
     .horseLamp_list_item {
       display: flex;
       align-items: center;
-      height: $noticeBar-height;
+      height: $noticebar-height;
     }
   }
 

package/dist/packages/picker/index.scss

@@ -15,11 +15,7 @@
     z-index: 1;
     width: 100%;
     height: 100%;
-    background-image: linear-gradient(
-        180deg,
-        hsla(0, 0%, 100%, 0.9),
-        hsla(0, 0%, 100%, 0.4)
-      ),
+    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)),
       linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
     background-repeat: no-repeat;
     background-position: top, bottom;
@@ -44,7 +40,7 @@
     height: 100%;
   }
   &__left {
-    color: #fa2c19;
+    color: $picker-cancel-color;
     font-size: 16px;
   }
   &__button {

package/dist/packages/progress/index.scss

@@ -11,13 +11,7 @@
       width: 30%;
       height: 100%;
       border-radius: 12px;
-      background: linear-gradient(
-        268deg,
-        rgba(250, 44, 25, 1) 0%,
-        rgba(250, 63, 25, 1) 44.59259259%,
-        rgba(250, 89, 25, 1) 83.40740741%,
-        rgba(250, 100, 25, 1) 100%
-      );
+      background: $progress-inner-background-color;
       -webkit-transition: all 0.4s;
       transition: all 0.4s;
       position: relative;
@@ -89,7 +83,7 @@
   }
   .nut-progress-insidetext {
     padding: 3px 5px 3px 6px;
-    background: rgba(250, 44, 25, 1);
+    background: $progress-insidetext-background;
     border-radius: 5px;
     position: absolute;
     transition: all 0.4s;

package/dist/packages/shortpassword/index.scss

@@ -86,9 +86,9 @@
   height: 41px;
   margin: 0 auto;
   box-sizing: border-box;
-  background: $shortpsd-background-color;
+  background: $shortpassword-background-color;
   border-radius: 4px;
-  border: 1px solid $shortpsd-border-color;
+  border: 1px solid $shortpassword-border-color;
   display: flex;
   position: absolute;
   left: 0;
@@ -98,9 +98,9 @@
   width: 100%;
   height: 41px;
   margin: 0 auto;
-  background: $shortpsd-background-color;
+  background: $shortpassword-background-color;
   border-radius: 4px;
-  border: 1px solid $shortpsd-border-color;
+  border: 1px solid $shortpassword-border-color;
   display: flex;
   position: absolute;
   left: 0;
@@ -132,13 +132,13 @@
   .nut-shortpsd-error {
     line-height: 1;
     font-size: $font-size-0;
-    color: $shortpsd-error;
+    color: $shortpassword-error;
   }
 
   .nut-shortpsd-forget {
     line-height: 1;
     font-size: $font-size-1;
-    color: $shortpsd-forget;
+    color: $shortpassword-forget;
     display: flex;
   }
 }

package/dist/packages/sidenavbar/index.scss

@@ -0,0 +1,14 @@
+.nut-sidenavbar {
+  height: 100%;
+  overflow: auto;
+  display: block;
+  &__content {
+    position: relative;
+    background-color: $sidenavbar-content-bg-color;
+    display: block;
+    &__list {
+      width: 100%;
+      display: block;
+    }
+  }
+}

package/dist/packages/sidenavbaritem/index.scss

@@ -0,0 +1,10 @@
+.nut-sidenavbaritem {
+  height: 40px;
+  line-height: 40px;
+  display: block;
+  font-size: 16px;
+  &__title {
+    color: $title-color;
+    background-color: $sidenavbaritem-title-color;
+  }
+}

package/dist/packages/sku/index.scss

@@ -65,7 +65,7 @@
           border: 1px solid rgba(242, 242, 242, 1);
 
           &.active {
-            background: rgba(252, 237, 235, 1);
+            background: $sku-item-active-bg;
             border: $sku-item-border;
             color: $primary-color;
           }

package/dist/packages/subsidenavbar/index.scss

@@ -0,0 +1,39 @@
+.nut-subsidenavbar {
+  display: grid;
+  float: left;
+  width: 100%;
+  position: relative;
+  &__title {
+    display: block;
+    width: 100%;
+    height: 40px;
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    box-sizing: border-box;
+    border-bottom: 1px solid $subsidenavbar-title-border-color;
+    color: $title-color;
+    font-size: $font-size-large;
+    background-color: $subsidenavbar-title-bg-color;
+    &__text {
+      line-height: 40px;
+      color: $title-color;
+    }
+    &__icon {
+      position: absolute;
+      top: 50%;
+      right: 20px;
+      transform: translateY(-50%);
+      i {
+        transition: transform 0.5s ease-in-out;
+        &.up {
+          transform: rotate(-180deg);
+        }
+      }
+    }
+  }
+  &__list {
+    width: 100%;
+  }
+}