Skip to content

Commit 99ed7ff

Browse files
traviskaufmantraviskaufman
committed
feat(elevation): Add elevation core styles
This commit replaces `_shadows.scss` within `src/core/styles` with `_elevation.scss`, according to the proposed design outlined [here](https://goo.gl/Kq0k9Z). All components that were dependent on the old shadows have been modified to use elevation. Note however that none of the values in those old components have been changed; it's simply a to the new API. Part of #48.
1 parent 977759e commit 99ed7ff

File tree

5 files changed

+201
-20
lines changed

5 files changed

+201
-20
lines changed

‎src/components/button/_button-base.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
@import "variables";
3-
@import "shadows";
3+
@import "elevation";
44

55
// TODO(jelbourn): This goes away.
66
@import "default-theme";
@@ -70,20 +70,20 @@ $md-mini-fab-padding: 8px !default;
7070
%md-raised-button {
7171
@extend %md-button-base;
7272

73+
@include md-elevation(1);
7374
@include md-button-theme('color', default-contrast);
7475
@include md-button-theme('background-color');
7576

7677
background-color: md-color($md-background, background);
77-
box-shadow: $md-shadow-bottom-z-1;
7878
// Force hardware acceleration.
7979
transform: translate3d(0, 0, 0);
8080

8181
// Animation.
8282
transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
83-
box-shadow $swift-ease-out-duration $swift-ease-out-timing-function;
83+
md-elevation-transition-rule();
8484

8585
&:active {
86-
box-shadow: $md-shadow-bottom-z-2;
86+
@include md-elevation(2);
8787
}
8888

8989
&.md-button-focus {

‎src/components/card/card.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
@import "variables";
3-
@import "shadows";
3+
@import "elevation";
44
@import "default-theme"; // TODO: Remove this
55

66
$md-card-default-padding: 24px !default;
@@ -9,18 +9,18 @@ $md-card-border-radius: 2px !default;
99
$md-card-header-size: 40px !default;
1010

1111
md-card {
12+
@include md-elevation(1);
13+
@include md-elevation-transition;
1214
display: block;
1315
position: relative;
1416
padding: $md-card-default-padding;
1517
border-radius: $md-card-border-radius;
16-
box-shadow: $md-shadow-bottom-z-1;
1718
font-family: $md-font-family;
1819
background: md-color($md-background, card);
1920
}
2021

2122
md-card:hover {
22-
box-shadow: $md-shadow-bottom-z-2;
23-
transition: $swift-ease-in;
23+
@include md-elevation(2);
2424
}
2525

2626
.md-card-flat {
@@ -30,7 +30,7 @@ md-card:hover {
3030
// base styles for each card section preset (md-card-content, etc)
3131
%md-card-section-base {
3232
display: block;
33-
margin-bottom: 16px;
33+
margin-bottom: 16px;
3434
}
3535

3636
md-card-title {
@@ -76,7 +76,7 @@ md-card-footer {
7676
md-card-actions {
7777
[md-button], [md-raised-button] {
7878
margin: 0 4px;
79-
}
79+
}
8080
}
8181

8282
/* HEADER STYLES */
@@ -175,7 +175,7 @@ md-card-title-group {
175175
margin-bottom: 0;
176176
}
177177

178-
// if main image is on top, need to place it flush against top
178+
// if main image is on top, need to place it flush against top
179179
// (by stripping card's default 24px padding)
180180
[md-card-image]:first-child {
181181
margin-top: -24px;
@@ -208,7 +208,7 @@ md-card-header md-card-subtitle:not(:first-child) {
208208
margin-top: -8px;
209209
}
210210

211-
// xl image should always have 16px on top.
211+
// xl image should always have 16px on top.
212212
// when it's the first el, it'll need to remove 8px from default card padding of 24px
213213
.md-card > [md-card-xl-image]:first-child{
214214
margin-top: -8px;

‎src/components/sidenav/sidenav.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import "default-theme";
22
@import "mixins";
33
@import "variables";
4-
@import "shadows";
4+
@import "elevation";
55

66

77
// We use invert() here to have the darken the background color expected to be used. If the
@@ -31,14 +31,14 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
3131
will-change: transform;
3232
}
3333
&.md-sidenav-opening {
34+
@include md-elevation(1);
3435
visibility: visible;
3536
transform: translateX($open);
3637
will-change: transform;
37-
box-shadow: $md-shadow-bottom-z-1;
3838
}
3939
&.md-sidenav-opened {
40+
@include md-elevation(1);
4041
transform: translateX($open);
41-
box-shadow: $md-shadow-bottom-z-1;
4242
}
4343
}
4444

‎src/core/style/_elevation.scss

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
/**
2+
* A collection of mixins and CSS classes that can be used to apply elevation to a material
3+
* element.
4+
* See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html
5+
* Examples:
6+
*
7+
* ```scss
8+
* .md-foo {
9+
* @include $md-elevation(2);
10+
*
11+
* &:active {
12+
* @include $md-elevation(8);
13+
* }
14+
* }
15+
* ```
16+
*
17+
* ```html
18+
* <div id="external-card" class="md-elevation-z2"><p>Some content</p></div>
19+
* ```
20+
*
21+
* For an explanation of the design behind how elevation is implemented, see the design doc at
22+
* https://goo.gl/Kq0k9Z.
23+
*/
24+
25+
$_umbra-color: rgba(black, 0.2);
26+
$_penumbra-color: rgba(black, 0.14);
27+
$_ambient-color: rgba(black, 0.12);
28+
29+
$_umbra-elevation-map: (
30+
0: '0px 0px 0px 0px #{$_umbra-color}',
31+
1: '0px 2px 1px -1px #{$_umbra-color}',
32+
2: '0px 3px 1px -2px #{$_umbra-color}',
33+
3: '0px 3px 3px -2px #{$_umbra-color}',
34+
4: '0px 2px 4px -1px #{$_umbra-color}',
35+
5: '0px 3px 5px -1px #{$_umbra-color}',
36+
6: '0px 3px 5px -1px #{$_umbra-color}',
37+
7: '0px 4px 5px -2px #{$_umbra-color}',
38+
8: '0px 5px 5px -3px #{$_umbra-color}',
39+
9: '0px 5px 6px -3px #{$_umbra-color}',
40+
10: '0px 6px 6px -3px #{$_umbra-color}',
41+
11: '0px 6px 7px -4px #{$_umbra-color}',
42+
12: '0px 7px 8px -4px #{$_umbra-color}',
43+
13: '0px 7px 8px -4px #{$_umbra-color}',
44+
14: '0px 7px 9px -4px #{$_umbra-color}',
45+
15: '0px 8px 9px -5px #{$_umbra-color}',
46+
16: '0px 8px 10px -5px #{$_umbra-color}',
47+
17: '0px 8px 11px -5px #{$_umbra-color}',
48+
18: '0px 9px 11px -5px #{$_umbra-color}',
49+
19: '0px 9px 12px -6px #{$_umbra-color}',
50+
20: '0px 10px 13px -6px #{$_umbra-color}',
51+
21: '0px 10px 13px -6px #{$_umbra-color}',
52+
22: '0px 10px 14px -6px #{$_umbra-color}',
53+
23: '0px 11px 14px -7px #{$_umbra-color}',
54+
24: '0px 11px 15px -7px #{$_umbra-color}'
55+
);
56+
57+
$_penumbra-elevation-map: (
58+
0: '0px 0px 0px 0px #{$_penumbra-color}',
59+
1: '0px 1px 1px 0px #{$_penumbra-color}',
60+
2: '0px 2px 2px 0px #{$_penumbra-color}',
61+
3: '0px 3px 4px 0px #{$_penumbra-color}',
62+
4: '0px 4px 5px 0px #{$_penumbra-color}',
63+
5: '0px 5px 8px 0px #{$_penumbra-color}',
64+
6: '0px 6px 10px 0px #{$_penumbra-color}',
65+
7: '0px 7px 10px 1px #{$_penumbra-color}',
66+
8: '0px 8px 10px 1px #{$_penumbra-color}',
67+
9: '0px 9px 12px 1px #{$_penumbra-color}',
68+
10: '0px 10px 14px 1px #{$_penumbra-color}',
69+
11: '0px 11px 15px 1px #{$_penumbra-color}',
70+
12: '0px 12px 17px 2px #{$_penumbra-color}',
71+
13: '0px 13px 19px 2px #{$_penumbra-color}',
72+
14: '0px 14px 21px 2px #{$_penumbra-color}',
73+
15: '0px 15px 22px 2px #{$_penumbra-color}',
74+
16: '0px 16px 24px 2px #{$_penumbra-color}',
75+
17: '0px 17px 26px 2px #{$_penumbra-color}',
76+
18: '0px 18px 28px 2px #{$_penumbra-color}',
77+
19: '0px 19px 29px 2px #{$_penumbra-color}',
78+
20: '0px 20px 31px 3px #{$_penumbra-color}',
79+
21: '0px 21px 33px 3px #{$_penumbra-color}',
80+
22: '0px 22px 35px 3px #{$_penumbra-color}',
81+
23: '0px 23px 36px 3px #{$_penumbra-color}',
82+
24: '0px 24px 38px 3px #{$_penumbra-color}'
83+
);
84+
85+
$_ambient-elevation-map: (
86+
0: '0px 0px 0px 0px #{$_ambient-color}',
87+
1: '0px 1px 3px 0px #{$_ambient-color}',
88+
2: '0px 1px 5px 0px #{$_ambient-color}',
89+
3: '0px 1px 8px 0px #{$_ambient-color}',
90+
4: '0px 1px 10px 0px #{$_ambient-color}',
91+
5: '0px 1px 14px 0px #{$_ambient-color}',
92+
6: '0px 1px 18px 0px #{$_ambient-color}',
93+
7: '0px 2px 16px 1px #{$_ambient-color}',
94+
8: '0px 3px 14px 2px #{$_ambient-color}',
95+
9: '0px 3px 16px 2px #{$_ambient-color}',
96+
10: '0px 4px 18px 3px #{$_ambient-color}',
97+
11: '0px 4px 20px 3px #{$_ambient-color}',
98+
12: '0px 5px 22px 4px #{$_ambient-color}',
99+
13: '0px 5px 24px 4px #{$_ambient-color}',
100+
14: '0px 5px 26px 4px #{$_ambient-color}',
101+
15: '0px 6px 28px 5px #{$_ambient-color}',
102+
16: '0px 6px 30px 5px #{$_ambient-color}',
103+
17: '0px 6px 32px 5px #{$_ambient-color}',
104+
18: '0px 7px 34px 6px #{$_ambient-color}',
105+
19: '0px 7px 36px 6px #{$_ambient-color}',
106+
20: '0px 8px 38px 7px #{$_ambient-color}',
107+
21: '0px 8px 40px 7px #{$_ambient-color}',
108+
22: '0px 8px 42px 7px #{$_ambient-color}',
109+
23: '0px 9px 44px 8px #{$_ambient-color}',
110+
24: '0px 9px 46px 8px #{$_ambient-color}'
111+
);
112+
113+
/**
114+
* The css property used for elevation. In most cases this should not be changed. It is exposed
115+
* as a variable for abstraction / easy use when needing to reference the property directly, for
116+
* example in a `will-change` rule.
117+
*/
118+
$md-elevation-property: box-shadow !default;
119+
120+
/**
121+
* The default duration value for elevation transitions.
122+
*/
123+
$md-elevation-transition-duration: 280ms !default;
124+
125+
/**
126+
* The default easing value for elevation transitions.
127+
*/
128+
$md-elevation-transition-timing-function: $md-fast-out-slow-in-timing-function;
129+
130+
/**
131+
* Applies the correct css rules to an element to give it the elevation specified by $zValue.
132+
* The $zValue must be between 0 and 24.
133+
*/
134+
@mixin md-elevation($zValue) {
135+
@if type-of($zValue) != number or not unitless($zValue) {
136+
@error "$zValue must be a unitless number";
137+
}
138+
@if $zValue < 0 or $zValue > 24 {
139+
@error "$zValue must be between 0 and 24";
140+
}
141+
142+
#{$md-elevation-property}: #{map-get($_umbra-elevation-map, $zValue)},
143+
#{map-get($_penumbra-elevation-map, $zValue)},
144+
#{map-get($_ambient-elevation-map, $zValue)};
145+
}
146+
147+
/**
148+
* Returns a string that can be used as the value for a `transition` property for elevation.
149+
* Calling this function directly is useful in situations where a component needs to transition
150+
* more than one property.
151+
*
152+
* ```scss
153+
* .foo {
154+
* transition: md-elevation-transition-rule(), opacity 100ms ease;
155+
* will-change: $md-elevation-property, opacity;
156+
* }
157+
* ```
158+
*/
159+
@function md-elevation-transition-rule(
160+
$duration: $md-elevation-transition-duration,
161+
$easing: $md-elevation-transition-timing-function) {
162+
@return #{$md-elevation-property} #{$duration} #{$easing};
163+
}
164+
165+
/**
166+
* Applies the correct css rules needed to have an element transition between elevations.
167+
* This mixin should be applied to elements whose elevation values will change depending on their
168+
* context (e.g. when active or disabled).
169+
*/
170+
// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
171+
// be used in the same way by clients.
172+
@mixin md-elevation-transition(
173+
$duration: $md-elevation-transition-duration,
174+
$easing: $md-elevation-transition-timing-function) {
175+
transition: md-elevation-transition-rule($duration, $easing);
176+
will-change: $md-elevation-property;
177+
}
178+
179+
// Provides external CSS classes for each elevation value. Each CSS class is formatted as
180+
// `md-elevation-z$zValue` where `$zValue` correspond to the z-space in which the element is
181+
// elevated to.
182+
@for $zValue from 0 through 24 {
183+
.md-elevation-z#{$zValue} {
184+
@include md-elevation($zValue);
185+
}
186+
}

‎src/core/style/_shadows.scss

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)