Skip to content

Instantly share code, notes, and snippets.

@harnerdesigns
Created July 23, 2019 02:07
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save harnerdesigns/3e2d577fc89eaf5200b13e7dc0b956f1 to your computer and use it in GitHub Desktop.
Save harnerdesigns/3e2d577fc89eaf5200b13e7dc0b956f1 to your computer and use it in GitHub Desktop.
Jack Harner's Box Shadow SCSS Mixin
/// Computes a top-shadow for a card effect.
/// @param {Number} $depth - depth level
/// @return {List}
@function top-shadow($depth) {
$primary-offset: nth(1 3 10 14 19, $depth) * 1px;
$blur: nth(2 3 10 14 19, $depth) * 4px;
$color: rgba(black, nth(0.12 0.16 0.19 0.25 0.3, $depth));
@return 0 $primary-offset $blur $color;
}
/// Computes a bottom-shadow for a card effect.
/// @param {Number} $depth - depth level
/// @return {List}
@function bottom-shadow($depth) {
$primary-offset: nth(1.5 3 6 10 15, $depth) * 1px;
$blur: nth(1 3 3 5 6, $depth) * 4px;
$color: rgba(black, nth(0.24 0.23 0.23 0.22 0.22, $depth));
@return 0 $primary-offset $blur $color;
}
@mixin card($depth) {
@if $depth < 1 {
box-shadow: inset bottom-shadow(abs($depth)), inset top-shadow(abs($depth));
}
@else if $depth>5 {
@warn "Invalid $depth `#{$depth}` for mixin `card`.";
}
@else {
box-shadow: bottom-shadow($depth), top-shadow($depth);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment