Skip to content

Commit

Permalink
refactor(material/core): simplify internal form field styles (#29389)
Browse files Browse the repository at this point in the history
Reworks the internal form field styles to be smaller and easier to maintain.

(cherry picked from commit ca7c090)
  • Loading branch information
crisbeto committed Jul 8, 2024
1 parent 9ad16eb commit 00fe295
Showing 1 changed file with 35 additions and 7 deletions.
42 changes: 35 additions & 7 deletions src/material/core/internal-form-field/internal-form-field.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,40 @@
@use '@material/form-field/form-field' as mdc-form-field;
@use '@material/theme/custom-properties' as mdc-custom-properties;
@use '../style/vendor-prefixes';
@use '../mdc-helpers/mdc-helpers';

@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
@include mdc-form-field.static-styles($query: mdc-helpers.$mdc-base-styles-query);
}

.mat-internal-form-field {
@include vendor-prefixes.smooth-font();
display: inline-flex;
align-items: center;
vertical-align: middle;

& > label {
margin-left: 0;
margin-right: auto;
padding-left: 4px;
padding-right: 0;
order: 0;
}

[dir='rtl'] & > label {
margin-left: auto;
margin-right: 0;
padding-left: 0;
padding-right: 4px;
}
}

.mdc-form-field--align-end {
& > label {
margin-left: auto;
margin-right: 0;
padding-left: 0;
padding-right: 4px;
order: -1;
}

[dir='rtl'] .mdc-form-field--align-end & label {
margin-left: 0;
margin-right: auto;
padding-left: 4px;
padding-right: 0;
}
}

0 comments on commit 00fe295

Please sign in to comment.