diff --git a/guides/elevation.md b/guides/elevation.md index 6e0992886feb..b9578de6cb63 100644 --- a/guides/elevation.md +++ b/guides/elevation.md @@ -23,7 +23,7 @@ achieved by switching elevation classes: ## Mixins -Elevations can also be added in CSS via the `mat-elevation` mixin, which takes a number 0-24 +Elevations can also be added in CSS via the `elevation` mixin, which takes a number 0-24 indicating the elevation of the element as well as optional arguments for the elevation shadow's color tone and opacity. @@ -31,34 +31,34 @@ Since an elevation shadow consists of multiple shadow components of varying opac `$opacity` argument of the mixin is considered a factor by which to scale these initial values rather than an absolute value. -In order to use the mixin, you must import `~@angular/material/theming`: +In order to use the mixin, you must import `~@angular/material`: ```scss -@import '~@angular/material/theming'; +@use '~@angular/material' as mat; .my-class-with-default-shadow { // Adds a shadow for elevation level 2 with default color and full opacity: - @include mat-elevation(2); + @include mat.elevation(2); } .my-class-with-custom-shadow { // Adds a shadow for elevation level 2 with color #e91e63 and 80% of the default opacity: - @include mat-elevation(2, #e91e63, 0.8); + @include mat.elevation(2, #e91e63, 0.8); } ``` -For convenience, you can use the `mat-elevation-transition` mixin to add a transition when the +For convenience, you can use the `elevation-transition` mixin to add a transition when the elevation changes: ```scss -@import '~@angular/material/theming'; +@use '~@angular/material' as mat; .my-class { - @include mat-elevation-transition; - @include mat-elevation(2); + @include mat.elevation-transition; + @include mat.elevation(2); &:active { - @include mat-elevation(8); + @include mat.elevation(8); } } ``` diff --git a/src/material/_index.scss b/src/material/_index.scss index 735f13398ec4..b605e38c9d48 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -16,7 +16,7 @@ @forward './core/core' show core; @forward './core/ripple/ripple' show ripple; @forward './core/focus-indicators/focus-indicators' show strong-focus-indicators; -@forward './core/style/elevation' show elevation, overridable-elevation; +@forward './core/style/elevation' show elevation, overridable-elevation, elevation-transition; // Theme bundles @forward './core/theming/all-theme' show all-component-themes; diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss index 35a276e60f5e..c1f2eb7f416d 100644 --- a/src/material/button/_button-base.scss +++ b/src/material/button/_button-base.scss @@ -83,7 +83,7 @@ $mini-fab-padding: 8px !default; // Animation. transition: background variables.$swift-ease-out-duration - variables.$swift-ease-out-timing-function, elevation.transition-property-value(); + variables.$swift-ease-out-timing-function, elevation.private-transition-property-value(); } // Applies styles to fab and mini-fab button types only diff --git a/src/material/card/card.scss b/src/material/card/card.scss index 150b6e47c2f3..5369443f0f87 100644 --- a/src/material/card/card.scss +++ b/src/material/card/card.scss @@ -9,7 +9,7 @@ $border-radius: 4px !default; $header-size: 40px !default; .mat-card { - @include elevation.transition; + @include elevation.elevation-transition; @include private.private-animation-noop(); display: block; position: relative; diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss index b23461002921..754b0b9522a6 100644 --- a/src/material/checkbox/checkbox.scss +++ b/src/material/checkbox/checkbox.scss @@ -185,7 +185,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default; // Animation transition: background variables.$swift-ease-out-duration - variables.$swift-ease-out-timing-function, elevation.transition-property-value(); + variables.$swift-ease-out-timing-function, elevation.private-transition-property-value(); cursor: pointer; -webkit-tap-highlight-color: transparent; diff --git a/src/material/chips/chips.scss b/src/material/chips/chips.scss index 43c735d9d437..16407377a568 100644 --- a/src/material/chips/chips.scss +++ b/src/material/chips/chips.scss @@ -40,7 +40,7 @@ $chip-remove-size: 18px; } .mat-standard-chip { - @include elevation.transition; + @include elevation.elevation-transition; @include private.private-animation-noop; display: inline-flex; padding: $chip-vertical-padding $chip-horizontal-padding; diff --git a/src/material/core/style/_elevation.import.scss b/src/material/core/style/_elevation.import.scss index 4e565c1b78d2..63d3fc138176 100644 --- a/src/material/core/style/_elevation.import.scss +++ b/src/material/core/style/_elevation.import.scss @@ -7,11 +7,10 @@ $mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-li $mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer, $mat-z-index-fab; @forward 'elevation' hide $color, $opacity, $prefix, $transition-duration, -$transition-timing-function, elevation, overridable-elevation, transition, -transition-property-value; +$transition-timing-function, elevation, overridable-elevation, elevation-transition, +private-transition-property-value; @forward 'elevation' as mat-* hide $mat-color, $mat-opacity, $mat-prefix, $mat-transition-duration, -$mat-transition-timing-function, mat-get-ambient-map, mat-get-penumbra-map, mat-get-umbra-map, -mat-transition, mat-transition-property-value; +$mat-transition-timing-function, mat-get-ambient-map, mat-get-penumbra-map, mat-get-umbra-map; @forward 'elevation' as mat-elevation-* hide mat-elevation-elevation, mat-elevation-get-ambient-map, mat-elevation-get-penumbra-map, mat-elevation-get-umbra-map, mat-elevation-overridable-elevation; diff --git a/src/material/core/style/_elevation.scss b/src/material/core/style/_elevation.scss index 295c43ea3adb..42df42686642 100644 --- a/src/material/core/style/_elevation.scss +++ b/src/material/core/style/_elevation.scss @@ -178,7 +178,7 @@ $prefix: 'mat-elevation-z'; // .foo { // transition: mat-elevation-transition-property-value(), opacity 100ms ease; // } -@function transition-property-value( +@function private-transition-property-value( $duration: $transition-duration, $easing: $transition-timing-function) { @return box-shadow #{$duration} #{$easing}; @@ -190,8 +190,8 @@ $prefix: 'mat-elevation-z'; // // NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can // be used in the same way by clients. -@mixin transition( +@mixin elevation-transition( $duration: $transition-duration, $easing: $transition-timing-function) { - transition: transition-property-value($duration, $easing); + transition: private-transition-property-value($duration, $easing); } diff --git a/src/material/expansion/expansion-panel.scss b/src/material/expansion/expansion-panel.scss index f8acc40af200..1229414320ed 100644 --- a/src/material/expansion/expansion-panel.scss +++ b/src/material/expansion/expansion-panel.scss @@ -11,7 +11,7 @@ border-radius: $border-radius; overflow: hidden; transition: margin 225ms variables.$fast-out-slow-in-timing-function, - elevation.transition-property-value(); + elevation.private-transition-property-value(); // Required so that the `box-shadow` works after the focus indicator relatively positions the // header. diff --git a/src/material/schematics/ng-generate/theming-api/migration.ts b/src/material/schematics/ng-generate/theming-api/migration.ts index 9e0acdc408ba..9f3697631b61 100644 --- a/src/material/schematics/ng-generate/theming-api/migration.ts +++ b/src/material/schematics/ng-generate/theming-api/migration.ts @@ -18,6 +18,7 @@ const materialMixins: Record = { 'mat-typography-level-to-styles': 'typography-level', 'mat-elevation': 'elevation', 'mat-overridable-elevation': 'overridable-elevation', + 'mat-elevation-transition': 'elevation-transition', 'mat-ripple': 'ripple', 'mat-ripple-color': 'ripple-color', 'mat-ripple-theme': 'ripple-theme',