diff --git a/src/layout/_layout.scss b/src/layout/_layout.scss
index f6f93bdb..24992315 100644
--- a/src/layout/_layout.scss
+++ b/src/layout/_layout.scss
@@ -82,7 +82,7 @@
top: 0;
left: 0;
- @include shadow-z1();
+ @include shadow-2dp();
box-sizing: border-box;
border-right: 1px solid $layout-drawer-border-color;
@@ -211,7 +211,7 @@
color: $layout-header-text-color;
z-index: 3;
@include material-animation-default();
- @include shadow-z1();
+ @include shadow-2dp();
transition-property: min-height, box-shadow;
padding-left: $layout-header-basic-desktop-indent;
overflow: visible;
@@ -366,7 +366,7 @@
box-shadow: none;
&.is-casting-shadow {
- @include shadow-z1();
+ @include shadow-2dp();
}
}
@@ -502,7 +502,7 @@
}
&.is-casting-shadow {
- @include shadow-z1();
+ @include shadow-2dp();
}
}
@@ -516,7 +516,7 @@
z-index: 3;
flex-grow: 0;
flex-shrink: 0;
- @include shadow-z1();
+ @include shadow-2dp();
.mdl-layout__container > & {
position: absolute;
diff --git a/src/menu/_menu.scss b/src/menu/_menu.scss
index 68ada6a6..7ab0320e 100644
--- a/src/menu/_menu.scss
+++ b/src/menu/_menu.scss
@@ -41,7 +41,7 @@
opacity: 0;
transform: scale(0);
transform-origin: 0 0;
- @include shadow-z1();
+ @include shadow-2dp();
will-change: transform;
transition: transform $menu-expand-duration $animation-curve-default,
opacity $menu-fade-duration $animation-curve-default;
diff --git a/src/shadow/README.md b/src/shadow/README.md
index 92affc55..c74663dc 100644
--- a/src/shadow/README.md
+++ b/src/shadow/README.md
@@ -1 +1,3 @@
# Shadows
+
+Shadows render a shadow simulating the effect of a lifted piece of paper.
diff --git a/src/shadow/demo.html b/src/shadow/demo.html
index 6f71bc55..f17666d6 100644
--- a/src/shadow/demo.html
+++ b/src/shadow/demo.html
@@ -14,17 +14,21 @@
+
Hand-Crafted Artisanal
+
-
+
2dp
-
+
3dp
-
+
4dp
-
+
6dp
-
+
8dp
+
+
16dp
diff --git a/src/shadow/demo.scss b/src/shadow/demo.scss
index 14db956f..328b7469 100644
--- a/src/shadow/demo.scss
+++ b/src/shadow/demo.scss
@@ -20,14 +20,22 @@
background-color : #fff;
border-radius : 2px;
display : block;
- height : 300px;
+ height : 72px;
margin-bottom : 20px;
-
+ margin-right : 32px;
+ padding : 10px;
+ text-align : center;
+ float : left;
+ color : #9E9E9E;
+ display : flex;
+ align-items : center;
+ justify-content : center;
transition-property: opacity, transform;
+
@include material-animation-default(300ms);
- width : 300px;
+ width : 72px;
@media screen and (max-width: 360px ) {
- width: 272px;
+ width: 27px;
}
}
diff --git a/src/switch/_switch.scss b/src/switch/_switch.scss
index 8c675648..cbd20d1a 100644
--- a/src/switch/_switch.scss
+++ b/src/switch/_switch.scss
@@ -97,7 +97,7 @@
cursor: pointer;
- @include shadow-z1();
+ @include shadow-2dp();
@include material-animation-default(0.28s);
transition-property: left;
@@ -106,7 +106,7 @@
background: $switch-thumb-color;
left: $switch-track-length - $switch-thumb-size;
- @include shadow-z2();
+ @include shadow-3dp();
}
.mdl-switch.is-disabled & {