Shadow

Mixins

According to the Google living style guide

value : 0, 0.5, 1, 2, 3, 4, 6, 8, 9, 12, 16, 24

@include box-shadow(); // Normal (1)
@include box-shadow(1,6); // Animated
@include box-shadow(6, 1); // Reverse animation
@include box-shadow(1,6,#dc3545); // Red shadow
@include drop-shadow(); //For svg shadows
@include drop-shadow(1,6,#dc3545));

Example

.card {
width: 95px;
height: 95px;
background: #f4f4f4;
@include box-shadow(); // No animation
}
.card-animated {
@include box-shadow(1,3); // Animated
}
.card-red-shadow {
@include box-shadow(1,1,#dc3545); // Red shadow
}
.my-svg {
@include drop-shadow(); // For svg or img shadow
}

Global variables

$transition : all 250ms !default
$pushOnPress: true !default

Explanation

$transition : the default animation
$pushOnPress : activation of the push effect on :focus