@nutui/nutui-react-taro 3.0.11 → 3.0.12

package/dist/es/packages/searchbar/style-jmapp/searchbar.scss

@@ -9,28 +9,114 @@
   box-sizing: border-box;
   justify-content: center;
 
+  .nut-icon {
+    width: $searchbar-icon-size;
+    height: $searchbar-icon-size;
+    font-size: $searchbar-icon-size;
+  }
+
   &-content {
+    position: relative;
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: $searchbar-content-padding;
+    padding: 0 $searchbar-gap;
     height: $searchbar-input-height;
     background: $searchbar-content-background;
     border-radius: $searchbar-content-border-radius;
+    border: 1px solid $color-primary;
   }
 
   &-icon {
     display: flex;
     justify-content: center;
     align-items: center;
+    color: $color-primary;
+  }
+
+  &-leftin {
+    margin-right: $searchbar-inner-gap;
   }
 
-  &-clear,
   &-rightin {
-    width: 16px;
-    height: 16px;
-    color: var(--nutui-black-5);
+    font-size: 15px;
+    font-weight: 500;
+    color: $color-primary;
+
+    &.nut-searchbar-icon {
+      color: var(--nutui-black-5);
+    }
+  }
+
+  &-input-box,
+  &-input {
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+
+  &-input {
+    border: 0;
+    outline: 0;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    font-size: $searchbar-font-size;
+    color: $searchbar-input-text-color;
+    caret-color: $searchbar-input-curror-color;
+    background: transparent;
+    text-align: $searchbar-input-text-align;
+  }
+
+  &-clear {
+    &.nut-searchbar-icon {
+      position: relative;
+      .nut-icon {
+        width: 12px;
+        height: 12px;
+        color: var(--nutui-black-5);
+        margin-right: $searchbar-inner-gap;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 200%;
+        left: -20%;
+      }
+    }
+  }
+
+  &-values {
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    z-index: 2;
+    background-color: #fff;
+    top: 9px;
+    left: 6px;
+    font-size: 12px;
+    line-height: 12px;
+
+    .nut-searchbar-value {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 4px 8px;
+      background-color: #f7f8fc;
+      border-radius: 4px;
+      margin-right: 2px;
+    }
+
+    .nut-icon {
+      width: 6px;
+      height: 6px;
+      font-size: 6px;
+      color: #c2c4cc;
+      margin-left: 4px;
+    }
   }
 
   &-left,
@@ -93,26 +179,6 @@
     }
   }
 
-  &-input-box,
-  &-input {
-    display: flex;
-    align-items: center;
-    flex: 1;
-  }
-
-  &-input {
-    border: 0;
-    outline: 0;
-    box-sizing: border-box;
-    width: 100%;
-    padding: $searchbar-input-padding;
-    font-size: $searchbar-font-size;
-    color: $searchbar-input-text-color;
-    caret-color: $searchbar-input-curror-color;
-    background: transparent;
-    text-align: $searchbar-input-text-align;
-  }
-
   &-round {
     border-radius: $searchbar-content-round-border-radius;
   }
@@ -120,6 +186,14 @@
   &-disabled {
     cursor: not-allowed;
   }
+
+  &-focus {
+    padding: 5px $searchbar-gap;
+
+    .nut-searchbar-content {
+      border: 0.5px solid #ff5c67;
+    }
+  }
 }
 
 [dir='rtl'] .nut-searchbar,

package/dist/es/packages/searchbar/style-jmapp/style.css

@@ -13,26 +13,101 @@
   box-sizing: border-box;
   justify-content: center;
 }
+.nut-searchbar .nut-icon {
+  width: var(--nutui-searchbar-icon-size, 20px);
+  height: var(--nutui-searchbar-icon-size, 20px);
+  font-size: var(--nutui-searchbar-icon-size, 20px);
+}
 .nut-searchbar-content {
+  position: relative;
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--nutui-searchbar-content-padding, 0 12px);
+  padding: 0 var(--nutui-searchbar-gap, 16px);
   height: var(--nutui-searchbar-input-height, 36px);
   background: var(--nutui-searchbar-content-background, var(--nutui-color-default-light));
   border-radius: var(--nutui-searchbar-content-border-radius, var(--nutui-radius-xs));
