_mixins.scss

////
/// @group elevation
////

@import '~@react-md/theme/dist/functions';
@import '~@react-md/transition/dist/mixins';
@import '~@react-md/utils/dist/mixins';
@import './functions';
@import './variables';

/// Create the box shadow based on a z-value.
///
/// @example scss - Example Usage SCSS
/// .my-class {
///   @include rmd-elevation(8);
///
///   background-color: white;
///   position: fixed;
///   z-index: 8;
/// }
///
/// @param {Number} z-value - This should be a number between 0 and 24.
/// @param {Color} color [$rmd-elevation-color] - The color to use for the
/// box-shadow.
/// @param {Number} opacity-boost [0] - The amount to boost the default opacity
/// levels for the three box-shadows applied.
@mixin rmd-elevation(
  $z-value,
  $color: $rmd-elevation-color,
  $opacity-boost: 0
) {
  box-shadow: rmd-elevation($z-value, $color, $opacity-boost);
}

/// This mixin is used to create performant box-shadow transitions between
/// different elevations. What this does behind the scenes is update the element
/// to have `position: relative` along with a pseudo `::before` or `::after` tag
/// that has the new box shadow with an initial opacity set to 0. When the
/// `$active-selectors` class or state is applied to the element, the pseudo
/// element's opacity will be updated to 1 and it'll animate in. This is really
/// just because it is more performant to animate opacity instead of box-shadow
/// itself.
///
/// @param {String|Number} start - This should be the starting shadow z-index.
/// So any number from 0 to 24 (inclusive).
/// @param {String|Number} end - This should be the ending shadow z-index. So
/// any number from 0 to 24 (inclusive).
/// @param {List|String} active-selectors - This is normally a class name that
/// should be used or a list of class names for when the box shadow should start
/// animating. This can also be different states such as `&:hover` or `&:focus`
/// @param {Boolean} before [true] - Boolean the shadow should be placed within
/// the `::before` pseudo element.  When this is set to `false`, the `::after`
/// pseudo element will be used instead.
/// @param {String|Number} duration [$rmd-transition-standard-time] - The
/// animation duration to use.
/// @param {Color} color [$rmd-elevation-color] - The color to use for the
/// box-shadow.
/// @param {Number} opacity-boost [0] - The amount to boost the default opacity
/// levels for the three box-shadows applied.
@mixin rmd-elevation-transition(
  $start,
  $end,
  $active-selectors,
  $before: true,
  $duration: $rmd-transition-standard-time,
  $color: $rmd-elevation-color,
  $opacity-boost: 0
) {
  $start-shadow: if(
    $start == none or $start == 0,
    none,
    rmd-elevation($start, $color, $opacity-boost)
  );
  $end-shadow: if(
    $end == none or $end == 0,
    none,
    rmd-elevation($end, $color, $opacity-boost)
  );

  @include rmd-transition-shadow-transition(
    $start-shadow,
    $end-shadow,
    $active-selectors,
    $before,
    $duration
  );
}