Less css box-shadow helper for cards & modals according to Googles Material Design spec.

materialDesignShadowHelper.less

/**
 * A mixin which helps you to add depth to elements according to the Google Material Design spec:
 * http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality
 *
 * Please note that the values given in the specification cannot be used as is. To create the same visual experience
 * the blur parameter has to be doubled.
 *
 * Author: Florian Kutschera (@gefangenimnetz), Conceptboard GmbH (@conceptboardapp)
 *
 * Example usage:
 *
 * .card {
 *     width: 95px;
 *     height: 95px;
 *     background: #f4f4f4;
 *     -webkit-transition: all 250ms;
 *     -moz-transition: all 250ms;
 *     transition: all 250ms;
 *     .BoxShadowHelper(1);
 *     &:hover {
 *         .BoxShadowHelper(3);
 *         -webkit-transform: translateY(-5px);
 *         -moz-transform: translateY(-5px);
 *         transform: translateY(-5px);
 *     }
 * }
 *
 */

.BoxShadowHelper(@level: 1){
    & when (@level = 1) {
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    & when (@level = 2) {
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }
    & when (@level = 3) {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
    & when (@level = 4) {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }
    & when (@level = 5) {
        box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    }
}

I'm getting variable @level is undefined in error, caused by line 31... it appears to be a scoping issue from the outer .BoxShadowHelper()method. I'm using less 1.5 compiled via grunt.

If I change the initial mixin definition to below it works

.BoxShadowHelper(@theLevel: 1){
    @level: @theLevel;
    ... 
}

What am I missing here...? I'm not even fully sure how the above change causes it to work. Thanks for the gist anyway, cheers!

SASS version is here: https://gist.github.com/destan/b9ccfa6243eab53460d2

@destan Your Link is Dead :(

Sass link is DEAD can you please re-upload!

@kimpetersend1
http://codepen.io/allusis/pen/bdVjbj

@gefangenimnetz can you elaborate on why you chose the values you did? The result looks nice but I am looking esp. at the second values for v-shadow and blur.

1. 0 1px 3px, 0 1px 2px
2. 0 3px 6px, 0 3px 6px
3. 0 10px 20px, 0 6px 6px
4. 0 14px 28px, 0 10px 10px
5. 0 19px 38px, 0 15px 12px

The pattern in the first set of values is pretty clear but the second set isn't. Just curious..

@rickydazla - it's just an extra shadow to add quality to the effect.

I wrote a sass implementation for whoever needs it, as the link mentioned above is dead.

@mixin shadow($depth){
	@if $depth == 1 {
		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

	} @else if $depth == 2 {
		box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

	} @else if $depth == 3 {
		box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

	} @else if $depth == 4 {
		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

	} @else if $depth == 5 {
		box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

	}
}