diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index d1114a76fba..ffc0adcc454 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -1,5 +1,5 @@
$card-padding: 16px !default;
-$card-box-shadow: $whiteframe-shadow-z1 !default;
+$card-box-shadow: $whiteframe-shadow-1dp !default;
md-card {
box-sizing: border-box;
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index d57b7a3ec95..90f4cf596aa 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -36,7 +36,7 @@ md-dialog {
position: relative;
overflow: auto; // stop content from leaking out of dialog parent and fix IE
- box-shadow: $whiteframe-shadow-z5;
+ box-shadow: $whiteframe-shadow-13dp;
display: flex;
flex-direction: column;
diff --git a/src/components/select/select.scss b/src/components/select/select.scss
index 5b10075afdb..b8711ebe7a4 100755
--- a/src/components/select/select.scss
+++ b/src/components/select/select.scss
@@ -153,7 +153,7 @@ md-select-menu {
}
}
- box-shadow: $whiteframe-shadow-z1;
+ box-shadow: $whiteframe-shadow-1dp;
max-height: ($select-option-height * $select-max-visible-options) + 2 * $baseline-grid;
min-height: $select-option-height;
overflow-y: hidden;
diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss
index c97db10f44d..1476050013b 100644
--- a/src/components/switch/switch.scss
+++ b/src/components/switch/switch.scss
@@ -81,7 +81,7 @@ md-switch {
height: $switch-thumb-size;
width: $switch-thumb-size;
border-radius: 50%;
- box-shadow: $whiteframe-shadow-z1;
+ box-shadow: $whiteframe-shadow-1dp;
&:before {
background-color: transparent;
diff --git a/src/components/whiteframe/demoBasicUsage/index.html b/src/components/whiteframe/demoBasicUsage/index.html
index 48a8cd9f1bb..56623c8f823 100644
--- a/src/components/whiteframe/demoBasicUsage/index.html
+++ b/src/components/whiteframe/demoBasicUsage/index.html
@@ -1,23 +1,99 @@
-
+
-
- .md-whiteframe-z1
+
+ .md-whiteframe-1dp
-
- .md-whiteframe-z2
+
+ .md-whiteframe-2dp
-
- .md-whiteframe-z3
+
+ .md-whiteframe-3dp
-
- .md-whiteframe-z4
+
+ .md-whiteframe-4dp
-
- .md-whiteframe-z5
+
+ .md-whiteframe-5dp
+
+
+
+ .md-whiteframe-6dp
+
+
+
+ .md-whiteframe-7dp
+
+
+
+ .md-whiteframe-8dp
+
+
+
+ .md-whiteframe-9dp
+
+
+
+ .md-whiteframe-10dp
+
+
+
+ .md-whiteframe-11dp
+
+
+
+ .md-whiteframe-12dp
+
+
+
+ .md-whiteframe-13dp
+
+
+
+ .md-whiteframe-14dp
+
+
+
+ .md-whiteframe-15dp
+
+
+
+ .md-whiteframe-16dp
+
+
+
+ .md-whiteframe-17dp
+
+
+
+ .md-whiteframe-18dp
+
+
+
+ .md-whiteframe-19dp
+
+
+
+ .md-whiteframe-20dp
+
+
+
+ .md-whiteframe-21dp
+
+
+
+ .md-whiteframe-22dp
+
+
+
+ .md-whiteframe-23dp
+
+
+
+ .md-whiteframe-24dp
diff --git a/src/components/whiteframe/demoBasicUsage/style.css b/src/components/whiteframe/demoBasicUsage/style.css
index c1c7b279bfe..96e30b246c3 100644
--- a/src/components/whiteframe/demoBasicUsage/style.css
+++ b/src/components/whiteframe/demoBasicUsage/style.css
@@ -1,5 +1,5 @@
md-whiteframe {
background: #fff;
- margin: 20px;
- padding: 20px;
+ margin: 30px;
+ height: 100px;
}
diff --git a/src/components/whiteframe/whiteframe.scss b/src/components/whiteframe/whiteframe.scss
index 2c8182ad9b5..591913b912b 100644
--- a/src/components/whiteframe/whiteframe.scss
+++ b/src/components/whiteframe/whiteframe.scss
@@ -1,17 +1,74 @@
-.md-whiteframe-z1 {
- box-shadow: $whiteframe-shadow-z1;
+.md-whiteframe-1dp, .md-whiteframe-z1 {
+ box-shadow: $whiteframe-shadow-1dp;
}
-.md-whiteframe-z2 {
- box-shadow: $whiteframe-shadow-z2;
+.md-whiteframe-2dp {
+ box-shadow: $whiteframe-shadow-2dp;
}
-.md-whiteframe-z3 {
- box-shadow: $whiteframe-shadow-z3;
+.md-whiteframe-3dp {
+ box-shadow: $whiteframe-shadow-3dp;
}
-.md-whiteframe-z4 {
- box-shadow: $whiteframe-shadow-z4;
+.md-whiteframe-4dp, .md-whiteframe-z2{
+ box-shadow: $whiteframe-shadow-4dp;
}
-.md-whiteframe-z5 {
- box-shadow: $whiteframe-shadow-z5;
+.md-whiteframe-5dp {
+ box-shadow: $whiteframe-shadow-5dp;
+}
+.md-whiteframe-6dp {
+ box-shadow: $whiteframe-shadow-6dp;
+}
+.md-whiteframe-7dp, .md-whiteframe-z3 {
+ box-shadow: $whiteframe-shadow-7dp;
+}
+.md-whiteframe-8dp {
+ box-shadow: $whiteframe-shadow-8dp;
+}
+.md-whiteframe-9dp {
+ box-shadow: $whiteframe-shadow-9dp;
+}
+.md-whiteframe-10dp, .md-whiteframe-z4 {
+ box-shadow: $whiteframe-shadow-10dp;
+}
+.md-whiteframe-11dp {
+ box-shadow: $whiteframe-shadow-11dp;
+}
+.md-whiteframe-12dp {
+ box-shadow: $whiteframe-shadow-12dp;
+}
+.md-whiteframe-13dp, .md-whiteframe-z5{
+ box-shadow: $whiteframe-shadow-13dp;
+}
+.md-whiteframe-14dp {
+ box-shadow: $whiteframe-shadow-14dp;
+}
+.md-whiteframe-15dp {
+ box-shadow: $whiteframe-shadow-15dp;
+}
+.md-whiteframe-16dp {
+ box-shadow: $whiteframe-shadow-16dp;
+}
+.md-whiteframe-17dp {
+ box-shadow: $whiteframe-shadow-17dp;
+}
+.md-whiteframe-18dp {
+ box-shadow: $whiteframe-shadow-18dp;
+}
+.md-whiteframe-19dp {
+ box-shadow: $whiteframe-shadow-19dp;
+}
+.md-whiteframe-20dp {
+ box-shadow: $whiteframe-shadow-20dp;
+}
+.md-whiteframe-21dp {
+ box-shadow: $whiteframe-shadow-21dp;
+}
+.md-whiteframe-22dp {
+ box-shadow: $whiteframe-shadow-22dp;
+}
+.md-whiteframe-23dp {
+ box-shadow: $whiteframe-shadow-23dp;
+}
+.md-whiteframe-24dp {
+ box-shadow: $whiteframe-shadow-24dp;
}
@media screen and (-ms-high-contrast: active) {
diff --git a/src/core/style/variables.scss b/src/core/style/variables.scss
index bc6a032b119..78d6361b95d 100644
--- a/src/core/style/variables.scss
+++ b/src/core/style/variables.scss
@@ -39,25 +39,36 @@ $toast-margin: $baseline-grid * 1 !default;
// Whiteframes
-$shadow-multiplier: 0.7;
-$shadow-key-umbra-opacity: $shadow-multiplier * 0.2;
-$shadow-key-penumbra-opacity: $shadow-multiplier * 0.14;
-$shadow-ambient-shadow-opacity: $shadow-multiplier * 0.12;
+$shadow-key-umbra-opacity: 0.2;
+$shadow-key-penumbra-opacity: 0.14;
+$shadow-ambient-shadow-opacity: 0.12;
// NOTE(shyndman): gulp-sass seems to be failing if I split the shadow defs across
// multiple lines. Ugly. Sorry.
-$whiteframe-shadow-z1: 0px 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 2px 2px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 5px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
-$whiteframe-zindex-z1: 1 !default;
-$whiteframe-shadow-z2: 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
-$whiteframe-zindex-z2: 2 !default;
-$whiteframe-shadow-z3: 0px 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 6px 10px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 18px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
-$whiteframe-zindex-z3: 3 !default;
-$whiteframe-shadow-z4: 0px 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
-$whiteframe-zindex-z4: 4 !default;
-$whiteframe-shadow-z5: 0px 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
-$whiteframe-zindex-z5: 5 !default;
-
-
+$whiteframe-shadow-1dp: 0px 1px 3px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 1px 1px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 2px 1px -1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-2dp: 0px 1px 5px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 2px 2px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 1px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-3dp: 0px 1px 8px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 3px 4px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 3px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-4dp: 0px 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 4px 5px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 10px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-5dp: 0px 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 5px 8px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 14px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-6dp: 0px 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 6px 10px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 18px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-7dp: 0px 4px 5px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 7px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 2px 16px 1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-8dp: 0px 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-9dp: 0px 5px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 9px 12px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 16px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-10dp: 0px 6px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 10px 14px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 4px 18px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-11dp: 0px 6px 7px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 11px 15px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 4px 20px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-12dp: 0px 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 12px 17px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 22px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-13dp: 0px 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 13px 19px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 24px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-14dp: 0px 7px 9px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 14px 21px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 26px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-15dp: 0px 8px 9px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 15px 22px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 28px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-16dp: 0px 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-17dp: 0px 8px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 17px 26px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 32px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-18dp: 0px 9px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 18px 28px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 7px 34px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-19dp: 0px 9px 12px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 19px 29px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 7px 36px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-20dp: 0px 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 20px 31px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 38px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-21dp: 0px 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 21px 33px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 40px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-22dp: 0px 10px 14px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 22px 35px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 42px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-23dp: 0px 11px 14px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 23px 36px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 9px 44px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
+$whiteframe-shadow-24dp: 0px 11px 15px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 24px 38px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 9px 46px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
// Z-indexes
//--------------------------------------------