| // Elements can have an "elevation" from 1 to 5, signified by shadows. |
| // See http://google.com/design/spec/what-is-material/objects-in-3d-space.html |
| |
| $mat-shadow-bottom-z-1: 0 2px 5px 0 rgba(0, 0, 0, 0.26); |
| $mat-shadow-bottom-z-2: 0 4px 8px 0 rgba(0, 0, 0, 0.4); |
| |
| // Whiteframes |
| |
| $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-1dp: 0 1px 3px 0 rgba(0, 0, 0, $shadow-key-umbra-opacity), |
| 0 1px 1px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 2px 1px -1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; |
| $whiteframe-shadow-2dp: 0 1px 5px 0 rgba(0, 0, 0, $shadow-key-umbra-opacity), |
| 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 1px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; |
| $whiteframe-shadow-3dp: 0 1px 8px 0 rgba(0, 0, 0, $shadow-key-umbra-opacity), |
| 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 3px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; |
| $whiteframe-shadow-4dp: 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 10 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; |
| $whiteframe-shadow-5dp: 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), |
| 0 5px 8px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 1px 14px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; |
| $whiteframe-shadow-6dp: 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), |
| 0 6px 10 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; |
| $whiteframe-shadow-7dp: 0 4px 5px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), |
| 0 7px 10 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 2px 16px 1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; |
| $whiteframe-shadow-8dp: 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), |
| 0 8px 10 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; |
| $whiteframe-shadow-9dp: 0 5px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), |
| 0 9px 12px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), |
| 0 3px 16px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; |
| $whiteframe-shadow-10dp: 0 6px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), |
| 0 10 14px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), |
| 0 4px 18px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; |
| $whiteframe-shadow-11dp: 0 6px 7px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), |
| 0 11px 15px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), |
| 0 4px 20 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; |
| $whiteframe-shadow-12dp: 0 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), |
| 0 12px 17px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), |
| 0 5px 22px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; |
| $whiteframe-shadow-13dp: 0 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), |
| 0 13px 19px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), |
| 0 5px 24px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; |
| $whiteframe-shadow-14dp: 0 7px 9px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), |
| 0 14px 21px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), |
| 0 5px 26px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; |
| |
| @mixin td-whiteframe-utilities() { |
| .md-whiteframe-1dp, |
| .md-whiteframe-z1, |
| .mat-whiteframe-1dp, |
| .mat-whiteframe-z1 { |
| box-shadow: $whiteframe-shadow-1dp; |
| } |
| |
| .md-whiteframe-2dp, |
| .mat-whiteframe-2dp { |
| box-shadow: $whiteframe-shadow-2dp; |
| } |
| |
| .md-whiteframe-3dp, |
| .mat-whiteframe-3dp { |
| box-shadow: $whiteframe-shadow-3dp; |
| } |
| |
| .md-whiteframe-4dp, |
| .md-whiteframe-z2, |
| .mat-whiteframe-4dp, |
| .mat-whiteframe-z2 { |
| box-shadow: $whiteframe-shadow-4dp; |
| } |
| |
| .md-whiteframe-5dp, |
| .mat-whiteframe-5dp { |
| box-shadow: $whiteframe-shadow-5dp; |
| } |
| |
| .md-whiteframe-6dp, |
| .mat-whiteframe-6dp { |
| box-shadow: $whiteframe-shadow-6dp; |
| } |
| |
| .md-whiteframe-7dp, |
| .md-whiteframe-z3, |
| .mat-whiteframe-7dp, |
| .mat-whiteframe-z3 { |
| box-shadow: $whiteframe-shadow-7dp; |
| } |
| |
| .md-whiteframe-8dp, |
| .mat-whiteframe-8dp { |
| box-shadow: $whiteframe-shadow-8dp; |
| } |
| |
| .md-whiteframe-9dp, |
| .mat-whiteframe-9dp { |
| box-shadow: $whiteframe-shadow-9dp; |
| } |
| |
| .md-whiteframe-10dp, |
| .md-whiteframe-z4, |
| .mat-whiteframe-10dp, |
| .mat-whiteframe-z4 { |
| box-shadow: $whiteframe-shadow-10dp; |
| } |
| |
| .md-whiteframe-11dp, |
| .mat-whiteframe-11dp { |
| box-shadow: $whiteframe-shadow-11dp; |
| } |
| |
| .md-whiteframe-12dp, |
| .mat-whiteframe-12dp { |
| box-shadow: $whiteframe-shadow-12dp; |
| } |
| |
| .md-whiteframe-13dp, |
| .md-whiteframe-z5, |
| .mat-whiteframe-13dp, |
| .mat-whiteframe-z5 { |
| box-shadow: $whiteframe-shadow-13dp; |
| } |
| |
| .md-whiteframe-14dp, |
| .mat-whiteframe-14dp { |
| box-shadow: $whiteframe-shadow-14dp; |
| } |
| } |