Skip to content

Commit ca7c090

Browse files
authored
refactor(material/core): simplify internal form field styles (#29389)
Reworks the internal form field styles to be smaller and easier to maintain.
1 parent bbf2dbb commit ca7c090

File tree

1 file changed

+35
-7
lines changed

1 file changed

+35
-7
lines changed
Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,40 @@
1-
@use '@material/form-field/form-field' as mdc-form-field;
2-
@use '@material/theme/custom-properties' as mdc-custom-properties;
31
@use '../style/vendor-prefixes';
4-
@use '../mdc-helpers/mdc-helpers';
5-
6-
@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
7-
@include mdc-form-field.static-styles($query: mdc-helpers.$mdc-base-styles-query);
8-
}
92

103
.mat-internal-form-field {
114
@include vendor-prefixes.smooth-font();
5+
display: inline-flex;
6+
align-items: center;
7+
vertical-align: middle;
8+
9+
& > label {
10+
margin-left: 0;
11+
margin-right: auto;
12+
padding-left: 4px;
13+
padding-right: 0;
14+
order: 0;
15+
}
16+
17+
[dir='rtl'] & > label {
18+
margin-left: auto;
19+
margin-right: 0;
20+
padding-left: 0;
21+
padding-right: 4px;
22+
}
23+
}
24+
25+
.mdc-form-field--align-end {
26+
& > label {
27+
margin-left: auto;
28+
margin-right: 0;
29+
padding-left: 0;
30+
padding-right: 4px;
31+
order: -1;
32+
}
33+
34+
[dir='rtl'] .mdc-form-field--align-end & label {
35+
margin-left: 0;
36+
margin-right: auto;
37+
padding-left: 4px;
38+
padding-right: 0;
39+
}
1240
}

0 commit comments

Comments
 (0)