Usage
Sass
diffuse-shadow($size, $color, $multiply)
Parameters
$size
(Required) (Integer) How many layers of shadow to use
Default: None
$color
(Optional) (Color) The color of the shadow
Default: rgba(0, 0, 0, 0.125)
$multiply
(Optional) (Boolean) Increment the layers by 2
Default: false
Examples
Use default values with 4 layers
Sass
.element {@include diffuse-shadow(4);}
Sass
.element {@include diffuse-shadow(8, rgba(0, 0, 0, 0.25), true);}
Additional Notes
Original inspiration by Tobin Ahlin and mixin by Mark Otto.
Source File
Located in /assets/scss/partials/_mixins.scss on line 226.
Sass
@mixin diffuse-shadow($size, $color: rgb(0 0 0 / 12.5%), $multiply: false){
$val: 0 1px 1px $color;
@for ( $i from 1 through $size ){
@if ( $i % 2 == 0 ){
@if ( $multiply == true ){
$i: $i * 2;
}
$val: #{$val}, 0 #{$i}px #{$i}px #{$color};
}
}
box-shadow: $val;
}
Override
To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.
Sass
@mixin diffuse-shadow($size, $color, $multiply){
//Write your own code here, leave it blank, or return false.
}