Skip to content

Commit 4219529

Browse files
gimmyhehegimmyhehe
committed
refactor(form): migrate form-item style from form.less to form-item.less
1 parent 2b14dcc commit 4219529

File tree

3 files changed

+140
-159
lines changed

3 files changed

+140
-159
lines changed

‎packages/theme/src/form-item/index.less

Lines changed: 126 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
@import '../mixins/common.less';
1515
@import './vars.less';
1616

17+
@form-prefix-cls: ~'@{css-prefix}form';
1718
@form-item-prefix-cls: ~'@{css-prefix}form-item';
1819
@input-prefix-cls: ~'@{css-prefix}input';
1920
@input-group-prefix-cls: ~'@{css-prefix}input-group';
@@ -58,6 +59,16 @@
5859
}
5960
}
6061

62+
.star-selector(@content) {
63+
&.is-required:not(.is-no-asterisk) {
64+
// 子选择器是避免影响嵌套表单场景
65+
.@{form-item-prefix-cls}__label-wrap > .@{form-item-prefix-cls}__label:before,
66+
& > .@{form-item-prefix-cls}__label:before {
67+
@content();
68+
}
69+
}
70+
}
71+
6172
.@{form-item-prefix-cls} {
6273
.component-css-vars-form-item();
6374

@@ -88,7 +99,7 @@
8899
&--small {
89100
.size-height(
90101
var(--tv-FormItem-height-sm),
91-
var(--tv-FormItem-margin-bottom-lg)
102+
var(--tv-FormItem-margin-bottom-sm)
92103
);
93104
}
94105

@@ -142,11 +153,6 @@
142153
}
143154
}
144155

145-
// numeric只读态使用absolute实现，需要一个margin-top修复水平对齐问题
146-
.@{css-prefix}numeric.is-display-only {
147-
// margin-top: -2px;
148-
}
149-
150156
.@{input-prefix-cls} {
151157
display: inline-block;
152158
&.@{range-editor-prefix-cls}.@{input-prefix-cls}__inner {
@@ -217,16 +223,11 @@
217223
}
218224
}
219225

220-
&.is-required:not(.is-no-asterisk) {
221-
// 子选择器是避免影响嵌套表单场景
222-
.@{form-item-prefix-cls}__label-wrap > .@{form-item-prefix-cls}__label:before,
223-
& > .@{form-item-prefix-cls}__label:before {
224-
display: inline-block;
225-
content: '*';
226-
color: var(--tv-FormItem-text-color-error);
227-
margin-right: 4px;
228-
}
229-
}
226+
.star-selector({
227+
content: '*';
228+
color: var(--tv-FormItem-text-color-error);
229+
margin-right: 4px;
230+
});
230231