+  border: 1px solid var(--nutui-color-primary);
 }
 .nut-searchbar-icon {
   display: flex;
   justify-content: center;
   align-items: center;
+  color: var(--nutui-color-primary);
+}
+.nut-searchbar-leftin {
+  margin-right: var(--nutui-searchbar-inner-gap, 8px);
+}
+.nut-searchbar-rightin {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--nutui-color-primary);
 }
-.nut-searchbar-clear, .nut-searchbar-rightin {
-  width: 16px;
-  height: 16px;
+.nut-searchbar-rightin.nut-searchbar-icon {
   color: var(--nutui-black-5);
 }
+.nut-searchbar-input-box, .nut-searchbar-input {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.nut-searchbar-input {
+  border: 0;
+  outline: 0;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-text));
+  color: var(--nutui-searchbar-input-text-color, var(--nutui-color-text));
+  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-title));
+  background: transparent;
+  text-align: var(--nutui-searchbar-input-text-align, left);
+}
+.nut-searchbar-clear.nut-searchbar-icon {
+  position: relative;
+}
+.nut-searchbar-clear.nut-searchbar-icon .nut-icon {
+  width: 12px;
+  height: 12px;
+  color: var(--nutui-black-5);
+  margin-right: var(--nutui-searchbar-inner-gap, 8px);
+}
+.nut-searchbar-clear.nut-searchbar-icon::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 200%;
+  left: -20%;
+}
+.nut-searchbar-values {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  z-index: 2;
+  background-color: #fff;
+  top: 9px;
+  left: 6px;
+  font-size: 12px;
+  line-height: 12px;
+}
+.nut-searchbar-values .nut-searchbar-value {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px 8px;
+  background-color: #f7f8fc;
+  border-radius: 4px;
+  margin-right: 2px;
+}
+.nut-searchbar-values .nut-icon {
+  width: 6px;
+  height: 6px;
+  font-size: 6px;
+  color: #c2c4cc;
+  margin-left: 4px;
+}
 .nut-searchbar-left, .nut-searchbar-right {
   display: inline-flex;
   align-items: center;
@@ -75,29 +150,18 @@
 .nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
   margin-left: 0;
 }
-.nut-searchbar-input-box, .nut-searchbar-input {
-  display: flex;
-  align-items: center;
-  flex: 1;
-}
-.nut-searchbar-input {
-  border: 0;
-  outline: 0;
-  box-sizing: border-box;
-  width: 100%;
-  padding: var(--nutui-searchbar-input-padding, 4px 8px);
-  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-text));
-  color: var(--nutui-searchbar-input-text-color, var(--nutui-color-text));
-  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-title));
-  background: transparent;
-  text-align: var(--nutui-searchbar-input-text-align, left);
-}
 .nut-searchbar-round {
   border-radius: var(--nutui-searchbar-content-round-border-radius, 18px);
 }
 .nut-searchbar-disabled {
   cursor: not-allowed;
 }
