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