Material Elevation Illustration

index.html

.demo
	.floor.isometric
		.appBar
			i.material-icons.md-light.md-24#drawerOpener menu
		.content
			.card
			.card
		.fab.dialogOpener.toasted
		.button.dialogOpener
		.dialogContainer.hidden#dialog
			.dialog
		.drawerContainer.hidden#drawer
			.drawer
				.header
.desc
	h1 Material Design Elevation
	p Based on values from the 
		a(href="http://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-" target="_blank") Google Design Guidelines. 
		|Try clicking things!
		br
	|Created by 
	a(href="https://twitter.com/Nathanielnw" target="_blank") @nathanielnw

Material Elevation Illustration.markdown

FMaterial Elevation Illustration

Extending a earlier pen (http://codepen.io/nw/pen/VYdXee) to display the elevation of material elements (http://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-).

Note: the elevation is exaggerated - change the $elevationScaleFactor variable in the SCSS to 1 for more accurate values.

Forked from Nathaniel Watson's Pen Material Elevation Illustration.

A Pen by Michael Corrado on CodePen.

License.

script.js

var dialogOpener = $('.dialogOpener');
var dialog = $('#dialog');
var drawerOpener = $('#drawerOpener');
var drawer = $('#drawer');

dialogOpener.on('click', function() {
	dialog.removeClass('hidden');
});

dialog.on('click', function() {
	dialog.addClass('hidden');
})

drawerOpener.on('click', function() {
	drawer.toggleClass('hidden');
});

drawer.on('click', function() {
	drawer.addClass('hidden');
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "bourbon";

$elevationScaleFactor: 6;

$screenWidth: 320px;
$screenHeight: 560px;

$shift: 80px;
$duration: 0.5s;

/* Palette generated by Material Palette - materialpalette.com/cyan/pink */
$primary-color-light:  #0097A7;
$primary-color:        #00BCD4;
$primary-color-light:  #B2EBF2;
$primary-color-text:   #FFFFFF;
$accent-color:         #FF4081;
$primary-text-color:   #212121;
$secondary-text-color: #727272;
$divider-color:        #B6B6B6;

$bg-color: #EEEEEE;
$card-color: #FAFAFA;

@mixin material($width, $height, $color, $radius: 2px) {
	width: $width;
	height: $height;
	border-radius: $radius;

	background: $color;
		
	// Thickness - the borders actually extend too far, but with such a small thickness it's not really visible.
	border-bottom: 2px solid darken($color, 20%);
	border-left: 2px solid darken($color, 20%);
}

@function unIso() {
	@return rotateX(-90deg) rotateY(-45deg) rotateZ(0deg);
}

@mixin _elevate($dp) {
	$shift: $elevationScaleFactor * $dp * 1px;
	
	@include transform(translate3d(0, 0, $shift));
	box-shadow:  -$shift * 1.2 $shift * 1.5  $shift / 2 rgba(black, 0.1),
			-$shift * 1.2 $shift * 1.3 $shift / 2 rgba(black, 0.1);
}

@mixin elevate($dp, $clickDp: $dp) {
	@include _elevate($dp);

	@include transition(transform $duration, box-shadow $duration);
	@include transform-style(preserve-3d);
	
	$delay: (#{$dp/ 4}s);
	@include animation(hideDelay #{$delay}, drop 2s #{$delay});
	
	@if ($dp != $clickDp) {
		cursor: pointer;
	}
	
	&:before {
		@include transform(unIso() translate3d(0, 0, $shift/2));
		
		content: '#{$dp}dp';
		display: block;
		position: absolute;
		right: 100%;
		top: 50%;
		
		margin-top: -1em;
		
		opacity: 0;
		
		@include transition(opacity $duration, transform $duration);
	}
	
	&:hover {
		@include _elevate($dp + 1);
	
		&:before {
			@include transform(unIso() translate3d(0, 0, $shift/2 + 16px));
			
			opacity: 0.8;
		}
	}
	
	&:active {
		@include _elevate($clickDp);
	
		&:before {
			content: '#{$clickDp}dp';
			
			opacity: 0.8;
		}
	}
}


body {
	background-color: $primary-color-light;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 14px;
}

.isometric {
	@include transform(rotateX(60deg) rotateY(0deg) rotateZ(-45deg) 
		translate(-14%, -34%) scale3d(1, 1, 1)); // translate is just to centre it on the page
	@include transform-style(preserve-3d);
}

.appBar {
	@include material(100%, 56px, $primary-color, 0);
	@include elevate(4);
	
	@include box-sizing(border-box);
	padding: 14px;
}

.fab {
	@include material(56px, 56px, $accent-color, 50%);
	@include elevate(6, 12);
	
	position: absolute;
	bottom: 16px;
	right: 16px;
}

.button {
	@include material(100px, 36px, darken($bg-color, 5%));
	@include elevate(2, 8);
	
	position: absolute;
	bottom: 8px;
	left: 8px;
}

.dialogContainer {
	@include transform-style(preserve-3d);
	
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	@include transition(opacity $duration/2);
}

.dialog {
	$w: $screenWidth - 80px;
	$h: 240px;
	@include material($w, $h, $primary-color-text);
	@include elevate(24);
	
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -$w/2;
	margin-top: -$h/2;
}

.drawerContainer {
	@include transform-style(preserve-3d);
	
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	&.hidden {
		margin-left: -100%;
	}
	
	@include transition(opacity $duration/2, margin-left $duration);
}

.drawer {
	$w: $screenWidth - 56px;
	@include material($w, 100%, $primary-color-text);
	@include elevate(16);
	
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 0;
	margin-top: 0;
	
	.header {
		width: 100%;
		height: 160px;
		border-bottom: 1px solid $divider-color;
		
		background: darken($bg-color, 5%);
	}
}

.content {
	padding: 8px;
	@include transform-style(preserve-3d);
}

.card {
	@include material(100%, 160px, $card-color);
	@include elevate(2, 8);
	@include box-sizing(border-box);

	margin-bottom: 8px;
	padding: 8px;
	float: left;
}

.floor {
	@include material(auto, auto, $bg-color);
	
	display: block;
	width: $screenWidth;
	height: $screenHeight;
	padding: 0;
	
	position: absolute;
	
	// to make things look nice on the page
	left: 50%;
}

.hidden {
	opacity: 0;
	pointer-events: none;
}

@include keyframes(drop) {
	0%, from {
		@include _elevate(15);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
}

@include keyframes(hideDelay) {
	from, to {
		opacity: 0;
	}
}

// Description stuff
.demo {
	display: block;
	width: 100%;
	height: 420px;
}

.desc {
	text-align: center;

	h1 {
		text-transform: uppercase;
		font-weight: 300;
	}
	
	a {
		color: darken($primary-color, 10%);
		font-weight: 500;
		text-decoration: none;
	}
}

// Icons
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.md-light {
	color: $primary-color-text;
}

#drawerOpener {
	cursor: pointer;
}