231232
&.is-error {
232233
.@{input-prefix-cls}__inner,
@@ -262,3 +263,112 @@
262263
font-size: var(--tv-FormItem-font-size);
263264
}
264265
}
266+
267+
.@{form-prefix-cls} {
268+
.component-css-vars-form-item();
269+
270+
&--inline {
271+
.@{form-item-prefix-cls} {
272+
display: inline-block;
273+
vertical-align: top;
274+
margin-right: 24px;
275+
}
276+
277+
.@{form-item-prefix-cls}__label {
278+
float: none;
279+
display: inline-block;
280+
}
281+
282+
.@{form-item-prefix-cls}__content {
283+
display: inline-block;
284+
vertical-align: top;
285+
}
286+
287+
// 嵌套表单场景
288+
.@{form-prefix-cls}--label-top .@{form-item-prefix-cls}__content {
289+
display: block;
290+
}
291+
}
292+
293+
&--label-left {
294+
&.has-required {
295+
.@{form-item-prefix-cls}__label {
296+
padding-left: 12px;
297+
}
298+
}
299+
.@{form-item-prefix-cls}__label {
300+
text-align: left;
301+
}
302+
303+
&.label-align {
304+
.@{form-item-prefix-cls} {
305+
&.is-required {
306+
.@{form-item-prefix-cls}__label {
307+
padding-left: 12px;
308+
position: relative;
309+
310+
&::before {
311+
position: absolute;
312+
left: 0;
313+
}
314+
}
315+
& ~ .@{form-item-prefix-cls} {
316+
.@{form-item-prefix-cls}__label {
317+
padding-left: 12px;
318+
}
319+
}
320+
}
321+
}
322+
}
323+
}
324+
325+
&--label-top {
326+
.@{form-item-prefix-cls} {
327+
margin-bottom: 16px;
328+
}
329+
.@{form-item-prefix-cls}__label {
330+
float: none;
331+
display: block;
332+
text-align: left;
333+
padding: 0 0 8px;
334+
height: auto;
335+
line-height: var(--tv-FormItem-line-height);
336+
}
337+
}
338+
339+
&.is-display-only {
340+
.@{form-item-prefix-cls}__label {
341+
line-height: var(--tv-FormItem-line-height);
342+
height: auto;
343+
vertical-align: inherit;
344+
color: var(--tv-FormItem-text-color-weaken);
345+
}
346+
347+
.@{form-item-prefix-cls}__content {
348+
line-height: var(--tv-FormItem-line-height);
349+
font-size: var(--tv-FormItem-font-size);
350+
height: auto;
351+
vertical-align: inherit;
352+
353+
// 一些组件的只读态实现方式怪异，需要一些修正样式来修复水平对齐问题
354+
.@{switch-prefix-cls} {
355+
margin-top: 0;
356+
}
357+
358+
.@{css-prefix}numeric.is-display-only {
359+
margin-top: 2px;
360+
}
361+
.@{input-prefix-cls} {
362+
&.@{range-editor-prefix-cls}.@{input-prefix-cls}__inner {
363+
height: 18px;
364+
}
365+
}
366+
}
367+
368+
.@{form-item-prefix-cls} {
369+
.star-selector({
370+
content: '';
371+
});
372+
}
373+
}
374+
}

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

Lines changed: 10 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,6 @@
1616
@form-prefix-cls: ~'@{css-prefix}form';
1717
@form-item-prefix-cls: ~'@{css-prefix}form-item';
1818
@tooltip-prefix-cls: ~'@{css-prefix}tooltip';
19-
@input-prefix-cls: ~'@{css-prefix}input';
20-
@textarea-prefix-cls: ~'@{css-prefix}textarea';
21-
@switch-prefix-cls: ~'@{css-prefix}switch';
22-
@range-editor-prefix-cls: ~'@{css-prefix}range-editor';
2319

2420
.@{form-prefix-cls} {
2521
.component-css-vars-form();
@@ -30,139 +26,21 @@
3026
outline: none;
3127
}
3228

33-
&--inline {
34-
.@{form-item-prefix-cls},
35-
.@{form-item-prefix-cls}__content {
36-
display: inline-block;
37-
vertical-align: top;
38-
}
39-
40-
.@{form-item-prefix-cls} {
41-
margin-right: var(--ti-Form-item-margin-right);
42-
}
43-
44-
.@{form-item-prefix-cls}__label {
45-
float: none;
46-
display: inline-block;
47-
}
48-
49-
.@{form-prefix-cls}--label-top .@{form-item-prefix-cls}__content {
50-
display: block;
51-
}
52-
}
53-
54-
&--label-left {
55-
&.has-required {
56-
.@{form-item-prefix-cls}__label {
57-
padding-left: 12px;
58-
}
59-
}
60-
.@{form-item-prefix-cls}__label {
61-
text-align: left;
62-
}
63-
64-
&.label-align {
65-
.@{form-item-prefix-cls} {
66-
&.is-required {
67-
.@{form-item-prefix-cls}__label {
68-
padding-left: 12px;
69-
position: relative;
70-
71-
&::before {
72-
font-size: 20px;
73-
line-height: 1;
74-
position: absolute;
75-
left: 0;
76-
top: 60%;
77-
transform: translateY(-50%);
78-
}
79-
}
80-
& ~ .@{form-item-prefix-cls} {
81-
.@{form-item-prefix-cls}__label {
82-
padding-left: 12px;
83-
}
84-
}
85-
}
86-
}
87-
}
88-
}
89-
90-
&--label-top {
91-
.@{form-item-prefix-cls}__label {
92-
float: none;
93-
display: inline-block;
94-
text-align: left;
95-
padding: 0 0 8px;
96-
height: var(--ti-Form-label-top-label-height);
97-
line-height: var(--ti-Form-label-top-label-line-height);
98-
}
99-
100-
.@{form-item-prefix-cls} {
101-
margin-bottom: var(--ti-Form-label-top-margin-bottom);
102-
}
103-
}
104-
10529
&--label-top & {
10630
margin-bottom: var(--ti-Form-label-top-margin-bottom);
10731
}
32+
}
10833

