@use 'sass:map'; @use 'sass:meta'; @use 'variables'; @use '@material/elevation/elevation-theme' as mdc-elevation; // A collection of mixins and CSS classes that can be used to apply elevation to a material // element. // See: https://material.io/design/environment/elevation.html // Examples: // // // .mat-foo { // @include $mat-elevation(2); // // &:active { // @include $mat-elevation(8); // } // } // //

Some content

// // For an explanation of the design behind how elevation is implemented, see the design doc at // https://goo.gl/Kq0k9Z. // The default duration value for elevation transitions. $transition-duration: 280ms !default; // The default easing value for elevation transitions. $transition-timing-function: variables.$fast-out-slow-in-timing-function; // The default color for elevation shadows. $color: black !default; // Prefix for elevation-related selectors. $prefix: 'mat-elevation-z'; // Applies the correct css rules to an element to give it the elevation specified by $zValue. // The $zValue must be between 0 and 24. @mixin elevation($zValue, $color: $color, $opacity: null) { @if meta.type-of($color) == color and $opacity == null { @include mdc-elevation.elevation($zValue, $color); } @else { // Copied from @material/elevation/_elevation-theme.scss#_box-shadow // TODO(mmalerba): Add support for graceful handling of CSS var color to MDC. $umbra-z-value: map.get(mdc-elevation.$umbra-map, $zValue); $penumbra-z-value: map.get(mdc-elevation.$penumbra-map, $zValue); $ambient-z-value: map.get(mdc-elevation.$ambient-map, $zValue); $color-opacity: if($opacity != null, $opacity, 1); $umbra-color: _compute-color-opacity($color, mdc-elevation.$umbra-opacity * $color-opacity); $penumbra-color: _compute-color-opacity($color, mdc-elevation.$penumbra-opacity * $color-opacity); $ambient-color: _compute-color-opacity($color, mdc-elevation.$ambient-opacity * $color-opacity); $box-shadow: ( #{'#{$umbra-z-value} #{$umbra-color}'}, #{'#{$penumbra-z-value} #{$penumbra-color}'}, #{$ambient-z-value} $ambient-color ); @include mdc-elevation.shadow($box-shadow); } } // Applies the elevation to an element in a manner that allows // consumers to override it via the Material elevation classes. @mixin overridable-elevation($zValue, $color: $color, $opacity: null) { &:not([class*='#{$prefix}']) { @include elevation($zValue, $color, $opacity); } } // Returns a string that can be used as the value for a transition property for elevation. // Calling this function directly is useful in situations where a component needs to transition // more than one property. // // .foo { // transition: mat-elevation-transition-property-value(), opacity 100ms ease; // } @function private-transition-property-value( $duration: $transition-duration, $easing: $transition-timing-function) { @return box-shadow #{$duration} #{$easing}; } // Applies the correct css rules needed to have an element transition between elevations. // This mixin should be applied to elements whose elevation values will change depending on their // context (e.g. when active or disabled). // // NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can // be used in the same way by clients. @mixin elevation-transition( $duration: $transition-duration, $easing: $transition-timing-function) { transition: private-transition-property-value($duration, $easing); } @function _compute-color-opacity($color, $opacity) { @if meta.type-of($color) == color and $opacity != null { @return rgba($color, $opacity); } @else { @return $color; } }