+.nut-searchbar-focus {
+  padding: 5px var(--nutui-searchbar-gap, 16px);
+}
+.nut-searchbar-focus .nut-searchbar-content {
+  border: 0.5px solid #ff5c67;
+}
 
 [dir=rtl] .nut-searchbar-left,
 .nut-rtl .nut-searchbar-left {

package/dist/es/packages/searchbar/style-jrkf/searchbar.scss

@@ -9,28 +9,114 @@
   box-sizing: border-box;
   justify-content: center;
 
+  .nut-icon {
+    width: $searchbar-icon-size;
+    height: $searchbar-icon-size;
+    font-size: $searchbar-icon-size;
+  }
+
   &-content {
+    position: relative;
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: $searchbar-content-padding;
+    padding: 0 $searchbar-gap;
     height: $searchbar-input-height;
     background: $searchbar-content-background;
     border-radius: $searchbar-content-border-radius;
+    border: 1px solid $color-primary;
   }
 
   &-icon {
     display: flex;
     justify-content: center;
     align-items: center;
+    color: $color-primary;
+  }
+
+  &-leftin {
+    margin-right: $searchbar-inner-gap;
   }
 
-  &-clear,
   &-rightin {
-    width: 16px;
-    height: 16px;
-    color: var(--nutui-black-5);
+    font-size: 15px;
+    font-weight: 500;
+    color: $color-primary;
+
+    &.nut-searchbar-icon {
+      color: var(--nutui-black-5);
+    }
+  }
+
+  &-input-box,
+  &-input {
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+
+  &-input {
+    border: 0;
+    outline: 0;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    font-size: $searchbar-font-size;
+    color: $searchbar-input-text-color;
+    caret-color: $searchbar-input-curror-color;
+    background: transparent;
+    text-align: $searchbar-input-text-align;
+  }
+
+  &-clear {
+    &.nut-searchbar-icon {
+      position: relative;
+      .nut-icon {
+        width: 12px;
+        height: 12px;
+        color: var(--nutui-black-5);
+        margin-right: $searchbar-inner-gap;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 200%;
+        left: -20%;
+      }
+    }
+  }
+
+  &-values {
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    z-index: 2;
+    background-color: #fff;
+    top: 9px;
+    left: 6px;
+    font-size: 12px;
+    line-height: 12px;
+
+    .nut-searchbar-value {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 4px 8px;
+      background-color: #f7f8fc;
+      border-radius: 4px;
+      margin-right: 2px;
+    }
+
+    .nut-icon {
+      width: 6px;
+      height: 6px;
+      font-size: 6px;
+      color: #c2c4cc;
+      margin-left: 4px;
+    }
   }
 
   &-left,
@@ -93,26 +179,6 @@
     }
   }
 
-  &-input-box,
-  &-input {
-    display: flex;
-    align-items: center;
-    flex: 1;
-  }
-
-  &-input {
-    border: 0;
-    outline: 0;
-    box-sizing: border-box;
-    width: 100%;
-    padding: $searchbar-input-padding;
-    font-size: $searchbar-font-size;
-    color: $searchbar-input-text-color;
-    caret-color: $searchbar-input-curror-color;
-    background: transparent;
-    text-align: $searchbar-input-text-align;
-  }
-
   &-round {
     border-radius: $searchbar-content-round-border-radius;
   }
@@ -120,6 +186,14 @@
   &-disabled {
     cursor: not-allowed;
   }
+
+  &-focus {
+    padding: 5px $searchbar-gap;
+
+    .nut-searchbar-content {
+      border: 0.5px solid #ff5c67;
+    }
+  }
 }
 
 [dir='rtl'] .nut-searchbar,

package/dist/es/packages/searchbar/style-jrkf/style.css

@@ -13,26 +13,101 @@
   box-sizing: border-box;
   justify-content: center;
 }
+.nut-searchbar .nut-icon {
+  width: var(--nutui-searchbar-icon-size, 20px);
+  height: var(--nutui-searchbar-icon-size, 20px);
+  font-size: var(--nutui-searchbar-icon-size, 20px);
+}
 .nut-searchbar-content {
+  position: relative;
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--nutui-searchbar-content-padding, 0 12px);
+  padding: 0 var(--nutui-searchbar-gap, 16px);
   height: var(--nutui-searchbar-input-height, 36px);
   background: var(--nutui-searchbar-content-background, var(--nutui-color-default-light));
   border-radius: var(--nutui-searchbar-content-border-radius, var(--nutui-radius-xs));
