@nutui/nutui-react 3.0.11 → 3.0.12

package/dist/cjs/packages/searchbar/style/style.css

@@ -6,32 +6,107 @@
   display: flex;
   align-items: center;
   width: var(--nutui-searchbar-width, 100%);
-  padding: var(--nutui-searchbar-padding, 6px 16px);
-  background: var(--nutui-searchbar-background, var(--nutui-color-background, #f2f3f5));
+  padding: var(--nutui-searchbar-padding, 1px 8px);
+  background: var(--nutui-searchbar-background, var(--nutui-color-background-sunken, #f7f8fc));
   color: var(--nutui-searchbar-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
   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);
-  height: var(--nutui-searchbar-input-height, 32px);
+  padding: 0 var(--nutui-searchbar-gap, 12px);
+  height: var(--nutui-searchbar-input-height, 38px);
   background: var(--nutui-searchbar-content-background, var(--nutui-color-background-overlay, #ffffff));
-  border-radius: var(--nutui-searchbar-content-border-radius, 4px);
+  border-radius: var(--nutui-searchbar-content-border-radius, 8px);
+  border: 1px solid var(--nutui-color-primary, #ff0f23);
 }
 .nut-searchbar-icon {
   display: flex;
   justify-content: center;
   align-items: center;
+  color: var(--nutui-color-primary, #ff0f23);
+}
+.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, #ff0f23);
+}
+.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-size-base, 14px));
+  color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a));
+  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-primary, #ff0f23));
+  background: transparent;
+  text-align: var(--nutui-searchbar-input-text-align, left);
 }
-.nut-searchbar-clear, .nut-searchbar-rightin {
-  width: 16px;
-  height: 16px;
+.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;
@@ -42,74 +117,63 @@
   height: 20px;
 }
 .nut-searchbar-left {
-  margin-right: var(--nutui-searchbar-gap, 16px);
+  margin-right: var(--nutui-searchbar-gap, 12px);
 }
 .nut-searchbar-left > div, .nut-searchbar-left > span, .nut-searchbar-left > i, .nut-searchbar-left > svg,
 .nut-searchbar-left .nut-icon {
-  margin-right: var(--nutui-searchbar-gap, 16px);
+  margin-right: var(--nutui-searchbar-gap, 12px);
 }
 .nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > i:last-child, .nut-searchbar-left > svg:last-child,
 .nut-searchbar-left .nut-icon:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right {
-  margin-left: var(--nutui-searchbar-gap, 16px);
+  margin-left: var(--nutui-searchbar-gap, 12px);
 }
 .nut-searchbar-right > div, .nut-searchbar-right > span, .nut-searchbar-right > i, .nut-searchbar-right > svg,
 .nut-searchbar-right .nut-icon {
-  margin-left: var(--nutui-searchbar-gap, 16px);
+  margin-left: var(--nutui-searchbar-gap, 12px);
 }
 .nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > i:first-child, .nut-searchbar-right > svg:first-child,
 .nut-searchbar-right .nut-icon:first-child {
   margin-left: 0;
 }
 .nut-searchbar-left > text, .nut-searchbar-left > view {
-  margin-right: var(--nutui-searchbar-gap, 16px);
+  margin-right: var(--nutui-searchbar-gap, 12px);
 }
 .nut-searchbar-left > text:last-child, .nut-searchbar-left > view:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right > text, .nut-searchbar-right > view {
-  margin-left: var(--nutui-searchbar-gap, 16px);
+  margin-left: var(--nutui-searchbar-gap, 12px);
 }
 .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, 0 4px);
-  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a));
-  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-title, #1a1a1a));
-  background: transparent;
-  text-align: var(--nutui-searchbar-input-text-align, left);
-}
 .nut-searchbar-round {
-  border-radius: var(--nutui-searchbar-content-round-border-radius, 18px);
+  border-radius: var(--nutui-searchbar-content-round-border-radius, 19px);
 }
 .nut-searchbar-disabled {
   cursor: not-allowed;
 }
+.nut-searchbar-focus {
+  padding: 5px var(--nutui-searchbar-gap, 12px);
+}
+.nut-searchbar-focus .nut-searchbar-content {
+  border: 0.5px solid #ff5c67;
+}
 
 [dir=rtl] .nut-searchbar-left,
 .nut-rtl .nut-searchbar-left {
   margin-right: 0;
-  margin-left: var(--nutui-searchbar-gap, 16px);
+  margin-left: var(--nutui-searchbar-gap, 12px);
 }
 [dir=rtl] .nut-searchbar-left > div, [dir=rtl] .nut-searchbar-left > span, [dir=rtl] .nut-searchbar-left > svg,
 .nut-rtl .nut-searchbar-left > div,
 .nut-rtl .nut-searchbar-left > span,
 .nut-rtl .nut-searchbar-left > svg {
   margin-right: 0;
-  margin-left: var(--nutui-searchbar-gap, 16px);
+  margin-left: var(--nutui-searchbar-gap, 12px);
 }
 [dir=rtl] .nut-searchbar-left > div.nut-icon, [dir=rtl] .nut-searchbar-left > span.nut-icon, [dir=rtl] .nut-searchbar-left > svg.nut-icon,
 .nut-rtl .nut-searchbar-left > div.nut-icon,
@@ -127,14 +191,14 @@
 [dir=rtl] .nut-searchbar-right,
 .nut-rtl .nut-searchbar-right {
   margin-left: 0;
-  margin-right: var(--nutui-searchbar-gap, 16px);
+  margin-right: var(--nutui-searchbar-gap, 12px);
 }
 [dir=rtl] .nut-searchbar-right > div, [dir=rtl] .nut-searchbar-right > span, [dir=rtl] .nut-searchbar-right > svg,
 .nut-rtl .nut-searchbar-right > div,
 .nut-rtl .nut-searchbar-right > span,
 .nut-rtl .nut-searchbar-right > svg {
   margin-left: 0;
-  margin-right: var(--nutui-searchbar-gap, 16px);
+  margin-right: var(--nutui-searchbar-gap, 12px);
 }
 [dir=rtl] .nut-searchbar-right > div:first-child, [dir=rtl] .nut-searchbar-right > span:first-child, [dir=rtl] .nut-searchbar-right > svg:first-child,
 .nut-rtl .nut-searchbar-right > div:first-child,
@@ -147,7 +211,7 @@
 .nut-rtl .nut-searchbar-left > text,
 .nut-rtl .nut-searchbar-left > view {
   margin-right: 0;
-  margin-left: var(--nutui-searchbar-gap, 16px);
+  margin-left: var(--nutui-searchbar-gap, 12px);
 }
 [dir=rtl] .nut-searchbar-left > text:last-child, [dir=rtl] .nut-searchbar-left > view:last-child,
 .nut-rtl .nut-searchbar-left > text:last-child,
@@ -159,7 +223,7 @@
 .nut-rtl .nut-searchbar-right > text,
 .nut-rtl .nut-searchbar-right > view {
   margin-left: 0;
-  margin-right: var(--nutui-searchbar-gap, 16px);
+  margin-right: var(--nutui-searchbar-gap, 12px);
 }
 [dir=rtl] .nut-searchbar-right > text:first-child, [dir=rtl] .nut-searchbar-right > view:first-child,
 .nut-rtl .nut-searchbar-right > text:first-child,

package/dist/cjs/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/cjs/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/cjs/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,