From 5dded5702dfcd91e950410cd1a03609785e54f16 Mon Sep 17 00:00:00 2001 From: MNZhu Date: Thu, 2 Mar 2023 10:16:13 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(search):=20=E6=90=9C=E7=B4=A2=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/base/basic-var.less | 14 +++-- src/search/index.js | 24 ++++--- src/search/index.less | 135 ++++++++++++++++++++++++---------------- src/search/vars.less | 22 +++++-- 4 files changed, 122 insertions(+), 73 deletions(-) diff --git a/src/base/basic-var.less b/src/base/basic-var.less index 8194bc8..0d02396 100644 --- a/src/base/basic-var.less +++ b/src/base/basic-var.less @@ -72,24 +72,28 @@ --ti-mobile-common-color-text-weaken-ligtht: var(--ti-mobile-base-color-common-7); /* 文本_弱化色_浅色/提示*/ --ti-mobile-common-color-text-weaken-disabled: var(--ti-mobile-base-color-common-8); /* 文本_弱化色_浅色/禁用*/ --ti-mobile-common-color-text-white: var(--ti-mobile-base-color-common-12); /* 文本_白色*/ + --ti-mobile-common-color-text-placeholder-primary: #dbe5fc; /* placeholder_主要*/ + --ti-mobile-common-color-text-placeholder-gray: #acacac; /* placeholder_灰*/ /* 文本链接色*/ --ti-mobile-common-color-link-dark: var(--ti-mobile-base-color-common-2); /* 文本_链接__深色*/ --ti-mobile-common-color-link-highlight: var(--ti-mobile-base-color-brand-1); /* 文本_链接_高亮色*/ --ti-mobile-common-color-link-gray: var(--ti-mobile-base-color-common-13); /* 文本_链接_灰色加强*/ - --ti-mobile-common-color-link-white: var( --ti-mobile-base-color-common-12); /* 文本_链接_白色*/ + --ti-mobile-common-color-link-white: var(--ti-mobile-base-color-common-12); /* 文本_链接_白色*/ /* 线颜色*/ --ti-mobile-common-color-line-hightlight: var(--ti-mobile-base-color-brand-1); /* 高亮_描边色*/ - --ti-mobile-common-color-line-dark: var( --ti-mobile-base-color-common-9); /* 深_描边色*/ - --ti-mobile-common-color-line-light: var( --ti-mobile-base-color-common-10); /* 浅_描边色*/ + --ti-mobile-common-color-line-dark: var(--ti-mobile-base-color-common-9); /* 深_描边色*/ + --ti-mobile-common-color-line-light: var(--ti-mobile-base-color-common-10); /* 浅_描边色*/ + --ti-mobile-common-color-line-white: var(--ti-mobile-base-color-common-12); /* 白色*/ /* 蒙层色*/ - --ti-mobile-common-color-mask-light: rgba(0,0,0,0.5); /* 蒙层_相对浅*/ - --ti-mobile-common-color-mask-dark: rgba(0,0,0,0.75); /* 蒙层_相对深*/ + --ti-mobile-common-color-mask-light: rgba(0, 0, 0, 0.5); /* 蒙层_相对浅*/ + --ti-mobile-common-color-mask-dark: rgba(0, 0, 0, 0.75); /* 蒙层_相对深*/ /* 蒙层色*/ --ti-mobile-common-bg-color-white: var(--ti-mobile-base-color-bg-3); /* 背景_白*/ --ti-mobile-common-bg-color-main: var(--ti-mobile-base-color-brand-1); /* 背景_蓝*/ --ti-mobile-common-bg-color-light: var(--ti-mobile-base-color-bg-2); /* 背景_浅灰*/ + --ti-mobile-common-bg-color-blue-1: var(--ti-mobile-base-color-brand-2); /* 背景_蓝*/ } diff --git a/src/search/index.js b/src/search/index.js index 1bbd174..6661fb0 100644 --- a/src/search/index.js +++ b/src/search/index.js @@ -1,8 +1,18 @@ export default { - 'tiny-mobile-search-input-height': '44px', - 'tiny-mobile-search-input-border-color': '#ccc', - 'tiny-mobile-search-text-color': '#333', - 'tiny-mobile-search-bgcolor': '#fff', - 'tiny-mobile-search-icon-color': '#ccc', - 'tiny-mobile-search-close-icon-color': '#999' -} + "tiny-mobile-search-height": "44px", + "tiny-mobile-search-input-height": "32px", + "tiny-mobile-search-input-border-radius": "32px", + "tiny-mobile-search-input-bg-color-gray": "#f5f5f5", + "tiny-mobile-search-input-bg-color-primary": "rgba(255, 255, 255, 0.15)", + "tiny-mobile-search-font-size": "14px", + "tiny-mobile-search-text-color-gray": "#191919", + "tiny-mobile-search-text-color-primary": "#fff", + "tiny-mobile-search-icon-fill-color-gray": "#dbdbdb", + "tiny-mobile-search-icon-fill-color-primary": "#fff", + "tiny-mobile-search-caret-color-primary": "#fff", + "tiny-mobile-search-caret-color-gray": "#4a79fe", + "tiny-mobile-search-bg-color-primary": "#3168f1", + "tiny-mobile-search-bg-color-gray": "#fff", + "tiny-mobile-search-placeholder-text-color-primary": "#dbe5fc", + "tiny-mobile-search-placeholder-text-color-gray": "#acacac", +}; diff --git a/src/search/index.less b/src/search/index.less index 5dd7c8c..fe53400 100644 --- a/src/search/index.less +++ b/src/search/index.less @@ -19,24 +19,27 @@ @search-prefix-cls: ~'@{css-prefix}mobile-search'; .@{search-prefix-cls} { - position: relative; + // position: relative; display: flex; + align-items: center; box-sizing: border-box; - height: var(--ti-mobile-search-input-height, 44px); - line-height: var(--ti-mobile-search-input-height, 44px); - background-color: var(--ti-mobile-search-bgcolor, #fff); + height: var(--ti-mobile-search-height); outline: none; - .hairline('bottom', var(--ti-mobile-search-input-border-color, #ccc)); & &__line { position: relative; flex: auto; + height: var(--ti-mobile-search-input-height); + margin-left: 16px; + border-radius: var(--ti-mobile-search-input-border-radius); + overflow: hidden; + box-sizing: border-box; + background: transparent; &::after { content: ''; width: 200%; height: 200%; - background: var(--ti-mobile-search-bgcolor, #fff); box-sizing: border-box; position: absolute; top: 0; @@ -47,67 +50,75 @@ } & &__box { + display: flex; + align-items: center; position: relative; - box-sizing: border-box; - width: 100%; height: 100%; - padding-right: 30px; - padding-left: 30px; + padding-left: 16px; + padding-right: 16px; z-index: 2; - opacity: 0; + backdrop-filter: blur(5px); } - & &__label { - position: absolute; - right: 1px; - bottom: 1px; - left: 1px; - color: var(--ti-mobile-search-icon-color, #ccc); - background: var(--ti-mobile-search-bgcolor, #fff); - text-align: center; - z-index: 1; + &-gray &__box { + background: var(--ti-mobile-search-input-bg-color-gray); + } + + &-primary &__box { + background: var(--ti-mobile-search-input-bg-color-primary); } & &__input { box-sizing: content-box; width: 100%; - height: 1.42857143em; - padding: 4px 0; + height: 100%; border: 0; margin-left: 8px; - color: var(--ti-mobile-search-text-color, #333); + padding-right: 15px; + color: var(--ti-mobile-search-text-color-primary); background: transparent; - font-size: 15px; - line-height: 1.42857143em; - caret-color: #f36164; + font-size: var(--ti-mobile-search-font-size); outline: none; - .placeholder(@color: var(--ti-mobile-search-close-icon-color, #999)); - &:focus { - .placeholder(@color: #d9d9d9); + &-primary { + color: var(--ti-mobile-search-text-color-primary); + caret-color: var(--ti-mobile-search-caret-color-primary); + .placeholder(@color: var(--ti-mobile-search-placeholder-text-color-primary)); + &:focus { + .placeholder(@color: var(--ti-mobile-search-placeholder-text-color-primary)); + } + } + + &-gray { + color: var(--ti-mobile-search-text-color-gray); + caret-color: var(--ti-mobile-search-caret-color-gray); + .placeholder(@color: var(--ti-mobile-search-placeholder-text-color-gray)); + &:focus { + .placeholder(@color: var(--ti-mobile-search-placeholder-text-color-gray)); + } } } + &-primary { + background-color: var(--ti-mobile-search-bg-color-primary); + } + + &-gray { + background-color: var(--ti-mobile-search-bg-color-gray); + } + & &__icon { text-decoration: none; display: flex; - position: absolute; - left: 10px; - top: 50%; - transform: translateY(-50%); .@{css-prefix}svg { - fill: var(--ti-mobile-search-icon-color, #ccc); - font-size: 16px; + fill: var(--ti-mobile-search-placeholder-text-color-primary); } } - & &__icon-label { - margin-right: 8px; - + &-gray &__icon { .@{css-prefix}svg { - fill: var(--ti-mobile-search-icon-color, #ccc); - font-size: 16px; + fill: var(--ti-mobile-search-placeholder-text-color-gray); } } @@ -116,28 +127,47 @@ top: 0; right: 0; padding: 0 8px; - line-height: 44px; cursor: pointer; + } + &-primary { .@{css-prefix}svg { - fill: var(--ti-mobile-search-close-icon-color, #999); - font-size: 16px; + fill: var(--ti-mobile-search-icon-fill-color-primary); } } + &-gray { + .@{css-prefix}svg { + fill: var(--ti-mobile-search-icon-fill-color-gray); + } + } + + &__right { + display: flex; + align-items: center; + justify-content: center; + width: 46px; + height: 100%; + color: var(--ti-mobile-search-text-color-primary); + } + + &-gray { + color: var(--ti-mobile-search-text-color-gray); + } + & &__present { - display: none; - padding: 0 12px; - border-left: 1px solid var(--ti-mobile-search-input-border-color, #ccc); - color: var(--ti-mobile-search-text-color, #333); - background-color: var(--ti-mobile-search-bgcolor, #fff); - font-size: 16px; - line-height: 44px; + color: var(--ti-mobile-search-text-color-primary); + font-size: var(--ti-mobile-search-font-size); + line-height: 1; white-space: nowrap; cursor: pointer; outline: none; } + &-gray &__present { + color: var(--ti-mobile-search-text-color-gray); + } + &.focus &__present { display: block; } @@ -150,11 +180,6 @@ opacity: 1; } - & &__text { - color: var(--ti-mobile-search-text-color, #333); - font-size: 16px; - } - &.collapse &__input { padding: 0; width: 30px; diff --git a/src/search/vars.less b/src/search/vars.less index 709e204..e9f12c8 100644 --- a/src/search/vars.less +++ b/src/search/vars.less @@ -1,8 +1,18 @@ :root { - --ti-mobile-search-input-height: 44px; - --ti-mobile-search-input-border-color: #ccc; - --ti-mobile-search-text-color: var(--ti-mobile-base-color-info-normal, #333333); - --ti-mobile-search-bgcolor: var(--ti-mobile-base-color-light, #fff); - --ti-mobile-search-icon-color: #ccc; - --ti-mobile-search-close-icon-color: var(--ti-mobile-base-color-placeholder, #999); + --ti-mobile-search-height: 44px; + --ti-mobile-search-input-height: 32px; + --ti-mobile-search-input-border-radius: 32px; + --ti-mobile-search-input-bg-color-gray: var(--ti-mobile-common-bg-color-dark-gray, #f5f5f5); + --ti-mobile-search-input-bg-color-primary: rgba(255, 255, 255, 0.15); + --ti-mobile-search-font-size: 14px; + --ti-mobile-search-text-color-gray: var(--ti-mobile-common-color-text-primary, #191919); + --ti-mobile-search-text-color-primary: var(--ti-mobile-common-color-text-white, #fff); + --ti-mobile-search-icon-fill-color-gray: #dbdbdb; + --ti-mobile-search-icon-fill-color-primary: #fff; + --ti-mobile-search-caret-color-primary: var(--ti-mobile-common-color-line-white, #fff); + --ti-mobile-search-caret-color-gray: var(--ti-mobile-common-color-line-hightlight, #4a79fe); + --ti-mobile-search-bg-color-primary: var(--ti-mobile-common-bg-color-blue-1, #3168f1); + --ti-mobile-search-bg-color-gray: var(--ti-mobile-common-bg-color-white, #fff); + --ti-mobile-search-placeholder-text-color-primary: var(--ti-mobile-common-color-text-placeholder-primary, #dbe5fc); + --ti-mobile-search-placeholder-text-color-gray: var(--ti-mobile-common-color-text-placeholder-gray, #acacac); } From 24156167988909cbcf84870ba38e69fb809f1ceb Mon Sep 17 00:00:00 2001 From: MNZhu Date: Fri, 3 Mar 2023 09:12:15 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat(search):=20=E5=88=A0=E9=99=A4=E6=B3=A8?= =?UTF-8?q?=E9=87=8A=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/search/index.less | 1 - 1 file changed, 1 deletion(-) diff --git a/src/search/index.less b/src/search/index.less index fe53400..33cb4e9 100644 --- a/src/search/index.less +++ b/src/search/index.less @@ -19,7 +19,6 @@ @search-prefix-cls: ~'@{css-prefix}mobile-search'; .@{search-prefix-cls} { - // position: relative; display: flex; align-items: center; box-sizing: border-box;