@nutui/nutui-react 3.0.10 → 3.0.11

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

@@ -1,134 +1,113 @@
-.nut-elevator {
-  width: 100%;
-  display: block;
-  position: relative;
-  overflow: hidden;
-
-  &-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;
-    }
-
+.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: block;
-
-      &-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;
-        }
+      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;
       }
     }
 
-    &-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;
+    &.hotlist-more {
+      .nut-address-hotlist-item {
+        width: auto;
+        padding: 0 16px;
+        margin-right: 7px;
       }
     }
   }
 
-  &-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;
-  }
+  &-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;
 
-  &-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;
+      &.active {
+        border: 1px solid $color-primary;
+        background-color: $color-primary-light-pressed;
+        color: $color-primary;
+      }
+    }
+    &-border {
+      margin: 0 2px;
+      color: $color-text-disabled;
+    }
+  }
 
-    &-inner {
+  &-elevator {
+    margin-top: 0;
+    .nut-elevator-list {
       &-item {
-        display: block;
-        padding: $elevator-bars-inner-item-padding;
-        cursor: pointer;
+        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;
 
+      &-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 {
-          font-weight: $font-weight-bold;
-          color: $elevator-bars-active-color;
+          background-color: $color-primary;
+          color: $color-background-overlay;
+          font-weight: 400;
         }
       }
     }
   }
 }
-
-[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 +1,3 @@
+import '../../elevator/style-jmapp';
+import '../../cascader/style-jmapp';
 import './elevator.scss';

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

@@ -2,120 +2,105 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
-.nut-elevator {
-  width: 100%;
-  display: block;
-  position: relative;
-  overflow: hidden;
+.nut-address-title {
+  font-size: 14px;
+  font-weight: 500;
+  padding: 16px 16px 12px 16px;
 }
-.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 {
+  padding: 0 16px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
 }
-.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 {
+  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-item {
-  display: block;
+.nut-address-hotlist-item:nth-child(5n) {
+  margin-right: 0;
 }
-.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-hotlist.hotlist-more .nut-address-hotlist-item {
+  width: auto;
+  padding: 0 16px;
+  margin-right: 7px;
 }
-.nut-elevator-list-item-name {
+.nut-address-selected {
+  width: 100%;
+  height: 60px;
+  padding: 0 16px;
   display: flex;
   align-items: center;
-  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);
+  border-bottom: 1px solid var(--nutui-color-border);
 }
-.nut-elevator-list-item-name-highcolor {
+.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);
   color: var(--nutui-color-primary);
 }
-.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-selected-border {
+  margin: 0 2px;
+  color: var(--nutui-color-text-disabled);
 }
-.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 {
+  margin-top: 0;
 }
-.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 {
+  position: relative;
+  padding-left: 20px;
 }
-.nut-elevator-bars {
+.nut-address-elevator .nut-elevator-list-item-code {
+  display: inline;
   position: absolute;
-  right: var(--nutui-elevator-bars-right, 10px);
-  top: var(--nutui-elevator-bars-top, 50%);
+  left: 0;
+  top: 0;
+  height: 30px;
+  line-height: 30px;
+  border-bottom: 0;
   color: var(--nutui-color-text-help);
-  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-elevator-bars-inner-item {
-  display: block;
-  padding: var(--nutui-elevator-bars-inner-item-padding, 3px);
-  cursor: pointer;
-}
-.nut-elevator-bars-inner-item-active {
-  font-weight: var(--nutui-font-weight-bold);
-  color: var(--nutui-elevator-bars-active-color, var(--nutui-color-primary));
+  font-weight: 500;
 }
-
-[dir=rtl] .nut-elevator-list-fixed,
-.nut-rtl .nut-elevator-list-fixed {
-  left: auto;
-  right: 0;
+.nut-address-elevator .nut-elevator-bars {
+  top: 40%;
+  padding: 0;
+  background: none;
 }
-[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 {
+  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);
 }
-[dir=rtl] .nut-elevator-bars,
-.nut-rtl .nut-elevator-bars {
-  right: auto;
-  left: var(--nutui-elevator-bars-right, 10px);
+.nut-address-elevator .nut-elevator-bars-inner-item-active {
+  background-color: var(--nutui-color-primary);
+  color: var(--nutui-color-surface-2);
+  font-weight: 400;
 }

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

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

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

@@ -1,134 +1,113 @@
-.nut-elevator {
-  width: 100%;
-  display: block;
-  position: relative;
-  overflow: hidden;
-
-  &-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;
-    }
-
+.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: block;
-
-      &-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;
-        }
+      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;
       }
     }
 
-    &-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;
+    &.hotlist-more {
+      .nut-address-hotlist-item {
+        width: auto;
+        padding: 0 16px;
+        margin-right: 7px;
       }
     }
   }
 
-  &-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;
-  }
+  &-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;
 
-  &-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;
+      &.active {
+        border: 1px solid $color-primary;
+        background-color: $color-primary-light-pressed;
+        color: $color-primary;
+      }
+    }
+    &-border {
+      margin: 0 2px;
+      color: $color-text-disabled;
+    }
+  }
 
-    &-inner {
+  &-elevator {
+    margin-top: 0;
+    .nut-elevator-list {
       &-item {
-        display: block;
-        padding: $elevator-bars-inner-item-padding;
-        cursor: pointer;
+        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;
 
+      &-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 {
-          font-weight: $font-weight-bold;
-          color: $elevator-bars-active-color;
+          background-color: $color-primary;
+          color: $color-background-overlay;
+          font-weight: 400;
         }
       }
     }
   }
 }
-
-[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 +1,3 @@
+import '../../elevator/style-jrkf';
+import '../../cascader/style-jrkf';
 import './elevator.scss';