diff --git a/src/material/core/typography/_typography-utils.scss b/src/material/core/typography/_typography-utils.scss index 4dcee44fd7eb..9e62a70d76d4 100644 --- a/src/material/core/typography/_typography-utils.scss +++ b/src/material/core/typography/_typography-utils.scss @@ -1,5 +1,6 @@ @use 'sass:list'; @use 'sass:map'; +@use 'sass:math'; @use 'sass:meta'; @use 'sass:string'; @use '../style/private'; @@ -96,3 +97,9 @@ @include font-shorthand($font-size, $font-weight, $line-height, $font-family); letter-spacing: letter-spacing($config, $level); } + +/// Coerce a value to `em` if it is a unitless number, otherwise returns +/// the value provided. +@function private-coerce-unitless-to-em($value) { + @return if(math.is-unitless($value), 1em * $value, $value); +} diff --git a/src/material/form-field/_form-field-fill-theme.scss b/src/material/form-field/_form-field-fill-theme.scss index 24675611df49..0ceec90ae4f8 100644 --- a/src/material/form-field/_form-field-fill-theme.scss +++ b/src/material/form-field/_form-field-fill-theme.scss @@ -72,7 +72,8 @@ $fill-dedupe: 0; // The padding below the infix. $infix-padding-bottom: 0.75em; // The margin applied to the form-field-infix to reserve space for the floating label. - $infix-margin-top: 1em * $line-height * $subscript-font-scale; + $infix-margin-top: + $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height); // The amount we offset the label from the input text in the fill appearance. $fill-appearance-label-offset: -0.5em; diff --git a/src/material/form-field/_form-field-legacy-theme.scss b/src/material/form-field/_form-field-legacy-theme.scss index 014f301c1e02..2cec316fd5e7 100644 --- a/src/material/form-field/_form-field-legacy-theme.scss +++ b/src/material/form-field/_form-field-legacy-theme.scss @@ -85,7 +85,9 @@ $legacy-dedupe: 0; // of the text itself, not the edge of the line; therefore we subtract off the line spacing. $infix-padding: 0.5em - $line-spacing; // The margin applied to the form-field-infix to reserve space for the floating label. - $infix-margin-top: 1em * $line-height * $subscript-font-scale; + // If the line-height is given as a unitless number, coerce it to `em`. + $infix-margin-top: + $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height); // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper. // Mocks show half of the text size, but this margin is applied to an element with the subscript // text font size, so we need to divide by the scale factor to make it half of the original text diff --git a/src/material/form-field/_form-field-outline-theme.scss b/src/material/form-field/_form-field-outline-theme.scss index 513845e4f705..b32d9ddffd12 100644 --- a/src/material/form-field/_form-field-outline-theme.scss +++ b/src/material/form-field/_form-field-outline-theme.scss @@ -93,7 +93,8 @@ $outline-dedupe: 0; // The padding above and below the infix. $infix-padding: 1em; // The margin applied to the form-field-infix to reserve space for the floating label. - $infix-margin-top: 1em * $line-height * $subscript-font-scale; + $infix-margin-top: + $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height); // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper. // Mocks show half of the text size, but this margin is applied to an element with the subscript // text font size, so we need to divide by the scale factor to make it half of the original text diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss index 245cf465d4d9..9f49aaf30a3a 100644 --- a/src/material/form-field/_form-field-theme.scss +++ b/src/material/form-field/_form-field-theme.scss @@ -146,7 +146,9 @@ $dedupe: 0; // The padding on the infix. Mocks show half of the text size. $infix-padding: 0.5em; // The margin applied to the form-field-infix to reserve space for the floating label. - $infix-margin-top: 1em * $line-height * $subscript-font-scale; + // If the line-height is given as a unitless number, coerce it to `em`. + $infix-margin-top: $subscript-font-scale * + typography-utils.private-coerce-unitless-to-em($line-height); // Font size to use for the label and subscript text. $subscript-font-size: $subscript-font-scale * 100%; // Font size to use for the for the prefix and suffix icons. @@ -183,7 +185,7 @@ $dedupe: 0; width: $prefix-suffix-icon-font-scale * 1em; .mat-icon { - height: $line-height * 1em; + height: typography-utils.private-coerce-unitless-to-em($line-height); line-height: $line-height; } } diff --git a/src/material/input/_input-theme.scss b/src/material/input/_input-theme.scss index 7c489c6b4974..f32ab2a888cd 100644 --- a/src/material/input/_input-theme.scss +++ b/src/material/input/_input-theme.scss @@ -74,7 +74,7 @@ // elements seem to have their height set slightly too large on Safari causing the text to // be misaligned w.r.t. the placeholder. Adding this margin corrects it. input.mat-input-element { - margin-top: -$line-spacing * 1em; + margin-top: typography-utils.private-coerce-unitless-to-em(-$line-spacing); } } diff --git a/src/material/select/_select-theme.scss b/src/material/select/_select-theme.scss index 09c69578f7e1..80fa5f54d4e7 100644 --- a/src/material/select/_select-theme.scss +++ b/src/material/select/_select-theme.scss @@ -75,7 +75,7 @@ } .mat-select-trigger { - height: $line-height * 1em; + height: typography-utils.private-coerce-unitless-to-em($line-height); } }