diff --git a/package.json b/package.json index 73e79caf3ab9..0888e95ddbe3 100644 --- a/package.json +++ b/package.json @@ -215,7 +215,7 @@ "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-sourcemaps": "^0.6.3", - "sass": "^1.34.1", + "sass": "^1.38.0", "selenium-webdriver": "^3.6.0", "semver": "^7.3.4", "send": "^0.17.1", diff --git a/src/material-experimental/mdc-card/card.scss b/src/material-experimental/mdc-card/card.scss index c82d69bd6ead..a019d020fdd8 100644 --- a/src/material-experimental/mdc-card/card.scss +++ b/src/material-experimental/mdc-card/card.scss @@ -1,5 +1,5 @@ +@use 'sass:math'; @use '@material/card' as mdc-card; -@use '../../material/core/style/private'; @use '../mdc-helpers/mdc-helpers'; // TODO(jelbourn): move header and title-group styles to their own files. @@ -44,7 +44,7 @@ $mat-card-default-padding: 16px !default; // When a subtitle is inside of a header, we want to move it up slightly to reduce the space with // the title, and add a margin bottom to create space underneath the header. .mat-mdc-card-subtitle { - margin-top: -(private.private-div($mat-card-default-padding, 2)); + margin-top: -(math.div($mat-card-default-padding, 2)); margin-bottom: $mat-card-default-padding; } } diff --git a/src/material-experimental/mdc-form-field/_form-field-density.scss b/src/material-experimental/mdc-form-field/_form-field-density.scss index 6fa708414c1e..6fba9ed1dd50 100644 --- a/src/material-experimental/mdc-form-field/_form-field-density.scss +++ b/src/material-experimental/mdc-form-field/_form-field-density.scss @@ -1,8 +1,8 @@ +@use 'sass:map'; +@use 'sass:math'; @use '@material/density' as mdc-density; @use '@material/textfield' as mdc-textfield; -@use 'sass:map'; @use '../../material/core/theming/theming'; -@use '../../material/core/style/private'; @use 'form-field-sizing'; // Mixin that sets the vertical spacing for the infix container of filled form fields. @@ -55,7 +55,7 @@ // cannot update the spacing to explicit numbers based on the density scale. Instead, we // determine the height reduction and equally subtract it from the default `top` and `bottom` // padding that is provided by the Material Design specification. - $vertical-deduction: private.private-div(mdc-textfield.$height - $height, 2); + $vertical-deduction: math.div(mdc-textfield.$height - $height, 2); // Map that describes the padding for form-fields with label. $with-label-padding: ( top: form-field-sizing.$mat-form-field-with-label-input-padding-top - $vertical-deduction, @@ -78,7 +78,7 @@ // form-field because we do not know what type of form-field control is set up. Hence // we always use a fixed position for the label. This does not have any implications. .mat-mdc-form-field .mat-mdc-text-field-wrapper .mdc-floating-label { - top: private.private-div($height, 2); + top: math.div($height, 2); } // For the outline appearance, we re-create the active floating label transform. This is diff --git a/src/material-experimental/mdc-form-field/_form-field-native-select.scss b/src/material-experimental/mdc-form-field/_form-field-native-select.scss index 0cda173843c2..85af7d50791a 100644 --- a/src/material-experimental/mdc-form-field/_form-field-native-select.scss +++ b/src/material-experimental/mdc-form-field/_form-field-native-select.scss @@ -1,8 +1,8 @@ @use 'sass:map'; +@use 'sass:math'; @use '../mdc-helpers/mdc-helpers'; @use '../../cdk/a11y'; @use '../../material/core/theming/palette'; -@use '../../material/core/style/private'; @use '@material/theme/theme-color' as mdc-theme-color; // Width of the Material Design form-field select arrow. @@ -66,8 +66,8 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt content: ''; width: 0; height: 0; - border-left: private.private-div($mat-form-field-select-arrow-width, 2) solid transparent; - border-right: private.private-div($mat-form-field-select-arrow-width, 2) solid transparent; + border-left: math.div($mat-form-field-select-arrow-width, 2) solid transparent; + border-right: math.div($mat-form-field-select-arrow-width, 2) solid transparent; border-top: $mat-form-field-select-arrow-height solid; position: absolute; right: 0; diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss index 30b01a8562e4..c201f400dd2e 100644 --- a/src/material-experimental/mdc-select/select.scss +++ b/src/material-experimental/mdc-select/select.scss @@ -1,8 +1,8 @@ +@use 'sass:math'; @use '@material/menu-surface' as mdc-menu-surface; @use '@material/list/evolution-mixins' as mdc-list; @use '../../material/core/style/variables'; @use '../../material/core/style/vendor-prefixes'; -@use '../../material/core/style/private'; @use '../../cdk/a11y'; $mat-select-arrow-size: 5px !default; @@ -111,7 +111,7 @@ $scale: 0.75 !default; // Delay the transition until the label has animated about a third of the way through, in // order to prevent the placeholder from overlapping for a split second. transition: color variables.$swift-ease-out-duration - private.private-div(variables.$swift-ease-out-duration, 3) + math.div(variables.$swift-ease-out-duration, 3) variables.$swift-ease-out-timing-function; ._mat-animation-noopable & { @@ -143,7 +143,7 @@ $scale: 0.75 !default; } .mdc-floating-label--float-above { - $arrow-scale: private.private-div($mat-select-placeholder-arrow-space, $scale); + $arrow-scale: math.div($mat-select-placeholder-arrow-space, $scale); max-width: calc(100% / #{$scale} - #{$arrow-scale}); } } diff --git a/src/material-experimental/mdc-slide-toggle/slide-toggle.scss b/src/material-experimental/mdc-slide-toggle/slide-toggle.scss index 0ae0c919ad3a..b2340c42604b 100644 --- a/src/material-experimental/mdc-slide-toggle/slide-toggle.scss +++ b/src/material-experimental/mdc-slide-toggle/slide-toggle.scss @@ -1,11 +1,11 @@ @use 'sass:map'; +@use 'sass:math'; @use '@material/switch/switch' as mdc-switch; @use '@material/switch/switch-theme' as mdc-switch-theme; @use '@material/form-field' as mdc-form-field; @use '@material/ripple' as mdc-ripple; @use '../mdc-helpers/mdc-helpers'; @use '../../material/core/style/layout-common'; -@use '../../material/core/style/private'; @use '../../cdk/a11y'; @include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query); @@ -66,6 +66,6 @@ // Usually 1px would be enough, but MDC reduces the opacity on the // element so we need to make this a bit more prominent. outline: solid 2px; - outline-offset: private.private-div(map.get(mdc-switch-theme.$light-theme, track-height), 2); + outline-offset: math.div(map.get(mdc-switch-theme.$light-theme, track-height), 2); } } diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss index 0e29f537f206..c4d2f099a2ac 100644 --- a/src/material/badge/_badge-theme.scss +++ b/src/material/badge/_badge-theme.scss @@ -4,10 +4,10 @@ @use 'sass:color'; @use 'sass:map'; @use 'sass:meta'; +@use 'sass:math'; @use '../core/theming/theming'; @use '../core/typography/typography'; @use '../core/typography/typography-utils'; -@use '../core/style/private'; @use '../../cdk/a11y'; $font-size: 12px; @@ -29,13 +29,13 @@ $_badge-structure-emitted: false !default; &.mat-badge-above { .mat-badge-content { - top: private.private-div(-$size, 2); + top: math.div(-$size, 2); } } &.mat-badge-below { .mat-badge-content { - bottom: private.private-div(-$size, 2); + bottom: math.div(-$size, 2); } } @@ -68,27 +68,27 @@ $_badge-structure-emitted: false !default; &.mat-badge-overlap { &.mat-badge-before { .mat-badge-content { - left: private.private-div(-$size, 2); + left: math.div(-$size, 2); } } [dir='rtl'] &.mat-badge-before { .mat-badge-content { left: auto; - right: private.private-div(-$size, 2); + right: math.div(-$size, 2); } } &.mat-badge-after { .mat-badge-content { - right: private.private-div(-$size, 2); + right: math.div(-$size, 2); } } [dir='rtl'] &.mat-badge-after { .mat-badge-content { right: auto; - left: private.private-div(-$size, 2); + left: math.div(-$size, 2); } } } diff --git a/src/material/card/card.scss b/src/material/card/card.scss index 9220a1fcc137..e208e4a6d098 100644 --- a/src/material/card/card.scss +++ b/src/material/card/card.scss @@ -1,3 +1,4 @@ +@use 'sass:math'; @use '../core/style/variables'; @use '../core/style/elevation'; @use '../core/style/private'; @@ -59,8 +60,8 @@ $header-size: 40px !default; .mat-card-actions { @extend %mat-card-section-base; - margin-left: private.private-div(-$padding, 2); - margin-right: private.private-div(-$padding, 2); + margin-left: math.div(-$padding, 2); + margin-right: math.div(-$padding, 2); padding: 8px 0; } diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss index d09c88bd7cab..d5fbe0681db7 100644 --- a/src/material/checkbox/checkbox.scss +++ b/src/material/checkbox/checkbox.scss @@ -18,7 +18,7 @@ $_ripple-radius: 20px; $_item-spacing: variables.$toggle-padding; // The width of the line used to draw the checkmark / mixedmark. -$_mark-stroke-size: private.private-div(2, 15) * checkbox-common.$size !default; +$_mark-stroke-size: math.div(2, 15) * checkbox-common.$size !default; // Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}. diff --git a/src/material/core/option/option.scss b/src/material/core/option/option.scss index 9e3ac2aa67a6..1ba9c5586c34 100644 --- a/src/material/core/option/option.scss +++ b/src/material/core/option/option.scss @@ -1,7 +1,7 @@ +@use 'sass:math'; @use '../style/menu-common'; @use '../style/vendor-prefixes'; @use '../style/layout-common'; -@use '../style/private'; @use '../../../cdk/a11y'; .mat-option { @@ -78,7 +78,7 @@ } .mat-option-pseudo-checkbox { - $margin: private.private-div(menu-common.$side-padding, 2); + $margin: math.div(menu-common.$side-padding, 2); margin-right: $margin; [dir='rtl'] & { diff --git a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss index c505dace5425..b0382bb9b143 100644 --- a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss +++ b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss @@ -1,3 +1,4 @@ +@use 'sass:math'; @use '../../style/checkbox-common'; @use '../../style/private'; @use '../../style/variables'; @@ -50,20 +51,20 @@ $_checkmark-size: checkbox-common.$size - (2 * $_padding); } .mat-pseudo-checkbox-indeterminate::after { - top: private.private-div(checkbox-common.$size - checkbox-common.$border-width, 2) - + top: math.div(checkbox-common.$size - checkbox-common.$border-width, 2) - checkbox-common.$border-width; - left: private.private-div(checkbox-common.$border-width, 2); + left: math.div(checkbox-common.$border-width, 2); width: checkbox-common.$size - 6px; opacity: 1; border-radius: 2px; } .mat-pseudo-checkbox-checked::after { - top: private.private-div(checkbox-common.$size, 2) - private.private-div($_checkmark-size, 4) - - private.private-div(checkbox-common.$size, 10) - checkbox-common.$border-width; + top: math.div(checkbox-common.$size, 2) - math.div($_checkmark-size, 4) - + math.div(checkbox-common.$size, 10) - checkbox-common.$border-width; left: $_padding - checkbox-common.$border-width * 1.5; width: $_checkmark-size; - height: private.private-div($_checkmark-size - checkbox-common.$border-width, 2); + height: math.div($_checkmark-size - checkbox-common.$border-width, 2); border-left: checkbox-common.$border-width solid currentColor; transform: rotate(-45deg); opacity: 1; diff --git a/src/material/core/style/_private.scss b/src/material/core/style/_private.scss index e08f6f2ca8e2..2eecc6c575a3 100644 --- a/src/material/core/style/_private.scss +++ b/src/material/core/style/_private.scss @@ -1,7 +1,4 @@ @use 'sass:map'; -@use 'sass:math'; -@use 'sass:meta'; -@use 'sass:list'; @use './elevation'; @mixin private-theme-elevation($zValue, $config, $opacity: elevation.$opacity) { @@ -42,27 +39,3 @@ @content; } } - -// Private polyfill for the `math.div` function from Sass to be used until we can update the -// minimum required Sass version to 1.34.0 or above. -// TODO(crisbeto): replace with `math.div` eventually. -@function private-div($a, $b) { - @if (meta.function-exists('div', 'math')) { - @return math.div($a, $b); - } - @else { - @return $a / $b; - } -} - -// Private polyfill for the `list.slash` function from Sass to be used until we can update the -// minimum required Sass version to 1.34.0 or above. -// TODO(crisbeto): replace with `list.slash` eventually. -@function private-slash($a, $b) { - @if (meta.function-exists('slash', 'list')) { - @return list.slash($a, $b); - } - @else { - @return #{$a}#{' / '}#{$b}; - } -} diff --git a/src/material/core/typography/_typography-utils.scss b/src/material/core/typography/_typography-utils.scss index 9e62a70d76d4..abca4051092c 100644 --- a/src/material/core/typography/_typography-utils.scss +++ b/src/material/core/typography/_typography-utils.scss @@ -3,7 +3,6 @@ @use 'sass:math'; @use 'sass:meta'; @use 'sass:string'; -@use '../style/private'; // Utility for fetching a nested value from a typography config. @@ -78,10 +77,8 @@ font-family: $font-family; } @else { - // Otherwise use the shorthand `font`, because it's the least amount of bytes. Note - // that we need to use `list.slash` for `font-size/line-height` in order to prevent - // Sass from dividing the two values. - font: $font-weight private.private-slash($font-size, $line-height) $font-family; + // Otherwise use the shorthand `font`, because it's the least amount of bytes. + font: $font-weight list.slash($font-size, $line-height) $font-family; } } diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss index f69887ff7ad8..fdc02cecd319 100644 --- a/src/material/datepicker/calendar-body.scss +++ b/src/material/datepicker/calendar-body.scss @@ -1,4 +1,4 @@ -@use '../core/style/private'; +@use 'sass:math'; @use '../../cdk/a11y'; $calendar-body-label-padding-start: 5% !default; @@ -6,7 +6,7 @@ $calendar-body-label-padding-start: 5% !default; // the same amount of padding regardless of the number of columns. We align the header label with // the one third mark of the first cell, this was chosen somewhat arbitrarily to make it look // roughly like the mock. Half way is too far since the cell text is center aligned. -$calendar-body-label-side-padding: private.private-div(33%, 7) !default; +$calendar-body-label-side-padding: math.div(33%, 7) !default; $calendar-body-cell-min-size: 32px !default; $calendar-body-cell-content-margin: 5% !default; $calendar-body-cell-content-border-width: 1px !default; diff --git a/src/material/datepicker/date-range-input.scss b/src/material/datepicker/date-range-input.scss index bce7fbbfe418..7db147eb6539 100644 --- a/src/material/datepicker/date-range-input.scss +++ b/src/material/datepicker/date-range-input.scss @@ -1,6 +1,6 @@ +@use 'sass:math'; @use '../core/style/variables'; @use '../core/style/vendor-prefixes'; -@use '../core/style/private'; @use '../../cdk/a11y'; $date-range-input-separator-spacing: 4px; @@ -8,7 +8,7 @@ $date-range-input-part-max-width: calc(50% - #{$date-range-input-separator-spaci @mixin _placeholder-transition($property) { transition: #{$property} variables.$swift-ease-out-duration - private.private-div(variables.$swift-ease-out-duration, 3) + math.div(variables.$swift-ease-out-duration, 3) variables.$swift-ease-out-timing-function; } diff --git a/src/material/form-field/_form-field-fill-theme.scss b/src/material/form-field/_form-field-fill-theme.scss index 0ceec90ae4f8..7d619573e04b 100644 --- a/src/material/form-field/_form-field-fill-theme.scss +++ b/src/material/form-field/_form-field-fill-theme.scss @@ -1,8 +1,8 @@ @use 'sass:map'; +@use 'sass:math'; @use '../core/theming/theming'; @use '../core/typography/typography'; @use '../core/typography/typography-utils'; -@use '../core/style/private'; // Theme styles that only apply to the fill appearance of the form-field. @@ -55,7 +55,7 @@ $fill-dedupe: 0; @mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) { transform: translateY(-$infix-margin-top - $infix-padding + $fill-dedupe) scale($font-scale); - width: private.private-div(100%, $font-scale) + $fill-dedupe; + width: math.div(100%, $font-scale) + $fill-dedupe; $fill-dedupe: $fill-dedupe + 0.00001 !global; } diff --git a/src/material/form-field/_form-field-legacy-theme.scss b/src/material/form-field/_form-field-legacy-theme.scss index 2cec316fd5e7..42e9a6c2e760 100644 --- a/src/material/form-field/_form-field-legacy-theme.scss +++ b/src/material/form-field/_form-field-legacy-theme.scss @@ -1,6 +1,6 @@ @use 'sass:map'; +@use 'sass:math'; @use '../core/theming/theming'; -@use '../core/style/private'; @use '../core/style/form-common'; @use '../core/typography/typography'; @use '../core/typography/typography-utils'; @@ -55,7 +55,7 @@ $legacy-dedupe: 0; -ms-transform: translateY(-$infix-margin-top - $infix-padding + $legacy-dedupe) scale($font-scale); - width: private.private-div(100%, $font-scale) + $legacy-dedupe; + width: math.div(100%, $font-scale) + $legacy-dedupe; $legacy-dedupe: $legacy-dedupe + 0.00001 !global; } @@ -80,7 +80,7 @@ $legacy-dedupe: 0; $subscript-font-scale: 0.75; // The amount of space between the top of the line and the top of the actual text // (as a fraction of the font-size). - $line-spacing: private.private-div($line-height - 1, 2); + $line-spacing: math.div($line-height - 1, 2); // The padding on the infix. Mocks show half of the text size, but seem to measure from the edge // of the text itself, not the edge of the line; therefore we subtract off the line spacing. $infix-padding: 0.5em - $line-spacing; @@ -93,7 +93,7 @@ $legacy-dedupe: 0; // text font size, so we need to divide by the scale factor to make it half of the original text // size. We again need to subtract off the line spacing since the mocks measure to the edge of the // text, not the edge of the line. - $subscript-margin-top: private.private-div(0.5em, $subscript-font-scale) - ($line-spacing * 2); + $subscript-margin-top: math.div(0.5em, $subscript-font-scale) - ($line-spacing * 2); // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's // absolutely positioned. This is a combination of the subscript's margin and line-height, but we // need to multiply by the subscript font scale factor since the wrapper has a larger font size. @@ -146,7 +146,7 @@ $legacy-dedupe: 0; // We want the subscript to start at the end of the content box, not the padding box, // so we move it up by the padding amount (adjusted for the smaller font size); - top: calc(100% - #{private.private-div($wrapper-padding-bottom, $subscript-font-scale)}); + top: calc(100% - #{math.div($wrapper-padding-bottom, $subscript-font-scale)}); } } diff --git a/src/material/form-field/_form-field-outline-theme.scss b/src/material/form-field/_form-field-outline-theme.scss index b32d9ddffd12..2a53929b0145 100644 --- a/src/material/form-field/_form-field-outline-theme.scss +++ b/src/material/form-field/_form-field-outline-theme.scss @@ -1,6 +1,6 @@ @use 'sass:map'; +@use 'sass:math'; @use '../core/theming/theming'; -@use '../core/style/private'; @use '../core/typography/typography'; @use '../core/typography/typography-utils'; @@ -78,7 +78,7 @@ $outline-dedupe: 0; @mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) { transform: translateY(-$infix-margin-top - $infix-padding + $outline-dedupe) scale($font-scale); - width: private.private-div(100%, $font-scale) + $outline-dedupe; + width: math.div(100%, $font-scale) + $outline-dedupe; $outline-dedupe: $outline-dedupe + 0.00001 !global; } @@ -99,7 +99,7 @@ $outline-dedupe: 0; // 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 // size. - $subscript-margin-top: private.private-div(0.5em, $subscript-font-scale); + $subscript-margin-top: math.div(0.5em, $subscript-font-scale); // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's // absolutely positioned. This is a combination of the subscript's margin and line-height, but we // need to multiply by the subscript font scale factor since the wrapper has a larger font size. diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss index 9f49aaf30a3a..772e7168ff54 100644 --- a/src/material/form-field/_form-field-theme.scss +++ b/src/material/form-field/_form-field-theme.scss @@ -1,8 +1,8 @@ @use 'sass:map'; +@use 'sass:math'; @use '../core/theming/theming'; @use '../core/typography/typography'; @use '../core/typography/typography-utils'; -@use '../core/style/private'; @use './form-field-fill-theme.scss'; @use './form-field-legacy-theme.scss'; @@ -127,7 +127,7 @@ $dedupe: 0; @mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) { transform: translateY(-$infix-margin-top - $infix-padding + $dedupe) scale($font-scale); - width: private.private-div(100%, $font-scale) + $dedupe; + width: math.div(100%, $font-scale) + $dedupe; $dedupe: $dedupe + 0.00001 !global; } @@ -157,7 +157,7 @@ $dedupe: 0; // 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 // size. - $subscript-margin-top: private.private-div(0.5em, $subscript-font-scale); + $subscript-margin-top: math.div(0.5em, $subscript-font-scale); // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's // absolutely positioned. This is a combination of the subscript's margin and line-height, but we // need to multiply by the subscript font scale factor since the wrapper has a larger font size. @@ -234,7 +234,7 @@ $dedupe: 0; // We want the subscript to start at the end of the content box, not the padding box, // so we move it up by the padding amount (adjusted for the smaller font size); - top: calc(100% - #{private.private-div($wrapper-padding-bottom, $subscript-font-scale)}); + top: calc(100% - #{math.div($wrapper-padding-bottom, $subscript-font-scale)}); } @include form-field-legacy-theme.legacy-typography($config); diff --git a/src/material/form-field/form-field-fill.scss b/src/material/form-field/form-field-fill.scss index 2468d5174114..16adea99df38 100644 --- a/src/material/form-field/form-field-fill.scss +++ b/src/material/form-field/form-field-fill.scss @@ -1,5 +1,5 @@ +@use 'sass:math'; @use '../core/style/variables'; -@use '../core/style/private'; @use '../../cdk/a11y'; // Styles that only apply to the fill appearance of the form-field. @@ -18,8 +18,7 @@ $fill-line-spacing: 0.75em !default; // The scale of the subscript and floating label text w.r.t the value text. $fill-subscript-font-scale: 0.75 !default; // The horizontal padding between the edge of the subscript box and the start of the subscript text. -$fill-subscript-padding: - private.private-div($fill-side-padding, $fill-subscript-font-scale); +$fill-subscript-padding: math.div($fill-side-padding, $fill-subscript-font-scale); .mat-form-field-appearance-fill { diff --git a/src/material/form-field/form-field-input.scss b/src/material/form-field/form-field-input.scss index 827f4e59caf8..2646d3463e00 100644 --- a/src/material/form-field/form-field-input.scss +++ b/src/material/form-field/form-field-input.scss @@ -1,6 +1,6 @@ +@use 'sass:math'; @use '../core/style/variables'; @use '../core/style/vendor-prefixes'; -@use '../core/style/private'; @use '../../cdk/a11y'; // The Input element proper. @@ -109,8 +109,7 @@ // Delay the transition until the label has animated about a third of the way through, in // order to prevent the placeholder from overlapping for a split second. transition: color variables.$swift-ease-out-duration - private.private-div(variables.$swift-ease-out-duration, 3) - variables.$swift-ease-out-timing-function; + math.div(variables.$swift-ease-out-duration, 3) variables.$swift-ease-out-timing-function; } .mat-form-field-hide-placeholder & { @@ -219,7 +218,7 @@ select.mat-input-element { position: absolute; top: 50%; right: 0; - margin-top: private.private-div(-$arrow-size, 2); + margin-top: math.div(-$arrow-size, 2); // Make the arrow non-clickable so the user can click on the form control under it. pointer-events: none; diff --git a/src/material/form-field/form-field-outline.scss b/src/material/form-field/form-field-outline.scss index 1320a8908654..2d0d42a99f26 100644 --- a/src/material/form-field/form-field-outline.scss +++ b/src/material/form-field/form-field-outline.scss @@ -1,5 +1,5 @@ +@use 'sass:math'; @use '../core/style/variables'; -@use '../core/style/private'; @use '../../cdk/a11y'; // Styles that only apply to the outline appearance of the form-field. @@ -17,8 +17,7 @@ $outline-width: 1px; // The width of the thick outline (used for focus, hover, and error state). $outline-thick-width: 2px; // The horizontal padding between the edge of the subscript box and the start of the subscript text. -$outline-subscript-padding: - private.private-div($outline-side-padding, $outline-subscript-font-scale); +$outline-subscript-padding: math.div($outline-side-padding, $outline-subscript-font-scale); .mat-form-field-appearance-outline { diff --git a/src/material/input/_input-theme.scss b/src/material/input/_input-theme.scss index f32ab2a888cd..5ea1e098a3ca 100644 --- a/src/material/input/_input-theme.scss +++ b/src/material/input/_input-theme.scss @@ -1,7 +1,7 @@ @use 'sass:map'; +@use 'sass:math'; @use '../core/theming/palette'; @use '../core/theming/theming'; -@use '../core/style/private'; @use '../core/style/form-common'; @use '../core/typography/typography'; @use '../core/typography/typography-utils'; @@ -69,7 +69,7 @@ // The amount of space between the top of the line and the top of the actual text // (as a fraction of the font-size). - $line-spacing: private.private-div($line-height - 1, 2); + $line-spacing: math.div($line-height - 1, 2); // 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. diff --git a/src/material/radio/radio.scss b/src/material/radio/radio.scss index 20485109262c..844ccd72133f 100644 --- a/src/material/radio/radio.scss +++ b/src/material/radio/radio.scss @@ -1,7 +1,7 @@ +@use 'sass:math'; @use '../core/style/variables'; @use '../core/ripple/ripple'; @use '../core/style/vendor-prefixes'; -@use '../core/style/private'; @use '../../cdk/a11y'; @@ -98,7 +98,7 @@ $ripple-radius: 20px; @include a11y.high-contrast(active, off) { // Since we use a background color to render the circle, it won't be // displayed in high contrast mode. Use a border as a fallback. - border: solid private.private-div($size, 2); + border: solid math.div($size, 2); } } diff --git a/src/material/select/select.scss b/src/material/select/select.scss index ea69d84327a1..82bd3a49f23c 100644 --- a/src/material/select/select.scss +++ b/src/material/select/select.scss @@ -1,8 +1,8 @@ +@use 'sass:math'; @use '../core/style/menu-common'; @use '../core/style/list-common'; @use '../core/style/variables'; @use '../core/style/vendor-prefixes'; -@use '../core/style/private'; @use '../../cdk/a11y'; $arrow-size: 5px !default; @@ -129,7 +129,7 @@ $placeholder-arrow-space: 2 * ($arrow-size + $arrow-margin); // Delay the transition until the label has animated about a third of the way through, in // order to prevent the placeholder from overlapping for a split second. transition: color variables.$swift-ease-out-duration - private.private-div(variables.$swift-ease-out-duration, 3) + math.div(variables.$swift-ease-out-duration, 3) variables.$swift-ease-out-timing-function; ._mat-animation-noopable & { diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss index a69c81889f43..5a68bf0df822 100644 --- a/src/material/slide-toggle/slide-toggle.scss +++ b/src/material/slide-toggle/slide-toggle.scss @@ -1,8 +1,8 @@ +@use 'sass:math'; @use '../core/style/vendor-prefixes'; @use '../core/style/variables'; @use '../core/ripple/ripple'; @use '../core/style/list-common'; -@use '../core/style/private'; @use '../../cdk/a11y'; $thumb-size: 20px !default; @@ -91,7 +91,7 @@ $bar-track-width: $bar-width - $thumb-size; // The container includes the visual thumb and the ripple container element. .mat-slide-toggle-thumb-container { - $thumb-bar-vertical-padding: private.private-div($thumb-size - $bar-height, 2); + $thumb-bar-vertical-padding: math.div($thumb-size - $bar-height, 2); position: absolute; z-index: 1; @@ -143,7 +143,7 @@ $bar-track-width: $bar-width - $thumb-size; .mat-slide-toggle-input { // Move the input to the bottom and in the middle of the thumb. // Visual improvement to properly show browser popups when being required. - $horizontal-offset: private.private-div($thumb-size, 2); + $horizontal-offset: math.div($thumb-size, 2); bottom: 0; left: $horizontal-offset; @@ -231,6 +231,6 @@ $bar-track-width: $bar-width - $thumb-size; // because otherwise the opaque thumb element will hide the outline. .mat-slide-toggle.cdk-keyboard-focused .mat-slide-toggle-bar { outline: 2px dotted; - outline-offset: private.private-div($height - $bar-height, 2); + outline-offset: math.div($height - $bar-height, 2); } } diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss index f86bcde25a60..b7882b82aba3 100644 --- a/src/material/slider/slider.scss +++ b/src/material/slider/slider.scss @@ -1,6 +1,6 @@ +@use 'sass:math'; @use '../core/style/variables'; @use '../core/style/vendor-prefixes'; -@use '../core/style/private'; @use '../../cdk/a11y'; @@ -124,8 +124,8 @@ $focus-ring-size: 30px !default; @extend %_mat-slider-cursor; position: absolute; - right: private.private-div(-$thumb-size, 2); - bottom: private.private-div(-$thumb-size, 2); + right: math.div(-$thumb-size, 2); + bottom: math.div(-$thumb-size, 2); box-sizing: border-box; width: $thumb-size; height: $thumb-size; @@ -281,7 +281,7 @@ $focus-ring-size: 30px !default; .mat-slider-wrapper { height: $track-thickness; - top: private.private-div($thickness - $track-thickness, 2); + top: math.div($thickness - $track-thickness, 2); left: $padding; right: $padding; } @@ -317,7 +317,7 @@ $focus-ring-size: 30px !default; @include a11y.high-contrast(active, off) { height: 0; outline: solid $track-thickness; - top: private.private-div($track-thickness, 2); + top: math.div($track-thickness, 2); } } @@ -333,14 +333,14 @@ $focus-ring-size: 30px !default; } .mat-slider-focus-ring { - top: private.private-div(-$focus-ring-size, 2); - right: private.private-div(-$focus-ring-size, 2); + top: math.div(-$focus-ring-size, 2); + right: math.div(-$focus-ring-size, 2); } .mat-slider-thumb-label { - right: private.private-div(-$thumb-label-size, 2); + right: math.div(-$thumb-label-size, 2); top: -($thumb-label-size + $thumb-arrow-gap); - transform: translateY(private.private-div($thumb-label-size, 2) + $thumb-arrow-gap) + transform: translateY(math.div($thumb-label-size, 2) + $thumb-arrow-gap) scale(0.01) rotate(45deg); } @@ -373,7 +373,7 @@ $focus-ring-size: 30px !default; width: $track-thickness; top: $padding; bottom: $padding; - left: private.private-div($thickness - $track-thickness, 2); + left: math.div($thickness - $track-thickness, 2); } .mat-slider-wrapper::after { @@ -407,13 +407,13 @@ $focus-ring-size: 30px !default; @include a11y.high-contrast(active, off) { width: 0; outline: solid $track-thickness; - left: private.private-div($track-thickness, 2); + left: math.div($track-thickness, 2); } } .mat-slider-focus-ring { - bottom: private.private-div(-$focus-ring-size, 2); - left: private.private-div(-$focus-ring-size, 2); + bottom: math.div(-$focus-ring-size, 2); + left: math.div(-$focus-ring-size, 2); } .mat-slider-ticks { @@ -432,9 +432,9 @@ $focus-ring-size: 30px !default; } .mat-slider-thumb-label { - bottom: private.private-div(-$thumb-label-size, 2); + bottom: math.div(-$thumb-label-size, 2); left: -($thumb-label-size + $thumb-arrow-gap); - transform: translateX(private.private-div($thumb-label-size, 2) + $thumb-arrow-gap) + transform: translateX(math.div($thumb-label-size, 2) + $thumb-arrow-gap) scale(0.01) rotate(-45deg); } diff --git a/src/material/snack-bar/BUILD.bazel b/src/material/snack-bar/BUILD.bazel index 1d77620728b1..9ac99696bfde 100644 --- a/src/material/snack-bar/BUILD.bazel +++ b/src/material/snack-bar/BUILD.bazel @@ -51,7 +51,6 @@ sass_binary( sass_binary( name = "simple_snack_bar_scss", src = "simple-snack-bar.scss", - deps = ["//src/material/core:core_scss_lib"], ) ng_test_library( diff --git a/src/material/snack-bar/simple-snack-bar.scss b/src/material/snack-bar/simple-snack-bar.scss index 7012a45bfd09..50188497237a 100644 --- a/src/material/snack-bar/simple-snack-bar.scss +++ b/src/material/snack-bar/simple-snack-bar.scss @@ -1,12 +1,11 @@ -@use '../core/style/private'; +@use 'sass:math'; $button-horizontal-margin: 8px !default; $button-height: 36px !default; $line-height: 20px !default; // Button vertical margin is used to ensure that a button height of 36px, when the containing // space falls below 36px. -$button-vertical-margin: - -(private.private-div($button-height - $line-height, 2)); +$button-vertical-margin: -(math.div($button-height - $line-height, 2)); .mat-simple-snackbar { display: flex; diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss index 93ffef821fc9..2fef391a9684 100644 --- a/src/material/stepper/_stepper-theme.scss +++ b/src/material/stepper/_stepper-theme.scss @@ -1,9 +1,9 @@ @use 'sass:map'; +@use 'sass:math'; @use '../core/theming/theming'; @use '../core/typography/typography'; @use '../core/typography/typography-utils'; @use '../core/density/private/compatibility'; -@use '../core/style/private'; @use './stepper-variables'; @mixin color($config-or-theme) { @@ -140,7 +140,7 @@ $density-scale: theming.get-density-config($config-or-theme); $height: compatibility.private-density-prop-value(stepper-variables.$density-config, $density-scale, height); - $vertical-padding: private.private-div($height - stepper-variables.$label-header-height, 2); + $vertical-padding: math.div($height - stepper-variables.$label-header-height, 2); @include compatibility.private-density-legacy-compatibility() { .mat-horizontal-stepper-header { @@ -162,13 +162,13 @@ // Ensures that the horizontal lines for the step header are centered vertically. .mat-stepper-label-position-bottom .mat-horizontal-stepper-header { &::after, &::before { - top: $vertical-padding + private.private-div(stepper-variables.$label-header-height, 2); + top: $vertical-padding + math.div(stepper-variables.$label-header-height, 2); } } // Ensures that the horizontal line for the step content is aligned centered vertically. .mat-stepper-label-position-bottom .mat-stepper-horizontal-line { - top: $vertical-padding + private.private-div(stepper-variables.$label-header-height, 2); + top: $vertical-padding + math.div(stepper-variables.$label-header-height, 2); } } } diff --git a/src/material/stepper/stepper.scss b/src/material/stepper/stepper.scss index d27d329df52f..6184cf108771 100644 --- a/src/material/stepper/stepper.scss +++ b/src/material/stepper/stepper.scss @@ -1,5 +1,5 @@ +@use 'sass:math'; @use '../core/style/variables'; -@use '../core/style/private'; @use './stepper-variables'; .mat-stepper-vertical, @@ -33,7 +33,7 @@ } %mat-header-horizontal-line-label-position-bottom { - $half-side-gap: private.private-div(stepper-variables.$side-gap, 2); + $half-side-gap: math.div(stepper-variables.$side-gap, 2); border-top-width: stepper-variables.$line-width; border-top-style: solid; content: ''; diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss index c94db3eca0f9..f4abc670b893 100644 --- a/src/material/tooltip/_tooltip-theme.scss +++ b/src/material/tooltip/_tooltip-theme.scss @@ -1,17 +1,16 @@ @use 'sass:map'; +@use 'sass:math'; @use '../core/theming/theming'; @use '../core/typography/typography'; @use '../core/typography/typography-utils'; -@use '../core/style/private'; $target-height: 22px; $font-size: 10px; -$vertical-padding: private.private-div($target-height - $font-size, 2); +$vertical-padding: math.div($target-height - $font-size, 2); $handset-target-height: 30px; $handset-font-size: 14px; -$handset-vertical-padding: - private.private-div($handset-target-height - $handset-font-size, 2); +$handset-vertical-padding: math.div($handset-target-height - $handset-font-size, 2); @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); diff --git a/yarn.lock b/yarn.lock index c6827b162262..1eaf19ccf2aa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12027,10 +12027,10 @@ sass-lookup@^3.0.0: dependencies: commander "^2.16.0" -sass@^1.26.3, sass@^1.34.1: - version "1.37.0" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.37.0.tgz#f1b03a9d072ee9053a29d125c8130c78e92827c2" - integrity sha512-B+Tu6cSAG8ffs/cqsZl/bgSH2pCmavDaPTYAoW8QA1qNHh/RqndNfVKuABKYkLjUQ5aq/BnCENVpE80cqdSM1w== +sass@^1.26.3, sass@^1.38.0: + version "1.38.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.38.0.tgz#2f3e60a1efdcdc910586fa79dc89d3399a145b4f" + integrity sha512-WBccZeMigAGKoI+NgD7Adh0ab1HUq+6BmyBUEaGxtErbUtWUevEbdgo5EZiJQofLUGcKtlNaO2IdN73AHEua5g== dependencies: chokidar ">=3.0.0 <4.0.0"