@nutui/nutui-react 3.0.11 → 3.0.13-beta.0

package/dist/cjs/packages/elevator/style-jmapp/elevator.scss

@@ -1,113 +1,134 @@
-.nut-address {
-  &-title {
-    font-size: 14px;
-    font-weight: 500;
-    padding: 16px 16px 12px 16px;
-  }
-  &-hotlist {
-    padding: 0 16px;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    &-item {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 63px;
-      height: 28px;
-      font-size: 12px;
-      border-radius: 4px;
-      margin-bottom: 7px;
-      /* #ifdef harmony*/
-      margin-right: 6px;
-      /* #endif */
-      /* #ifndef harmony*/
-      margin-right: 7px;
-      /* #endif */
-      background-color: $color-background-sunken;
-      color: $color-title;
-      &:nth-child(5n) {
-        margin-right: 0;
-      }
-    }
+.nut-elevator {
+  width: 100%;
+  display: block;
+  position: relative;
+  overflow: hidden;
 
-    &.hotlist-more {
-      .nut-address-hotlist-item {
-        width: auto;
-        padding: 0 16px;
-        margin-right: 7px;
-      }
+  &-list {
+    display: block;
+    position: relative;
+    top: 0;
+    overflow: hidden;
+    font-size: $elevator-list-font-size;
+    color: $elevator-list-color;
+
+    &-inner {
+      height: 100%;
+      width: 100%;
+      display: block;
+      background-color: $elevator-list-bg-color;
+      overflow: auto;
     }
-  }
 
-  &-selected {
-    width: 100%;
-    height: 60px;
-    padding: 0 16px;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid $color-border;
     &-item {
-      font-size: 12px;
-      display: inline-block;
-      height: 28px;
-      line-height: 28px;
-      padding: 0 12px;
-      border-radius: 4px;
-      background-color: $color-background-sunken;
+      display: block;
 
-      &.active {
-        border: 1px solid $color-primary;
-        background-color: $color-primary-light-pressed;
-        color: $color-primary;
+      &-code {
+        display: flex;
+        position: relative;
+        height: $elevator-list-item-code-height;
+        line-height: $elevator-list-item-code-line-height;
+        font-size: $elevator-list-item-code-font-size;
+        color: $elevator-list-item-code-color;
+        padding: $elevator-list-item-padding;
+        font-weight: $elevator-list-item-code-font-weight;
+        box-sizing: border-box;
+        border-bottom: $elevator-list-item-code-border-bottom;
+        background-color: $elevator-list-item-code-background-color;
+      }
+
+      &-name {
+        display: flex;
+        align-items: center;
+        padding: $elevator-list-item-padding;
+        height: $elevator-list-item-name-height;
+        line-height: $elevator-list-item-name-line-height;
+
+        &-highcolor {
+          color: $color-primary;
+        }
       }
     }
-    &-border {
-      margin: 0 2px;
-      color: $color-text-disabled;
+
+    &-fixed {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      padding: $elevator-list-item-padding;
+      height: $elevator-list-item-code-height;
+      background-color: $elevator-list-fixed-bg-color;
+      box-sizing: border-box;
+      box-shadow: $elevator-list-fixed-box-shadow;
+      &-title {
+        font-size: $elevator-list-item-code-font-size;
+        color: $elevator-list-fixed-color;
+        font-weight: $elevator-list-item-code-font-weight;
+      }
     }
   }
 
-  &-elevator {
-    margin-top: 0;
-    .nut-elevator-list {
+  &-code-current {
+    position: absolute;
+    right: $elevator-list-item-code-current-right;
+    top: $elevator-list-item-code-current-top;
+    transform: $elevator-bars-transform;
+    width: $elevator-list-item-code-current-width;
+    height: $elevator-list-item-code-current-height;
+    line-height: $elevator-list-item-code-current-line-height;
+    border-radius: $elevator-list-item-code-current-border-radius;
+    background: $elevator-list-item-code-current-bg-color;
+    box-shadow: $elevator-list-item-code-current-box-shadow;
+    text-align: $elevator-list-item-code-current-text-align;
+  }
+
+  &-bars {
+    position: absolute;
+    right: $elevator-bars-right;
+    top: $elevator-bars-top;
+    color: $color-text-help;
+    font-size: $elevator-bars-font-size;
+    transform: $elevator-bars-transform;
+    padding: $elevator-bars-padding;
+    background-color: $elevator-bars-background-color;
+    border-radius: $elevator-bars-border-radius;
+    text-align: center;
+    z-index: $elevator-bars-z-index;
+
+    &-inner {
       &-item {
-        position: relative;
-        padding-left: 20px;
-      }
-      &-item-code {
-        display: inline;
-        position: absolute;
-        left: 0;
-        top: 0;
-        height: 30px;
-        line-height: 30px;
-        border-bottom: 0;
-        color: $color-text-help;
-        font-weight: 500;
-      }
-    }
-    .nut-elevator-bars {
-      top: 40%;
-      padding: 0;
-      background: none;
+        display: block;
+        padding: $elevator-bars-inner-item-padding;
+        cursor: pointer;
 
-      &-inner-item {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 16px;
-        height: 16px;
-        font-size: 10px;
-        border-radius: 16px;
-        margin-bottom: 2px;
-        color: $color-text-help;
         &-active {
-          background-color: $color-primary;
-          color: $color-background-overlay;
-          font-weight: 400;
+          font-weight: $font-weight-bold;
+          color: $elevator-bars-active-color;
         }
       }
     }
   }
 }
+
+[dir='rtl'] .nut-elevator,
+.nut-rtl .nut-elevator {
+  &-list {
+    &-fixed {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  &-code-current {
+    right: auto;
+    left: $elevator-list-item-code-current-right;
+  }
+
+  &-bars {
+    right: auto;
+    left: $elevator-bars-right;
+  }
+}

package/dist/cjs/packages/elevator/style-jmapp/index.js

@@ -1,3 +1 @@
-import '../../elevator/style-jmapp';
-import '../../cascader/style-jmapp';
 import './elevator.scss';

package/dist/cjs/packages/elevator/style-jmapp/style.css

@@ -2,105 +2,120 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
-.nut-address-title {
-  font-size: 14px;
-  font-weight: 500;
-  padding: 16px 16px 12px 16px;
+.nut-elevator {
+  width: 100%;
+  display: block;
+  position: relative;
+  overflow: hidden;
 }
-.nut-address-hotlist {
-  padding: 0 16px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
+.nut-elevator-list {
+  display: block;
+  position: relative;
+  top: 0;
+  overflow: hidden;
+  font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-text-small));
+  color: var(--nutui-elevator-list-color, var(--nutui-color-title));
 }
-.nut-address-hotlist-item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 63px;
-  height: 28px;
-  font-size: 12px;
-  border-radius: 4px;
-  margin-bottom: 7px;
-  /* #ifdef harmony*/
-  margin-right: 6px;
-  /* #endif */
-  /* #ifndef harmony*/
-  margin-right: 7px;
-  /* #endif */
-  background-color: var(--nutui-gray-2, #f8f8f8);
-  color: var(--nutui-color-title);
+.nut-elevator-list-inner {
+  height: 100%;
+  width: 100%;
+  display: block;
+  background-color: var(--nutui-elevator-list-bg-color, #ffffff);
+  overflow: auto;
 }
-.nut-address-hotlist-item:nth-child(5n) {
-  margin-right: 0;
+.nut-elevator-list-item {
+  display: block;
 }
-.nut-address-hotlist.hotlist-more .nut-address-hotlist-item {
-  width: auto;
-  padding: 0 16px;
-  margin-right: 7px;
+.nut-elevator-list-item-code {
+  display: flex;
+  position: relative;
+  height: var(--nutui-elevator-list-item-code-height, 20px);
+  line-height: var(--nutui-elevator-list-item-code-line-height, 20px);
+  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-text));
+  color: var(--nutui-elevator-list-item-code-color, var(--nutui-color-title));
+  padding: var(--nutui-elevator-list-item-padding, 0 20px);
+  font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold));
+  box-sizing: border-box;
+  border-bottom: var(--nutui-elevator-list-item-code-border-bottom, none);
+  background-color: var(--nutui-elevator-list-item-code-background-color, var(--nutui-color-default-light));
 }
-.nut-address-selected {
-  width: 100%;
-  height: 60px;
-  padding: 0 16px;
+.nut-elevator-list-item-name {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--nutui-color-border);
+  padding: var(--nutui-elevator-list-item-padding, 0 20px);
+  height: var(--nutui-elevator-list-item-name-height, 52px);
+  line-height: var(--nutui-elevator-list-item-name-line-height, 52px);
 }
-.nut-address-selected-item {
-  font-size: 12px;
-  display: inline-block;
-  height: 28px;
-  line-height: 28px;
-  padding: 0 12px;
-  border-radius: 4px;
-  background-color: var(--nutui-gray-2, #f8f8f8);
-}
-.nut-address-selected-item.active {
-  border: 1px solid var(--nutui-color-primary);
-  background-color: var(--nutui-color-primary-light-pressed);
+.nut-elevator-list-item-name-highcolor {
   color: var(--nutui-color-primary);
 }
-.nut-address-selected-border {
-  margin: 0 2px;
-  color: var(--nutui-color-text-disabled);
+.nut-elevator-list-fixed {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  padding: var(--nutui-elevator-list-item-padding, 0 20px);
+  height: var(--nutui-elevator-list-item-code-height, 20px);
+  background-color: var(--nutui-elevator-list-fixed-bg-color, var(--nutui-color-default-light));
+  box-sizing: border-box;
+  box-shadow: var(--nutui-elevator-list-fixed-box-shadow, 0 0 10px #eee);
 }
-.nut-address-elevator {
-  margin-top: 0;
+.nut-elevator-list-fixed-title {
+  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-text));
+  color: var(--nutui-elevator-list-fixed-color, var(--nutui-color-primary));
+  font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold));
 }
-.nut-address-elevator .nut-elevator-list-item {
-  position: relative;
-  padding-left: 20px;
+.nut-elevator-code-current {
+  position: absolute;
+  right: var(--nutui-elevator-list-item-code-current-right, 40px);
+  top: var(--nutui-elevator-list-item-code-current-top, 50%);
+  transform: var(--nutui-elevator-bars-transform, translateY(-50%));
+  width: var(--nutui-elevator-list-item-code-current-width, 48px);
+  height: var(--nutui-elevator-list-item-code-current-height, 48px);
+  line-height: var(--nutui-elevator-list-item-code-current-line-height, 48px);
+  border-radius: var(--nutui-elevator-list-item-code-current-border-radius, 50% 0 50% 50%);
+  background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-default-light));
+  box-shadow: 0px 2px 6px 0px rgba(4, 1, 135, 0.08);
+  text-align: var(--nutui-elevator-list-item-code-current-text-align, center);
 }
-.nut-address-elevator .nut-elevator-list-item-code {
-  display: inline;
+.nut-elevator-bars {
   position: absolute;
-  left: 0;
-  top: 0;
-  height: 30px;
-  line-height: 30px;
-  border-bottom: 0;
+  right: var(--nutui-elevator-bars-right, 10px);
+  top: var(--nutui-elevator-bars-top, 50%);
   color: var(--nutui-color-text-help);
-  font-weight: 500;
+  font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-text-xs));
+  transform: var(--nutui-elevator-bars-transform, translateY(-50%));
+  padding: var(--nutui-elevator-bars-padding, 15px 0);
+  background-color: var(--nutui-elevator-bars-background-color, transparent);
+  border-radius: var(--nutui-elevator-bars-border-radius, 6px);
+  text-align: center;
+  z-index: var(--nutui-elevator-bars-z-index, 2);
 }
-.nut-address-elevator .nut-elevator-bars {
-  top: 40%;
-  padding: 0;
-  background: none;
+.nut-elevator-bars-inner-item {
+  display: block;
+  padding: var(--nutui-elevator-bars-inner-item-padding, 3px);
+  cursor: pointer;
 }
-.nut-address-elevator .nut-elevator-bars-inner-item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 16px;
-  height: 16px;
-  font-size: 10px;
-  border-radius: 16px;
-  margin-bottom: 2px;
-  color: var(--nutui-color-text-help);
+.nut-elevator-bars-inner-item-active {
+  font-weight: var(--nutui-font-weight-bold);
+  color: var(--nutui-elevator-bars-active-color, var(--nutui-color-primary));
+}
+
+[dir=rtl] .nut-elevator-list-fixed,
+.nut-rtl .nut-elevator-list-fixed {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-elevator-code-current,
+.nut-rtl .nut-elevator-code-current {
+  right: auto;
+  left: var(--nutui-elevator-list-item-code-current-right, 40px);
 }
-.nut-address-elevator .nut-elevator-bars-inner-item-active {
-  background-color: var(--nutui-color-primary);
-  color: var(--nutui-color-surface-2);
-  font-weight: 400;
+[dir=rtl] .nut-elevator-bars,
+.nut-rtl .nut-elevator-bars {
+  right: auto;
+  left: var(--nutui-elevator-bars-right, 10px);
 }

package/dist/cjs/packages/elevator/style-jrkf/css.js

@@ -1,3 +1 @@
-import '../../elevator/style-jrkf/css';
-import '../../cascader/style-jrkf/css';
 import './style.css';

package/dist/cjs/packages/elevator/style-jrkf/elevator.scss

@@ -1,113 +1,134 @@
-.nut-address {
-  &-title {
-    font-size: 14px;
-    font-weight: 500;
-    padding: 16px 16px 12px 16px;
-  }
-  &-hotlist {
-    padding: 0 16px;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    &-item {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 63px;
-      height: 28px;
-      font-size: 12px;
-      border-radius: 4px;
-      margin-bottom: 7px;
-      /* #ifdef harmony*/
-      margin-right: 6px;
-      /* #endif */
-      /* #ifndef harmony*/
-      margin-right: 7px;
-      /* #endif */
-      background-color: $color-background-sunken;
-      color: $color-title;
-      &:nth-child(5n) {
-        margin-right: 0;
-      }
-    }
+.nut-elevator {
+  width: 100%;
+  display: block;
+  position: relative;
+  overflow: hidden;
 
-    &.hotlist-more {
-      .nut-address-hotlist-item {
-        width: auto;
-        padding: 0 16px;
-        margin-right: 7px;
-      }
+  &-list {
+    display: block;
+    position: relative;
+    top: 0;
+    overflow: hidden;
+    font-size: $elevator-list-font-size;
+    color: $elevator-list-color;
+
+    &-inner {
+      height: 100%;
+      width: 100%;
+      display: block;
+      background-color: $elevator-list-bg-color;
+      overflow: auto;
     }
-  }
 
-  &-selected {
-    width: 100%;
-    height: 60px;
-    padding: 0 16px;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid $color-border;
     &-item {
-      font-size: 12px;
-      display: inline-block;
-      height: 28px;
-      line-height: 28px;
-      padding: 0 12px;
-      border-radius: 4px;
-      background-color: $color-background-sunken;
+      display: block;
 
-      &.active {
-        border: 1px solid $color-primary;
-        background-color: $color-primary-light-pressed;
-        color: $color-primary;
+      &-code {
+        display: flex;
+        position: relative;
+        height: $elevator-list-item-code-height;
+        line-height: $elevator-list-item-code-line-height;
+        font-size: $elevator-list-item-code-font-size;
+        color: $elevator-list-item-code-color;
+        padding: $elevator-list-item-padding;
+        font-weight: $elevator-list-item-code-font-weight;
+        box-sizing: border-box;
+        border-bottom: $elevator-list-item-code-border-bottom;
+        background-color: $elevator-list-item-code-background-color;
+      }
+
+      &-name {
+        display: flex;
+        align-items: center;
+        padding: $elevator-list-item-padding;
+        height: $elevator-list-item-name-height;
+        line-height: $elevator-list-item-name-line-height;
+
+        &-highcolor {
+          color: $color-primary;
+        }
       }
     }
-    &-border {
-      margin: 0 2px;
-      color: $color-text-disabled;
+
+    &-fixed {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      padding: $elevator-list-item-padding;
+      height: $elevator-list-item-code-height;
+      background-color: $elevator-list-fixed-bg-color;
+      box-sizing: border-box;
+      box-shadow: $elevator-list-fixed-box-shadow;
+      &-title {
+        font-size: $elevator-list-item-code-font-size;
+        color: $elevator-list-fixed-color;
+        font-weight: $elevator-list-item-code-font-weight;
+      }
     }
   }
 
-  &-elevator {
-    margin-top: 0;
-    .nut-elevator-list {
+  &-code-current {
+    position: absolute;
+    right: $elevator-list-item-code-current-right;
+    top: $elevator-list-item-code-current-top;
+    transform: $elevator-bars-transform;
+    width: $elevator-list-item-code-current-width;
+    height: $elevator-list-item-code-current-height;
+    line-height: $elevator-list-item-code-current-line-height;
+    border-radius: $elevator-list-item-code-current-border-radius;
+    background: $elevator-list-item-code-current-bg-color;
+    box-shadow: $elevator-list-item-code-current-box-shadow;
+    text-align: $elevator-list-item-code-current-text-align;
+  }
+
+  &-bars {
+    position: absolute;
+    right: $elevator-bars-right;
+    top: $elevator-bars-top;
+    color: $color-text-help;
+    font-size: $elevator-bars-font-size;
+    transform: $elevator-bars-transform;
+    padding: $elevator-bars-padding;
+    background-color: $elevator-bars-background-color;
+    border-radius: $elevator-bars-border-radius;
+    text-align: center;
+    z-index: $elevator-bars-z-index;
+
+    &-inner {
       &-item {
-        position: relative;
-        padding-left: 20px;
-      }
-      &-item-code {
-        display: inline;
-        position: absolute;
-        left: 0;
-        top: 0;
-        height: 30px;
-        line-height: 30px;
-        border-bottom: 0;
-        color: $color-text-help;
-        font-weight: 500;
-      }
-    }
-    .nut-elevator-bars {
-      top: 40%;
-      padding: 0;
-      background: none;
+        display: block;
+        padding: $elevator-bars-inner-item-padding;
+        cursor: pointer;
 
-      &-inner-item {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 16px;
-        height: 16px;
-        font-size: 10px;
-        border-radius: 16px;
-        margin-bottom: 2px;
-        color: $color-text-help;
         &-active {
-          background-color: $color-primary;
-          color: $color-background-overlay;
-          font-weight: 400;
+          font-weight: $font-weight-bold;
+          color: $elevator-bars-active-color;
         }
       }
     }
   }
 }
+
+[dir='rtl'] .nut-elevator,
+.nut-rtl .nut-elevator {
+  &-list {
+    &-fixed {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  &-code-current {
+    right: auto;
+    left: $elevator-list-item-code-current-right;
+  }
+
+  &-bars {
+    right: auto;
+    left: $elevator-bars-right;
+  }
+}

package/dist/cjs/packages/elevator/style-jrkf/index.js

@@ -1,3 +1 @@
-import '../../elevator/style-jrkf';
-import '../../cascader/style-jrkf';
 import './elevator.scss';