Material Shadows Mixin | CSS-Tricks - CSS-Tricks

PHOTO EMBED

Sat Jan 08 2022 01:47:09 GMT+0000 (Coordinated Universal Time)

Saved by @wnakswl #scss #shadows

/// Gives a card depth effect.
/// @param {Number} $depth - depth level (between 1 and 5)
/// @link http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality Google Design
/// @requires {function} top-shadow
/// @requires {function} bottom-shadow
@mixin card($depth) {
  @if $depth < 1 {
    box-shadow: none;
  } @else if $depth > 5 {
    @warn "Invalid $depth `#{$depth}` for mixin `card`.";
  } @else {
    box-shadow: bottom-shadow($depth), top-shadow($depth);  
  }
}
content_copyCOPY

https://css-tricks.com/snippets/sass/material-shadows-mixin/