|
| 1 | +@import '@material/density/functions.import'; |
| 2 | +@import '@material/textfield/variables.import'; |
| 3 | +@import 'form-field-sizing'; |
| 4 | + |
| 5 | +// Mixin that sets the vertical spacing for the infix container of filled form fields. |
| 6 | +// We need to apply spacing to the infix container because we removed the input padding |
| 7 | +// provided by MDC in order to support arbitrary form-field controls. |
| 8 | +@mixin _mat-form-field-infix-vertical-spacing-filled($with-label-padding, $no-label-padding) { |
| 9 | + .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix { |
| 10 | + padding-top: map_get($with-label-padding, top); |
| 11 | + padding-bottom: map_get($with-label-padding, bottom); |
| 12 | + } |
| 13 | + |
| 14 | + .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) |
| 15 | + .mat-mdc-form-field-infix { |
| 16 | + padding-top: map_get($no-label-padding, top); |
| 17 | + padding-bottom: map_get($no-label-padding, bottom); |
| 18 | + } |
| 19 | +} |
| 20 | + |
| 21 | +// Mixin that sets the vertical spacing for the infix container of outlined form fields. |
| 22 | +// We need to apply spacing to the infix container because we removed the input padding |
| 23 | +// provided by MDC in order to support arbitrary form-field controls. |
| 24 | +@mixin _mat-form-field-infix-vertical-spacing-outlined($padding) { |
| 25 | + .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix { |
| 26 | + padding-top: map_get($padding, top); |
| 27 | + padding-bottom: map_get($padding, bottom); |
| 28 | + } |
| 29 | +} |
| 30 | + |
| 31 | +// Mixin that includes the density styles for form fields. MDC provides their own density |
| 32 | +// styles for MDC text-field which we cannot use. MDC relies on input elements to stretch |
| 33 | +// vertically when the height is reduced as per density scale. This doesn't work for for our |
| 34 | +// form field since we support custom form field controls without a fixed height. Instead, we |
| 35 | +// provide spacing that makes arbitrary controls align as specified in the Material Design |
| 36 | +// specification. In order to support density, we need to adjust the vertical spacing to be |
| 37 | +// based on the density scale. |
| 38 | +@mixin _mat-form-field-density($density-scale) { |
| 39 | + // Height of the form field that is based on the current density scale. |
| 40 | + $height: mdc-density-prop-value( |
| 41 | + $density-config: $mdc-text-field-density-config, |
| 42 | + $density-scale: $density-scale, |
| 43 | + $property-name: height, |
| 44 | + ); |
| 45 | + |
| 46 | + // Whether floating labels for filled form fields should be hidden. MDC hides the label in |
| 47 | + // their density styles when the height decreases too much. We match their density styles. |
| 48 | + $hide-filled-floating-label: $height < $mdc-text-field-minimum-height-for-filled-label; |
| 49 | + // We computed the desired height of the form-field using the density configuration. The |
| 50 | + // spec only describes vertical spacing/alignment in non-dense mode. This means that we |
| 51 | + // cannot update the spacing to explicit numbers based on the density scale. Instead, we |
| 52 | + // determine the height reduction and equally subtract it from the default `top` and `bottom` |
| 53 | + // padding that is provided by the Material Design specification. |
| 54 | + $vertical-deduction: ($mdc-text-field-height - $height) / 2; |
| 55 | + // Map that describes the padding for form-fields with label. |
| 56 | + $with-label-padding: ( |
| 57 | + top: $mat-form-field-with-label-input-padding-top - $vertical-deduction, |
| 58 | + bottom: $mat-form-field-with-label-input-padding-bottom - $vertical-deduction, |
| 59 | + ); |
| 60 | + // Map that describes the padding for form-fields without label. |
| 61 | + $no-label-padding: ( |
| 62 | + top: $mat-form-field-no-label-padding-top - $vertical-deduction, |
| 63 | + bottom: $mat-form-field-no-label-padding-bottom - $vertical-deduction, |
| 64 | + ); |
| 65 | + |
| 66 | + // We add a minimum height to the infix container in order to ensure that custom controls have |
| 67 | + // the same default vertical space as text-field inputs (with respect to the vertical padding). |
| 68 | + .mat-mdc-form-field-infix { |
| 69 | + min-height: $height; |
| 70 | + } |
| 71 | + |
| 72 | + // By default, MDC aligns the label using percentage. This will be overwritten based |
| 73 | + // on whether a textarea is used. This is not possible in our implementation of the |
| 74 | + // form-field because we do not know what type of form-field control is set up. Hence |
| 75 | + // we always use a fixed position for the label. This does not have any implications. |
| 76 | + .mat-mdc-form-field .mat-mdc-text-field-wrapper .mdc-floating-label { |
| 77 | + top: $height / 2; |
| 78 | + } |
| 79 | + |
| 80 | + // For the outline appearance, we re-create the active floating label transform. This is |
| 81 | + // necessary because the transform for docked floating labels can be updated to account for |
| 82 | + // the width of prefix container. We need to re-create these styles with `!important` because |
| 83 | + // the horizontal adjustment for the label is applied through inline styles, and we want to |
| 84 | + // make sure that the label can still float as expected. It should be okay using `!important` |
| 85 | + // because it's unlikely that developers commonly overwrite the floating label transform. |
| 86 | + .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded |
| 87 | + .mdc-floating-label--float-above { |
| 88 | + $outlined-label-floating-position-y: mdc-text-field-get-outlined-label-position-y($height); |
| 89 | + // This transform has been extracted from the MDC text-field styles. We can't access it |
| 90 | + // through a variable because MDC generates this label transform through a mixin. |
| 91 | + transform: translateY(-$outlined-label-floating-position-y) scale(0.75) !important; |
| 92 | + } |
| 93 | + |
| 94 | + // Add vertical spacing to the infix to ensure that outlined form fields have their controls |
| 95 | + // aligned as if there is no label. This is done similarly in MDC and is specified in the |
| 96 | + // Material Design specification. Outline form fields position the control as if there is no |
| 97 | + // label. This is because the label overflows the form-field and doesn't need space at the top. |
| 98 | + @include _mat-form-field-infix-vertical-spacing-outlined($no-label-padding); |
| 99 | + |
| 100 | + // MDC hides labels for filled form fields when the form field height decreases. We match |
| 101 | + // this behavior in our custom density styles. |
| 102 | + @if $hide-filled-floating-label { |
| 103 | + // Update the spacing for filled form fields to account for the hidden floating label. |
| 104 | + @include _mat-form-field-infix-vertical-spacing-filled($no-label-padding, $no-label-padding); |
| 105 | + .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mdc-floating-label { |
| 106 | + display: none; |
| 107 | + } |
| 108 | + } |
| 109 | + @else { |
| 110 | + // By default, filled form fields align their controls differently based on whether there |
| 111 | + // is a label or not. MDC does this too, but we cannot rely on their styles as we support |
| 112 | + // arbitrary form field controls and MDC only applies their spacing to the `<input>` elements. |
| 113 | + @include _mat-form-field-infix-vertical-spacing-filled($with-label-padding, $no-label-padding); |
| 114 | + } |
| 115 | +} |
0 commit comments