box-shadow-side()

The mixin includes the box-shadow of the specified side, size, and color. The side can be `bottom`, `left`, `right`, `top`, size default is 10px and color default is gray-color.

// 
@mixin box-shadow-side($side, $size: 10px, $color: 'gray') {
  @if $side == right {
    // Right side.
    box-shadow: $size 0 $size ($size * -1) color($color);
  } @else if $side == left {
    // Left side.
    box-shadow: ($size * -1) 0 $size ($size * -1) color($color);
  } @else if $side == bottom {
    // Bottom side.
    box-shadow: 0 $size $size ($size * -1) color($color);
  } @else if $side == top {
    // Top side.
    box-shadow: 0 ($size * -1) $size ($size * -1) color($color);
  } @else {
    @error "Unknown side #{$side}.";
  }
}

Last updated