/// 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); } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter