Skip to content

Commit bdc7644

Browse files
zzcrzzcr
committed
refactor(search): [search] refactor search theme
1 parent ffd3c7f commit bdc7644

File tree

5 files changed

+108
-133
lines changed

5 files changed

+108
-133
lines changed

‎examples/sites/demos/pc/app/search/mini-mode.spec.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ test('迷你模式', async ({ page }) => {
1313

1414
await expect(search).toHaveClass(/collapse/)
1515
await expect(input).not.toBeVisible()
16-
await expect(line).toHaveCSS('width', '28px')
17-
await expect(line).toHaveCSS('border-radius', '28px')
16+
await expect(line).toHaveCSS('width', '32px')
17+
await expect(line).toHaveCSS('border-radius', '32px')
1818

1919
await icon.click()
2020
await expect(search).not.toHaveClass(/collapse/)
@@ -23,6 +23,6 @@ test('迷你模式', async ({ page }) => {
2323
await blank.click() // 点击空白处收回
2424
await expect(search).toHaveClass(/collapse/)
2525
await expect(input).not.toBeVisible()
26-
await expect(line).toHaveCSS('width', '28px')
27-
await expect(line).toHaveCSS('border-radius', '28px')
26+
await expect(line).toHaveCSS('width', '32px')
27+
await expect(line).toHaveCSS('border-radius', '32px')
2828
})

‎examples/sites/demos/pc/app/search/slot-prefix.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@ test('左侧插槽是否正常显示', async ({ page }) => {
88
const prefix = search.locator('.tiny-search__prefix > svg')
99

1010
await expect(prefix).toBeVisible()
11-
await expect(prefix).toHaveCSS('font-size', '14px')
11+
await expect(prefix).toHaveCSS('font-size', '16px')
1212
})

‎examples/sites/demos/pc/app/search/transparent-mode.spec.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ test('迷你模式下的透明模式', async ({ page }) => {
1515

1616
await expect(search).toHaveClass(/collapse/)
1717
await expect(input).not.toBeVisible()
18-
await expect(line).toHaveCSS('width', '28px')
19-
await expect(line).toHaveCSS('border-radius', '28px')
18+
await expect(line).toHaveCSS('width', '32px')
19+
await expect(line).toHaveCSS('border-radius', '32px')
2020

2121
await icon.click()
2222
await expect(search).not.toHaveClass(/collapse/)
@@ -29,6 +29,6 @@ test('迷你模式下的透明模式', async ({ page }) => {
2929
await blank.click() // 点击空白处收回
3030
await expect(search).toHaveClass(/collapse/)
3131
await expect(input).not.toBeVisible()
32-
await expect(line).toHaveCSS('width', '28px')
33-
await expect(line).toHaveCSS('border-radius', '28px')
32+
await expect(line).toHaveCSS('width', '32px')
33+
await expect(line).toHaveCSS('border-radius', '32px')
3434
})

‎packages/theme/src/search/index.less

+67-67
Original file line numberDiff line numberDiff line change
@@ -20,27 +20,27 @@
2020
@search-prefix-cls: ~'@{css-prefix}search';
2121

2222
.@{search-prefix-cls} {
23-
.component-css-vars-search();
23+
.inject-Search-vars();
2424

2525
position: relative;
2626
display: inline-block;
27-
font-size: var(--ti-search-font-size);
27+
font-size: var(--tv-Search-font-size);
2828
width: 100%;
2929

3030
&.is-disabled &__input {
3131
cursor: not-allowed;
32-
33-
.placeholder(@color: var(--ti-search-disabled-text-color));
32+
color: var(--tv-Search-input-text-color-disabled);
33+
.placeholder(@color: var(--tv-Search-input-placeholder-color));
3434
}
3535

3636
&.is-disabled > &__line {
3737
cursor: not-allowed;
38-
border: 1px solid var(--ti-search-disabled-border-color);
39-
color: var(--ti-search-disabled-border-color);
40-
background: var(--ti-search-disabled-bg-color);
38+
border: 1px solid var(--tv-Search-disabled-border-color);
39+
color: var(--tv-Search-disabled-border-color);
40+
background: var(--tv-Search-disabled-bg-color);
4141

4242
&:hover {
43-
border-color: var(--ti-search-disabled-border-color);
43+
border-color: var(--tv-Search-disabled-border-color);
4444
}
4545
}
4646

@@ -52,7 +52,7 @@
5252

5353
&,
5454
&:hover {
55-
fill: var(--ti-search-disabled-text-color);
55+
fill: var(--tv-Search-icon-color-disabled);
5656
}
5757
}
5858
}
@@ -61,49 +61,48 @@
6161
display: flex;
6262
align-items: center;
6363
width: 100%;
64-
height: var(--ti-search-input-height);
65-
border: 1px solid var(--ti-search-input-border-color);
66-
border-radius: var(--ti-search-input-border-radius);
67-
background-color: var(--ti-search-input-bg-color);
64+
height: var(--tv-Search-input-height);
65+
border: 1px solid var(--tv-Search-input-border-color);
66+
border-radius: var(--tv-Search-input-border-radius);
67+
background-color: var(--tv-Search-input-bg-color);
6868
transition: 0.4s;
6969
border-collapse: separate;
7070

7171
&:hover {
72-
border-color: var(--ti-search-line-hover-border-color);
72+
border-color: var(--tv-Search-line-hover-border-color);
7373
}
7474

7575
&.focus,
7676
&:focus {
77-
border-color: var(--ti-search-input-focus-border-color);
77+
border-color: var(--tv-Search-input-focus-border-color);
7878
}
7979
}
8080

8181
& &__input {
8282
flex: 1;
8383
height: 100%;
8484
width: 0;
85-
font-size: var(--ti-search-font-size);
85+
font-size: var(--tv-Search-font-size);
8686
line-height: 1;
8787

88-
color: var(--ti-search-input-text-color);
89-
padding: 0 0 0 var(--ti-search-input-padding-left);
88+
color: var(--tv-Search-input-text-color);
89+
padding: 0 0 0 var(--tv-Search-input-padding-left);
9090
border: 0;
9191
outline: none;
9292
background: transparent;
93-
.placeholder(@color: var(--ti-search-input-placeholder-color));
93+
.placeholder(@color: var(--tv-Search-input-placeholder-color));
9494

9595
&:focus {
96-
.placeholder(@color: var(--ti-search-input-placeholder-color));
96+
.placeholder(@color: var(--tv-Search-input-placeholder-color));
9797
}
9898
}
9999

100-
// tiny新增
101100
& &__input-btn.@{css-prefix}icon-close {
102-
margin-right: var(--ti-search-input-btn-close-margin-right);
101+
margin-right: -3px;
103102

104-
& a::after {
103+
& a:after {
105104
content: '';
106-
display: var(--ti-search-input-btn-close-display);
105+
display: inline-block;
107106
position: absolute;
108107
top: 50%;
109108
right: 7px;
@@ -122,42 +121,43 @@
122121
position: relative;
123122
text-decoration: none;
124123
display: block;
125-
width: var(--ti-search-input-btn-width);
126-
height: calc(var(--ti-search-input-height) - 2px);
127-
line-height: calc(var(--ti-search-input-height) - 2px);
124+
width: 28px;
125+
height: calc(var(--tv-Search-input-height) - 2px);
126+
line-height: calc(var(--tv-Search-input-height) - 2px);
128127
}
129128

130129
svg {
131130
position: absolute;
132131
top: 50%;
133-
right: var(--ti-search-input-btn-icon-position-right);
132+
right: 12px;
134133
transform: translateY(-50%);
135-
fill: var(--ti-search-input-btn-icon-color);
136-
font-size: var(--ti-search-input-btn-icon-size);
134+
fill: var(--tv-Search-input-btn-icon-color);
135+
font-size: var(--tv-Search-input-btn-icon-size);
137136
}
138137

139138
&:hover svg {
140-
fill: var(--ti-search-input-btn-hover-icon-color);
139+
fill: var(--tv-Search-input-btn-hover-icon-color);
141140
}
142141
}
143142

144143
& &__prefix {
145144
display: flex;
146145
align-items: center;
146+
147147
svg {
148-
margin: 0 var(--ti-search-input-left-svg-margin-right) 0 var(--ti-search-input-left-svg-margin-left);
149-
font-size: var(--ti-search-input-btn-icon-size);
150-
fill: var(--ti-search-input-btn-icon-color);
148+
margin: 0 -8px 0 12px;
149+
font-size: var(--tv-Search-input-btn-icon-size);
150+
fill: var(--tv-Search-input-btn-icon-color);
151151
}
152152
}
153153

154154
& &__present {
155155
display: flex;
156156
align-items: center;
157-
min-width: var(--ti-search-selector-width);
158-
color: var(--ti-search-selector-text-color);
159-
line-height: var(--ti-search-size-height-normal);
160-
padding-left: var(--ti-search-input-padding-left);
157+
min-width: var(--tv-Search-selector-width);
158+
color: var(--tv-Search-selector-text-color);
159+
line-height: var(--tv-Search-input-height);
160+
padding-left: var(--tv-Search-input-padding-left);
161161
white-space: nowrap;
162162

163163
.@{search-prefix-cls}__text {
@@ -166,91 +166,91 @@
166166
}
167167

168168
.icon-outer {
169-
height: calc(var(--ti-search-size-height-normal) - 12px);
170-
line-height: calc(var(--ti-search-size-height-normal) - 12px);
169+
height: calc(var(--tv-Search-input-height) - 12px);
170+
line-height: calc(var(--tv-Search-input-height) - 12px);
171171
display: flex;
172172
align-items: center;
173173
padding: 0 8px 0 4px;
174-
border-right: 1px solid var(--ti-search-input-border-color);
174+
border-right: 1px solid var(--tv-Search-input-border-color);
175175
cursor: pointer;
176176

177177
svg {
178-
font-size: var(--ti-search-input-btn-icon-size);
179-
fill: var(--ti-search-icon-color);
178+
font-size: var(--tv-Search-input-btn-icon-size);
179+
fill: var(--tv-Search-icon-color);
180180
}
181181
}
182182
}
183183

184184
& &__selector {
185185
position: absolute;
186-
top: var(--ti-search-input-height);
186+
top: var(--tv-Search-input-height);
187187
left: 0;
188188
overflow: hidden;
189-
min-width: var(--ti-search-selector-box-min-width);
190-
border: 1px solid var(--ti-search-input-border-color);
191-
border-radius: var(--ti-search-selector-border-radius);
192-
font-size: var(--ti-search-font-size);
193-
box-shadow: var(--ti-search-selector-box-shadow);
194-
background: var(--ti-search-selector-bg-color);
195-
color: var(--ti-search-selector-text-color);
196-
margin-top: var(--ti-search-selector-margin-top);
189+
min-width: var(--tv-Search-selector-box-min-width);
190+
border: 1px solid var(--tv-Search-input-border-color);
191+
border-radius: var(--tv-Search-selector-border-radius);
192+
font-size: var(--tv-Search-font-size);
193+
box-shadow: var(--tv-Search-selector-box-shadow);
194+
background: var(--tv-Search-selector-bg-color);
195+
color: var(--tv-Search-selector-text---tv-Search-disabled-border-color);
196+
margin-top: var(--tv-Search-selector-margin-top);
197197
}
198198

199199
& &__selector-body {
200-
max-height: var(--ti-search-selector-max-height);
200+
max-height: 300px;
201201
overflow-y: auto;
202202
overflow-x: hidden;
203203
}
204204

205205
& &__poplist-item {
206-
min-height: var(--ti-search-selector-list-height);
207-
padding: 0 var(--ti-search-selector-list-padding-horizontal);
208-
line-height: var(--ti-search-selector-list-height);
206+
min-height: var(--tv-Search-selector-list-height);
207+
padding: 0 var(--tv-Search-selector-list-padding-x);
208+
line-height: var(--tv-Search-selector-list-height);
209209
max-width: 100%;
210-
font-size: var(--ti-search-font-size);
210+
font-size: var(--tv-Search-font-size);
211211
overflow: hidden;
212212
text-align: left;
213213
text-overflow: ellipsis;
214214
white-space: nowrap;
215215

216216
&:hover {
217-
background: var(--ti-search-list-hover-bg-color);
217+
background: var(--tv-Search-list-hover-bg-color);
218218
cursor: pointer;
219219
}
220220

221221
span {
222-
font-size: var(--ti-search-font-size);
222+
font-size: var(--tv-Search-font-size);
223223
}
224224

225225
.icon-check {
226-
font-size: var(--ti-common-font-size-2);
226+
font-size: var(--tv-Search-font-size);
227227

228228
&:hover {
229-
color: var(--ti-search-input-btn-hover-icon-color);
229+
color: var(--tv-Search-input-btn-hover-icon-color);
230230
}
231231
}
232232
}
233233

234234
&.mini &__line {
235-
border-radius: var(--ti-search-input-height);
235+
border-radius: var(--tv-Search-input-height);
236236
width: 100%;
237237
float: right;
238238
}
239239

240240
&.mini.collapse &__input-btn {
241241
a {
242-
width: calc(var(--ti-search-mini-width) - 2px);
242+
width: calc(var(--tv-Search-mini-width) - 2px);
243243

244244
svg {
245-
fill: var(--ti-search-icon-color);
245+
fill: var(--tv-Search-icon-color);
246246
left: 50%;
247247
transform: translate(-50%, -50%);
248248
}
249249
}
250250
}
251251

252252
&.mini &__input {
253-
border-radius: var(--ti-search-input-height);
253+
border-radius: var(--tv-Search-input-height);
254254
}
255255

256256
&.mini.collapse {
@@ -259,12 +259,12 @@
259259

260260
&.collapse &__input {
261261
padding: 0;
262-
width: var(--ti-search-size-height-normal);
262+
width: var(--tv-Search-input-height);
263263
float: right;
264264
}
265265

266266
&.mini.collapse &__line {
267-
width: var(--ti-search-mini-width);
267+
width: var(--tv-Search-mini-width);
268268
float: right;
269269
background-color: transparent;
270270
border-collapse: separate;

0 commit comments

Comments
 (0)