diff --git a/packages/theme/src/search/index.less b/packages/theme/src/search/index.less index aa6f108a65..1649f125ef 100644 --- a/packages/theme/src/search/index.less +++ b/packages/theme/src/search/index.less @@ -97,6 +97,24 @@ } } + // tiny新增 + & &__input-btn.@{css-prefix}icon-close { + margin-right: var(--ti-search-input-btn-close-margin-right); + + & a::after { + content: ''; + display: var(--ti-search-input-btn-close-display); + position: absolute; + top: 50%; + right: 7px; + transform: translateY(-50%); + width: 1px; + height: 16px; + background-color: #000000; + opacity: 8%; + } + } + & &__input-btn { text-align: center; diff --git a/packages/theme/src/search/smb-theme.js b/packages/theme/src/search/smb-theme.js index 320dccddad..2988195e17 100644 --- a/packages/theme/src/search/smb-theme.js +++ b/packages/theme/src/search/smb-theme.js @@ -5,5 +5,8 @@ export const tinySearchSmbTheme = { 'ti-search-selector-box-shadow': 'var(--ti-common-shadow-3-up)', 'ti-search-input-btn-icon-size': 'var(--ti-common-font-size-2)', 'ti-search-input-placeholder-text-color': 'var(--ti-common-color-placeholder)', - 'ti-search-input-left-svg-margin-right': 'calc(0px - var(--ti-common-space-2x))' + 'ti-search-input-left-svg-margin-right': 'calc(0px - var(--ti-common-space-2x))', + 'ti-search-input-btn-width': 'var(--ti-common-size-7x)', + 'ti-search-input-btn-close-display': 'inline-block', + 'ti-search-input-btn-close-margin-right': '-3px' } diff --git a/packages/theme/src/search/vars.less b/packages/theme/src/search/vars.less index 1cab8342fc..98ca88e2b5 100644 --- a/packages/theme/src/search/vars.less +++ b/packages/theme/src/search/vars.less @@ -40,6 +40,10 @@ --ti-search-input-btn-icon-size: var(--ti-common-font-size-1, 14px); // 搜索按钮宽度(hide) --ti-search-input-btn-width: var(--ti-common-size-6x, 24px); + // 搜索关闭按钮右边距(hide) + --ti-search-input-btn-close-margin-right: var(--ti-common-space-0, 0px); + // 搜索关闭按钮显示方式(hide) + --ti-search-input-btn-close-display: none; // 搜索框按钮行高(hide) --ti-search-input-btn-line-height: var(--ti-search-input-height); // 搜索图标边框色(hide) diff --git a/packages/vue/src/search/src/pc.vue b/packages/vue/src/search/src/pc.vue index 1cbb8c4e9b..4f2716f397 100644 --- a/packages/vue/src/search/src/pc.vue +++ b/packages/vue/src/search/src/pc.vue @@ -60,7 +60,7 @@ :tabindex="tabindex" /> -
+