shadow.scss

According to the Google living style guide
value : 0, 0.5, 1, 2, 3, 4, 6, 8, 9, 12, 16, 24

Includes

@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
$isSmartphoneAnimation: false !default
$pushOnPress: true !default

Explanation

• $transition: the default animation
• $isSmartphoneAnimation: Deactivate the transform: translateY(-5px) & reverse the animation only on :active
• $pushOnPress: activation of the push effect on :focus