+  border: 1px solid var(--nutui-color-primary, #ff6666);
 }
 .nut-searchbar-icon {
   display: flex;
   justify-content: center;
   align-items: center;
+  color: var(--nutui-color-primary, #ff6666);
+}
+.nut-searchbar-leftin {
+  margin-right: var(--nutui-searchbar-inner-gap, 8px);
+}
+.nut-searchbar-rightin {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--nutui-color-primary, #ff6666);
 }
-.nut-searchbar-clear, .nut-searchbar-rightin {
-  width: 16px;
-  height: 16px;
+.nut-searchbar-rightin.nut-searchbar-icon {
   color: var(--nutui-black-5);
 }
+.nut-searchbar-input-box, .nut-searchbar-input {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.nut-searchbar-input {
+  border: 0;
+  outline: 0;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-text));
+  color: var(--nutui-searchbar-input-text-color, var(--nutui-color-text));
+  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-title));
+  background: transparent;
+  text-align: var(--nutui-searchbar-input-text-align, left);
+}
+.nut-searchbar-clear.nut-searchbar-icon {
+  position: relative;
+}
+.nut-searchbar-clear.nut-searchbar-icon .nut-icon {
+  width: 12px;
+  height: 12px;
+  color: var(--nutui-black-5);
+  margin-right: var(--nutui-searchbar-inner-gap, 8px);
+}
+.nut-searchbar-clear.nut-searchbar-icon::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 200%;
+  left: -20%;
+}
+.nut-searchbar-values {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  z-index: 2;
+  background-color: #fff;
+  top: 9px;
+  left: 6px;
+  font-size: 12px;
+  line-height: 12px;
+}
+.nut-searchbar-values .nut-searchbar-value {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px 8px;
+  background-color: #f7f8fc;
+  border-radius: 4px;
+  margin-right: 2px;
+}
+.nut-searchbar-values .nut-icon {
+  width: 6px;
+  height: 6px;
+  font-size: 6px;
+  color: #c2c4cc;
+  margin-left: 4px;
+}
 .nut-searchbar-left, .nut-searchbar-right {
   display: inline-flex;
   align-items: center;
@@ -75,29 +150,18 @@
 .nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
   margin-left: 0;
 }
-.nut-searchbar-input-box, .nut-searchbar-input {
-  display: flex;
-  align-items: center;
-  flex: 1;
-}
-.nut-searchbar-input {
-  border: 0;
-  outline: 0;
-  box-sizing: border-box;
-  width: 100%;
-  padding: var(--nutui-searchbar-input-padding, 4px 8px);
-  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-text));
-  color: var(--nutui-searchbar-input-text-color, var(--nutui-color-text));
-  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-title));
-  background: transparent;
-  text-align: var(--nutui-searchbar-input-text-align, left);
-}
 .nut-searchbar-round {
   border-radius: var(--nutui-searchbar-content-round-border-radius, 18px);
 }
 .nut-searchbar-disabled {
   cursor: not-allowed;
 }
+.nut-searchbar-focus {
+  padding: 5px var(--nutui-searchbar-gap, 16px);
+}
+.nut-searchbar-focus .nut-searchbar-content {
+  border: 0.5px solid #ff5c67;
+}
 
 [dir=rtl] .nut-searchbar-left,
 .nut-rtl .nut-searchbar-left {

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

@@ -0,0 +1,42 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-segmented {
+  display: inline-flex;
+  height: 24px;
+  min-width: 24px;
+  padding: 2px;
+  align-items: center;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.4);
+  box-sizing: border-box;
+}
+
+.nut-segmented-item {
+  display: flex;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  border-radius: 4px;
+  color: #ffffff;
+  font-size: 12px;
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+.nut-segmented-item-active {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.nut-segmented-icon {
+  height: 10px;
+  width: 10px;
+  margin-right: 2px;
+}
+.nut-segmented-icon .nut-icon {
+  height: 10px;
+  width: 10px;
+  font-size: 10px;
+}