Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Google Material Design Shadow SASS
//
// Google Material Design Shadow
// Ref: http://stackoverflow.com/questions/30533055/calculating-shadow-values-for-all-material-design-elevations
//
=shadow($dp)
@if $dp == 0
box-shadow : none
@else
$ambientY : $dp
$ambientBlur : if($dp == 1, 3, $dp * 2)
$ambientAlpha : ($dp + 10 + ($dp / 9.38)) / 100
$ambient : 0 $ambientY+px $ambientBlur+px rgba(0, 0, 0, $ambientAlpha)
$directY : if($dp < 10, if($dp % 2 == 0 , $dp - (($dp / 2) - 1) , ($dp - (($dp - 1) / 2))) , $dp - 4)
$directBlur : if($dp == 1, 3, $dp * 2)
$directAlpha : (24 - round($dp / 10)) / 100
$direct : 0 $directY+px $directBlur+px rgba(0, 0, 0, $directAlpha)
box-shadow : $ambient, $direct
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.