109-
&--inline&--label-top {
110-
.@{form-item-prefix-cls} {
111-
margin-bottom: 16px;
112-
margin-right: 64px;
113-
}
114-
115-
.@{form-item-prefix-cls}__label {
116-
display: block;
117-
text-align: left;
118-
}
119-
}
120-
121-
&__valid {
122-
.component-css-vars-form();
123-
&.@{tooltip-prefix-cls}.@{tooltip-prefix-cls}__popper {
124-
.tooltip-validate-icon {
125-
fill: var(--ti-tooltip-validate-icon-color);
126-
margin-right: 8px;
127-
font-size: 16px;
128-
}
129-
}
130-
.@{form-item-prefix-cls}__validate-message {
131-
vertical-align: middle;
34+
.@{form-prefix-cls}__valid {
35+
.component-css-vars-form();
36+
&.@{tooltip-prefix-cls}.@{tooltip-prefix-cls}__popper {
37+
.tooltip-validate-icon {
38+
fill: var(--tv-Form-icon-color-error);
39+
margin-right: 8px;
40+
font-size: var(--tv-Form-icon-size);
13241
}
13342
}
134-
135-
&.is-display-only {
136-
.tiny-form-item__label {
137-
line-height: 1.5;
138-
height: auto;
139-
vertical-align: inherit;
140-
color: var(--ti-Form-display-label-color);
141-
}
142-
143-
.tiny-form-item__content {
144-
line-height: 1.5;
145-
font-size: 14px;
146-
height: auto;
147-
vertical-align: inherit;
148-
}
149-
150-
.@{form-item-prefix-cls}.is-required:not(.is-no-asterisk) {
151-
.@{form-item-prefix-cls}__label-wrap > .@{form-item-prefix-cls}__label:before,
152-
& > .@{form-item-prefix-cls}__label:before {
153-
content: '';
154-
}
155-
}
156-
157-
.@{form-item-prefix-cls}__content {
158-
.@{switch-prefix-cls} {
159-
margin-top: 0;
160-
}
161-
.@{input-prefix-cls} {
162-
&.@{range-editor-prefix-cls}.@{input-prefix-cls}__inner {
163-
height: 18px;
164-
}
165-
}
166-
}
43+
.@{form-item-prefix-cls}__validate-message {
44+
vertical-align: middle;
16745
}
16846
}

‎packages/theme/src/form/vars.less

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,8 @@
1111
*/
1212

1313
.component-css-vars-form() {
14-
// 行内表单输入框右边距(hide)
15-
--ti-Form-item-margin-right: calc(var(--ti-common-space-2x, 8px) + 2px);
16-
17-
// 表单项垂直排列时的下边距(hide)
18-
--ti-Form-label-top-margin-bottom: var(--ti-common-space-4x);
19-
// 表单项垂直排列时的表单项标签行高(hide)
20-
--ti-Form-label-top-label-line-height: 1.5;
21-
// 表单项垂直排列时的表单项标签高度(hide)
22-
--ti-Form-label-top-label-height: calc(1.5em + 8px);
23-
// 仅展示表单文本颜色
24-
--ti-Form-display-label-color: var(--ti-common-color-text-weaken, #8a8e99);
14+
// 表单图标大小
15+
--tv-Form-icon-size: var(--tv-icon-size);
16+
// 表单错误提示图标颜色
17+
--tv-Form-icon-color-error: var(--tv-color-error-icon);
2518
}

0 commit comments

Comments
 (0)