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 //--------------------------------------------