feat(elevation): Add elevation core styles #222
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,179 @@ | ||
| /** | ||
| * A collection of mixins and CSS classes that can be used to apply elevation to a material | ||
| * element. | ||
| * See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html | ||
| * Examples: | ||
| * | ||
| * | ||
| * .md-foo { | ||
| * @include $md-elevation(2); | ||
| * | ||
| * &:active { | ||
| * @include $md-elevation(8); | ||
| * } | ||
| * } | ||
| * | ||
| * <div id="external-card" class="md-elevation-z2"><p>Some content</p></div> | ||
| * | ||
| * For an explanation of the design behind how elevation is implemented, see the design doc at | ||
| * https://goo.gl/Kq0k9Z. | ||
| */ | ||
|
|
||
| // Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation | ||
| // level is created using a set of 3 shadow values, one for umbra (the shadow representing the | ||
| // space completely obscured by an object relative to its light source), one for penumbra (the | ||
| // space partially obscured by an object), and one for ambient (the space which contains the object | ||
| // itself). For a further explanation of these terms and their meanings, see | ||
| // https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra. | ||
|
|
||
| $_umbra-color: rgba(black, 0.2); | ||
|
There was a problem hiding this comment. Are you able to comment on what each of |
||
| $_penumbra-color: rgba(black, 0.14); | ||
| $_ambient-color: rgba(black, 0.12); | ||
|
|
||
| // Maps for the different shadow sets and their values within each z-space. These values were | ||
| // created by taking a few reference shadow sets created by Google's Designers and interpolating | ||
| // all of the values between them. | ||
|
|
||
| $_umbra-elevation-map: ( | ||
|
There was a problem hiding this comment. Add comment that these values have been hand-tuned by Google's designers and can't quite be generated programmatically? (hand-crafted, artisanal box-shadows) |
||
| 0: '0px 0px 0px 0px #{$_umbra-color}', | ||
| 1: '0px 2px 1px -1px #{$_umbra-color}', | ||
| 2: '0px 3px 1px -2px #{$_umbra-color}', | ||
| 3: '0px 3px 3px -2px #{$_umbra-color}', | ||
| 4: '0px 2px 4px -1px #{$_umbra-color}', | ||
| 5: '0px 3px 5px -1px #{$_umbra-color}', | ||
| 6: '0px 3px 5px -1px #{$_umbra-color}', | ||
| 7: '0px 4px 5px -2px #{$_umbra-color}', | ||
| 8: '0px 5px 5px -3px #{$_umbra-color}', | ||
| 9: '0px 5px 6px -3px #{$_umbra-color}', | ||
| 10: '0px 6px 6px -3px #{$_umbra-color}', | ||
| 11: '0px 6px 7px -4px #{$_umbra-color}', | ||
| 12: '0px 7px 8px -4px #{$_umbra-color}', | ||
| 13: '0px 7px 8px -4px #{$_umbra-color}', | ||
| 14: '0px 7px 9px -4px #{$_umbra-color}', | ||
| 15: '0px 8px 9px -5px #{$_umbra-color}', | ||
| 16: '0px 8px 10px -5px #{$_umbra-color}', | ||
| 17: '0px 8px 11px -5px #{$_umbra-color}', | ||
| 18: '0px 9px 11px -5px #{$_umbra-color}', | ||
| 19: '0px 9px 12px -6px #{$_umbra-color}', | ||
| 20: '0px 10px 13px -6px #{$_umbra-color}', | ||
| 21: '0px 10px 13px -6px #{$_umbra-color}', | ||
| 22: '0px 10px 14px -6px #{$_umbra-color}', | ||
| 23: '0px 11px 14px -7px #{$_umbra-color}', | ||
| 24: '0px 11px 15px -7px #{$_umbra-color}' | ||
| ); | ||
|
|
||
| $_penumbra-elevation-map: ( | ||
| 0: '0px 0px 0px 0px #{$_penumbra-color}', | ||
| 1: '0px 1px 1px 0px #{$_penumbra-color}', | ||
| 2: '0px 2px 2px 0px #{$_penumbra-color}', | ||
| 3: '0px 3px 4px 0px #{$_penumbra-color}', | ||
| 4: '0px 4px 5px 0px #{$_penumbra-color}', | ||
| 5: '0px 5px 8px 0px #{$_penumbra-color}', | ||
| 6: '0px 6px 10px 0px #{$_penumbra-color}', | ||
| 7: '0px 7px 10px 1px #{$_penumbra-color}', | ||
| 8: '0px 8px 10px 1px #{$_penumbra-color}', | ||
| 9: '0px 9px 12px 1px #{$_penumbra-color}', | ||
| 10: '0px 10px 14px 1px #{$_penumbra-color}', | ||
| 11: '0px 11px 15px 1px #{$_penumbra-color}', | ||
| 12: '0px 12px 17px 2px #{$_penumbra-color}', | ||
| 13: '0px 13px 19px 2px #{$_penumbra-color}', | ||
| 14: '0px 14px 21px 2px #{$_penumbra-color}', | ||
| 15: '0px 15px 22px 2px #{$_penumbra-color}', | ||
| 16: '0px 16px 24px 2px #{$_penumbra-color}', | ||
| 17: '0px 17px 26px 2px #{$_penumbra-color}', | ||
| 18: '0px 18px 28px 2px #{$_penumbra-color}', | ||
| 19: '0px 19px 29px 2px #{$_penumbra-color}', | ||
| 20: '0px 20px 31px 3px #{$_penumbra-color}', | ||
| 21: '0px 21px 33px 3px #{$_penumbra-color}', | ||
| 22: '0px 22px 35px 3px #{$_penumbra-color}', | ||
| 23: '0px 23px 36px 3px #{$_penumbra-color}', | ||
| 24: '0px 24px 38px 3px #{$_penumbra-color}' | ||
| ); | ||
|
|
||
| $_ambient-elevation-map: ( | ||
| 0: '0px 0px 0px 0px #{$_ambient-color}', | ||
| 1: '0px 1px 3px 0px #{$_ambient-color}', | ||
| 2: '0px 1px 5px 0px #{$_ambient-color}', | ||
| 3: '0px 1px 8px 0px #{$_ambient-color}', | ||
| 4: '0px 1px 10px 0px #{$_ambient-color}', | ||
| 5: '0px 1px 14px 0px #{$_ambient-color}', | ||
| 6: '0px 1px 18px 0px #{$_ambient-color}', | ||
| 7: '0px 2px 16px 1px #{$_ambient-color}', | ||
| 8: '0px 3px 14px 2px #{$_ambient-color}', | ||
| 9: '0px 3px 16px 2px #{$_ambient-color}', | ||
| 10: '0px 4px 18px 3px #{$_ambient-color}', | ||
| 11: '0px 4px 20px 3px #{$_ambient-color}', | ||
| 12: '0px 5px 22px 4px #{$_ambient-color}', | ||
| 13: '0px 5px 24px 4px #{$_ambient-color}', | ||
| 14: '0px 5px 26px 4px #{$_ambient-color}', | ||
| 15: '0px 6px 28px 5px #{$_ambient-color}', | ||
| 16: '0px 6px 30px 5px #{$_ambient-color}', | ||
| 17: '0px 6px 32px 5px #{$_ambient-color}', | ||
| 18: '0px 7px 34px 6px #{$_ambient-color}', | ||
| 19: '0px 7px 36px 6px #{$_ambient-color}', | ||
| 20: '0px 8px 38px 7px #{$_ambient-color}', | ||
| 21: '0px 8px 40px 7px #{$_ambient-color}', | ||
| 22: '0px 8px 42px 7px #{$_ambient-color}', | ||
| 23: '0px 9px 44px 8px #{$_ambient-color}', | ||
| 24: '0px 9px 46px 8px #{$_ambient-color}' | ||
| ); | ||
|
|
||
| /** | ||
| * The css property used for elevation. In most cases this should not be changed. It is exposed | ||
| * as a variable for abstraction / easy use when needing to reference the property directly, for | ||
| * example in a will-change rule. | ||
| */ | ||
| $md-elevation-property: box-shadow !default; | ||
|
|
||
| /** The default duration value for elevation transitions. */ | ||
| $md-elevation-transition-duration: 280ms !default; | ||
|
|
||
| /** The default easing value for elevation transitions. */ | ||
| $md-elevation-transition-timing-function: $md-fast-out-slow-in-timing-function; | ||
|
|
||
| /** | ||
| * Applies the correct css rules to an element to give it the elevation specified by $zValue. | ||
| * The $zValue must be between 0 and 24. | ||
| */ | ||
| @mixin md-elevation($zValue) { | ||
| @if type-of($zValue) != number or not unitless($zValue) { | ||
| @error "$zValue must be a unitless number"; | ||
| } | ||
| @if $zValue < 0 or $zValue > 24 { | ||
| @error "$zValue must be between 0 and 24"; | ||
| } | ||
|
|
||
| #{$md-elevation-property}: #{map-get($_umbra-elevation-map, $zValue)}, | ||
| #{map-get($_penumbra-elevation-map, $zValue)}, | ||
| #{map-get($_ambient-elevation-map, $zValue)}; | ||
| } | ||
|
|
||
| /** | ||
| * Returns a string that can be used as the value for a transition property for elevation. | ||
| * Calling this function directly is useful in situations where a component needs to transition | ||
| * more than one property. | ||
| * | ||
| * .foo { | ||
| * transition: md-elevation-transition-property-value(), opacity 100ms ease; | ||
| * will-change: $md-elevation-property, opacity; | ||
| * } | ||
| */ | ||
| @function md-elevation-transition-property-value( | ||
| $duration: $md-elevation-transition-duration, | ||
| $easing: $md-elevation-transition-timing-function) { | ||
| @return #{$md-elevation-property} #{$duration} #{$easing}; | ||
| } | ||
|
There was a problem hiding this comment. It would be nice if we could think of a name that more clearly distinguishes this from the below
There was a problem hiding this comment. The CSSOM spec refers to this as a value, and refers to the receiver for the value as a property. How about |
||
|
|
||
| /** | ||
| * Applies the correct css rules needed to have an element transition between elevations. | ||
| * This mixin should be applied to elements whose elevation values will change depending on their | ||
| * context (e.g. when active or disabled). | ||
| */ | ||
| // NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can | ||
| // be used in the same way by clients. | ||
| @mixin md-elevation-transition( | ||
| $duration: $md-elevation-transition-duration, | ||
| $easing: $md-elevation-transition-timing-function) { | ||
| transition: md-elevation-transition-property-value($duration, $easing); | ||
| will-change: $md-elevation-property; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| // Core styles that can be used to apply material design treatments to any element. | ||
|
There was a problem hiding this comment. This is good for now, but FYI I'm going to move it to |
||
|
|
||
| @import 'elevation'; | ||
|
|
||
| // Provides external CSS classes for each elevation value. Each CSS class is formatted as | ||
| // `md-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is | ||
| // elevated. | ||
| @for $zValue from 0 through 24 { | ||
| .md-elevation-z#{$zValue} { | ||
| @include md-elevation($zValue); | ||
| } | ||
| } | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What will happen, when
ViewEncapsulationis disabled and you import theelevationstyles in those components. Won't that cause some duplicates?Or in general, how can the user access these classes? Will there be a standalone stylesheet?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If I understand your question correctly (which I think I do but I'm not 100%), I imagine that if the user imports a vendor style such as those from
ngMaterialonce in a top-level bootstrap file or avendor.ts-esque file, then these styles will only be loaded once and there won't be anyViewEncapsulationissues.I'm not as familiar with how angular caches loaded styles but would the framework be smart enough not to load styles more than once if the
ViewEncapsulationis disabled? If not, let me know what makes the most sense in terms of exporting these styles.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, I think you understand my question correctly. Let's take the standalone / bootstrap stylesheet for a moment out of the way.
I don't think Angular 2 scans the whole stylesheet for duplicate identifiers, that won't be even possible, since some selectors are just overriding a previous defined selector.
The point is, for example: we have the button component, which has view encapsulation disabled. (Source)
Then the buttons stylesheet will import the
_elevation.scssfile, this causes themd-elevation-z*classes to be generated.So now imagine, if you have more than one component, which includes the elevation and has
ViewEncapsulationdisabled. This will cause several generations of the same classes.In my opinion we should separate between a bootstrap / standalone stylesheet and the styles which are dynamically inserted into the DOM.
Removing those class generation would be also possible, since the mixins will only generate the specific elevation (thats awesome!)