@nutui/nutui-react-taro 3.0.11 → 3.0.12

package/dist/es/packages/elevator/style/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-size-s, 12px));
+  color: var(--nutui-elevator-list-color, var(--nutui-color-title, #1a1a1a));
 }
-.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-color-background-sunken, #f7f8fc);
-  color: var(--nutui-color-title, #1a1a1a);
+.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, 35px);
+  line-height: var(--nutui-elevator-list-item-code-line-height, 35px);
+  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-elevator-list-item-code-color, var(--nutui-color-title, #1a1a1a));
+  padding: var(--nutui-elevator-list-item-padding, 0 20px);
+  font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600));
+  box-sizing: border-box;
+  border-bottom: var(--nutui-elevator-list-item-code-border-bottom, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  background-color: var(--nutui-elevator-list-item-code-background-color, inherit);
 }
-.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, rgba(0, 0, 0, 0.06));
+  padding: var(--nutui-elevator-list-item-padding, 0 20px);
+  height: var(--nutui-elevator-list-item-name-height, 30px);
+  line-height: var(--nutui-elevator-list-item-name-line-height, 30px);
 }
-.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-color-background-sunken, #f7f8fc);
-}
-.nut-address-selected-item.active {
-  border: 1px solid var(--nutui-color-primary, #ff0f23);
-  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+.nut-elevator-list-item-name-highcolor {
   color: var(--nutui-color-primary, #ff0f23);
 }
-.nut-address-selected-border {
-  margin: 0 2px;
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+.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, 35px);
+  background-color: var(--nutui-elevator-list-fixed-bg-color, #ffffff);
+  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-size-base, 14px));
+  color: var(--nutui-elevator-list-fixed-color, var(--nutui-color-primary, #ff0f23));
+  font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600));
 }
-.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, 60px);
+  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, 45px);
+  height: var(--nutui-elevator-list-item-code-current-height, 45px);
+  line-height: var(--nutui-elevator-list-item-code-current-line-height, 45px);
+  border-radius: var(--nutui-elevator-list-item-code-current-border-radius, 50%);
+  background: var(--nutui-elevator-list-item-code-current-bg-color, #fff);
+  box-shadow: 0 3px 3px 1px rgb(240, 240, 240);
+  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, #888b94);
-  font-weight: 500;
+  font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-size-s, 12px));
+  transform: var(--nutui-elevator-bars-transform, translateY(-50%));
+  padding: var(--nutui-elevator-bars-padding, 15px 0);
+  background-color: var(--nutui-elevator-bars-background-color, var(--nutui-color-background, #f2f3f5));
+  border-radius: var(--nutui-elevator-bars-border-radius, 6px);
+  text-align: center;
+  z-index: var(--nutui-elevator-bars-z-index, 1);
 }
-.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, #888b94);
+.nut-elevator-bars-inner-item-active {
+  font-weight: var(--nutui-font-weight-bold, 600);
+  color: var(--nutui-elevator-bars-active-color, var(--nutui-color-primary, #ff0f23));
+}
+
+[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, 60px);
 }
-.nut-address-elevator .nut-elevator-bars-inner-item-active {
-  background-color: var(--nutui-color-primary, #ff0f23);
-  color: var(--nutui-color-background-overlay, #ffffff);
-  font-weight: 400;
+[dir=rtl] .nut-elevator-bars,
+.nut-rtl .nut-elevator-bars {
+  right: auto;
+  left: var(--nutui-elevator-bars-right, 10px);
 }

package/dist/es/packages/elevator/style/style.harmony.css

@@ -0,0 +1,127 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-elevator {
+  width: 100%;
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+.nut-elevator-list {
+  display: block;
+  position: relative;
+  top: 0;
+  overflow: hidden;
+  font-size: 12px;
+  color: #1a1a1a;
+}
+.nut-elevator-list-inner {
+  height: 100%;
+  width: 100%;
+  display: block;
+  background-color: #ffffff;
+  overflow: auto;
+}
+.nut-elevator-list-item {
+  display: block;
+}
+.nut-elevator-list-item-code {
+  display: flex;
+  position: relative;
+  height: 35px;
+  line-height: 35px;
+  font-size: 14px;
+  color: #1a1a1a;
+  padding: 0 20px;
+  font-weight: 600;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background-color: inherit;
+}
+.nut-elevator-list-item-name {
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  height: 30px;
+  line-height: 30px;
+}
+.nut-elevator-list-item-name-highcolor {
+  color: #ff0f23;
+}
+.nut-elevator-list-fixed {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  padding: 0 20px;
+  height: 35px;
+  background-color: #ffffff;
+  box-sizing: border-box;
+  box-shadow: 0 0 10px #eee;
+}
+.nut-elevator-list-fixed-title {
+  font-size: 14px;
+  color: #ff0f23;
+  font-weight: 600;
+}
+.nut-elevator-code-current {
+  position: absolute;
+  right: 60px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 45px;
+  height: 45px;
+  line-height: 45px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 3px 3px 1px rgb(240, 240, 240);
+  text-align: center;
+}
+.nut-elevator-bars {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  color: #888b94;
+  font-size: 12px;
+  transform: translateY(-50%);
+  padding: 15px 0;
+  background-color: #f2f3f5;
+  border-radius: 6px;
+  text-align: center;
+  z-index: 1;
+}
+.nut-elevator-bars-inner-item {
+  display: block;
+  padding: 3px;
+  cursor: pointer;
+}
+.nut-elevator-bars-inner-item-active {
+  font-weight: 600;
+  color: #ff0f23;
+}
+
+[dir=rtl] .nut-elevator-list-fixed,
+.nut-rtl .nut-elevator-list-fixed {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-elevator-code-current {
+  right: auto;
+  left: 60px;
+}
+.nut-rtl .nut-elevator-code-current {
+  right: auto;
+  left: 60px;
+}
+[dir=rtl] .nut-elevator-bars {
+  right: auto;
+  left: 10px;
+}
+.nut-rtl .nut-elevator-bars {
+  right: auto;
+  left: 10px;
+}

package/dist/es/packages/elevator/style-jmapp/css.js

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

package/dist/es/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/es/packages/elevator/style-jmapp/index.js

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