@nutui/nutui-react-taro 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/style.harmony.css

@@ -0,0 +1,328 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-searchbar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 1px 8px;
+  background: #f7f8fc;
+  color: #1a1a1a;
+  font-size: 14px;
+  box-sizing: border-box;
+  justify-content: center;
+}
+.nut-searchbar .nut-icon {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+}
+.nut-searchbar-content {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px;
+  height: 38px;
+  background: #ffffff;
+  border-radius: 8px;
+  border: 1px solid #ff0f23;
+}
+.nut-searchbar-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #ff0f23;
+}
+.nut-searchbar-leftin {
+  margin-right: 8px;
+}
+.nut-searchbar-rightin {
+  font-size: 15px;
+  font-weight: 500;
+  color: #ff0f23;
+}
+.nut-searchbar-rightin.nut-searchbar-icon {
+  color: rgba(0, 0, 0, 0.2);
+}
+.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: 14px;
+  color: #1a1a1a;
+  caret-color: #ff0f23;
+  background: transparent;
+  text-align: left;
+}
+.nut-searchbar-clear.nut-searchbar-icon {
+  position: relative;
+}
+.nut-searchbar-clear.nut-searchbar-icon .nut-icon {
+  width: 12px;
+  height: 12px;
+  color: rgba(0, 0, 0, 0.2);
+  margin-right: 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;
+}
+.nut-searchbar-left.nut-icon, .nut-searchbar-right.nut-icon {
+  width: 20px;
+  height: 20px;
+}
+.nut-searchbar-left {
+  margin-right: 12px;
+}
+.nut-searchbar-left > div {
+  margin-right: 12px;
+}
+.nut-searchbar-left > span {
+  margin-right: 12px;
+}
+.nut-searchbar-left > i {
+  margin-right: 12px;
+}
+.nut-searchbar-left > svg {
+  margin-right: 12px;
+}
+.nut-searchbar-left .nut-icon {
+  margin-right: 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: 12px;
+}
+.nut-searchbar-right > div {
+  margin-left: 12px;
+}
+.nut-searchbar-right > span {
+  margin-left: 12px;
+}
+.nut-searchbar-right > i {
+  margin-left: 12px;
+}
+.nut-searchbar-right > svg {
+  margin-left: 12px;
+}
+.nut-searchbar-right .nut-icon {
+  margin-left: 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 {
+  margin-right: 12px;
+}
+.nut-searchbar-left > view {
+  margin-right: 12px;
+}
+.nut-searchbar-left > text:last-child, .nut-searchbar-left > view:last-child {
+  margin-right: 0;
+}
+.nut-searchbar-right > text {
+  margin-left: 12px;
+}
+.nut-searchbar-right > view {
+  margin-left: 12px;
+}
+.nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
+  margin-left: 0;
+}
+.nut-searchbar-round {
+  border-radius: 19px;
+}
+.nut-searchbar-disabled {
+  cursor: not-allowed;
+}
+.nut-searchbar-focus {
+  padding: 5px 12px;
+}
+.nut-searchbar-focus .nut-searchbar-content {
+  border: 0.5px solid #ff5c67;
+}
+
+[dir=rtl] .nut-searchbar-left {
+  margin-right: 0;
+  margin-left: 12px;
+}
+
+.nut-rtl .nut-searchbar-left {
+  margin-right: 0;
+  margin-left: 12px;
+}
+[dir=rtl] .nut-searchbar-left > div {
+  margin-right: 0;
+  margin-left: 12px;
+}
+[dir=rtl] .nut-searchbar-left > span {
+  margin-right: 0;
+  margin-left: 12px;
+}
+[dir=rtl] .nut-searchbar-left > svg {
+  margin-right: 0;
+  margin-left: 12px;
+}
+.nut-rtl .nut-searchbar-left > div {
+  margin-right: 0;
+  margin-left: 12px;
+}
+.nut-rtl .nut-searchbar-left > span {
+  margin-right: 0;
+  margin-left: 12px;
+}
+.nut-rtl .nut-searchbar-left > svg {
+  margin-right: 0;
+  margin-left: 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,
+.nut-rtl .nut-searchbar-left > span.nut-icon,
+.nut-rtl .nut-searchbar-left > svg.nut-icon {
+  transform: rotate(180deg);
+}
+[dir=rtl] .nut-searchbar-left > div:last-child, [dir=rtl] .nut-searchbar-left > span:last-child, [dir=rtl] .nut-searchbar-left > svg:last-child,
+.nut-rtl .nut-searchbar-left > div:last-child,
+.nut-rtl .nut-searchbar-left > span:last-child,
+.nut-rtl .nut-searchbar-left > svg:last-child {
+  margin-right: 0;
+  margin-left: 0;
+}
+[dir=rtl] .nut-searchbar-right {
+  margin-left: 0;
+  margin-right: 12px;
+}
+.nut-rtl .nut-searchbar-right {
+  margin-left: 0;
+  margin-right: 12px;
+}
+[dir=rtl] .nut-searchbar-right > div {
+  margin-left: 0;
+  margin-right: 12px;
+}
+[dir=rtl] .nut-searchbar-right > span {
+  margin-left: 0;
+  margin-right: 12px;
+}
+[dir=rtl] .nut-searchbar-right > svg {
+  margin-left: 0;
+  margin-right: 12px;
+}
+.nut-rtl .nut-searchbar-right > div {
+  margin-left: 0;
+  margin-right: 12px;
+}
+.nut-rtl .nut-searchbar-right > span {
+  margin-left: 0;
+  margin-right: 12px;
+}
+.nut-rtl .nut-searchbar-right > svg {
+  margin-left: 0;
+  margin-right: 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,
+.nut-rtl .nut-searchbar-right > span:first-child,
+.nut-rtl .nut-searchbar-right > svg:first-child {
+  margin-left: 0;
+  margin-right: 0;
+}
+[dir=rtl] .nut-searchbar-left > text {
+  margin-right: 0;
+  margin-left: 12px;
+}
+[dir=rtl] .nut-searchbar-left > view {
+  margin-right: 0;
+  margin-left: 12px;
+}
+.nut-rtl .nut-searchbar-left > text {
+  margin-right: 0;
+  margin-left: 12px;
+}
+.nut-rtl .nut-searchbar-left > view {
+  margin-right: 0;
+  margin-left: 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,
+.nut-rtl .nut-searchbar-left > view:last-child {
+  margin-right: 0;
+  margin-left: 0;
+}
+[dir=rtl] .nut-searchbar-right > text {
+  margin-left: 0;
+  margin-right: 12px;
+}
+[dir=rtl] .nut-searchbar-right > view {
+  margin-left: 0;
+  margin-right: 12px;
+}
+.nut-rtl .nut-searchbar-right > text {
+  margin-left: 0;
+  margin-right: 12px;
+}
+.nut-rtl .nut-searchbar-right > view {
+  margin-left: 0;
+  margin-right: 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,
+.nut-rtl .nut-searchbar-right > view:first-child {
+  margin-left: 0;
+  margin-right: 0;
+}
+[dir=rtl] .nut-searchbar-input {
+  text-align: right;
+}
+.nut-rtl .nut-searchbar-input {
+  text-align: right;
+}