fix(whiteframe): working with dp insted of z-index

Closes angular#4706.
kennethcachia · Sep 23, 2015 · c5f41c9 · c5f41c9
1 parent bdba503
commit c5f41c9
Show file tree

Hide file tree

Showing 8 changed files with 187 additions and 43 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,23 +1,99 @@
-<div layout="column" layout-fill style="padding-bottom: 32px;">
+<div layout="row" layout-padding layout-wrap layout-fill style="padding-bottom: 32px;">
 
-  <md-whiteframe class="md-whiteframe-z1" layout layout-align="center center">
-    <span>.md-whiteframe-z1</span>
+  <md-whiteframe class="md-whiteframe-1dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-1dp</span>
   </md-whiteframe>
 
-  <md-whiteframe class="md-whiteframe-z2" layout layout-align="center center">
-    <span>.md-whiteframe-z2</span>
+  <md-whiteframe class="md-whiteframe-2dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-2dp</span>
   </md-whiteframe>
 
-  <md-whiteframe class="md-whiteframe-z3" layout layout-align="center center">
-    <span>.md-whiteframe-z3</span>
+  <md-whiteframe class="md-whiteframe-3dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-3dp</span>
   </md-whiteframe>
 
-  <md-whiteframe class="md-whiteframe-z4" layout layout-align="center center">
-    <span>.md-whiteframe-z4</span>
+  <md-whiteframe class="md-whiteframe-4dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-4dp</span>
   </md-whiteframe>
 
-  <md-whiteframe class="md-whiteframe-z5" layout layout-align="center center">
-    <span>.md-whiteframe-z5</span>
+  <md-whiteframe class="md-whiteframe-5dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-5dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-6dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-6dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-7dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-7dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-8dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-8dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-9dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-9dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-10dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-10dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-11dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-11dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-12dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-12dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-13dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-13dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-14dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-14dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-15dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-15dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-16dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-16dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-17dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-17dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-18dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-18dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-19dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-19dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-20dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-20dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-21dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-21dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-22dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-22dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-23dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-23dp</span>
+  </md-whiteframe>
+
+  <md-whiteframe class="md-whiteframe-24dp" flex="25" layout layout-align="center center">
+    <span>.md-whiteframe-24dp</span>
   </md-whiteframe>
 
 </div>
diff --git 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
@@ -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
@@ -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
 //--------------------------------------------