-
Notifications
You must be signed in to change notification settings - Fork 6.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(elevation): Add elevation core styles #222
Conversation
// `md-elevation-z$zValue` where `$zValue` correspond to the z-space in which the element is | ||
// elevated to. | ||
@for $zValue from 0 through 24 { | ||
.md-elevation-z#{$zValue} { |
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.
In Material 1, we deprecated the z
suffix, and decided to use dp
. Is here another background?
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.
I talk about this in the design doc. Essentially, z-space makes more sense to speak about elevation on the web platform. dp
works great for a design spec but possibly isn't as semantic for web developers.
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.
I agree with you. dp
always remembers me on a native app. Device Specific unit etc. I was just curious, because we deprecated those in Material 1.
* https://goo.gl/Kq0k9Z. | ||
*/ | ||
|
||
$_umbra-color: rgba(black, 0.2); |
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.
Are you able to comment on what each of umbra
, penumbra
and ambient
mean?
@traviskaufman The CI is failing due to the ``` characters in elevation.scss, which the |
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 angular#48.
99ed7ff
to
3899a52
Compare
@jelbourn all changes made and CI issue fixed I moved the exported CSS classes into |
@@ -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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is good for now, but FYI I'm going to move it to src/main.scss
once my outstanding PR lands.
LGTM Would be good if one of @kara / @hansl / @robertmesserle also took a look |
👍 this LGTM. |
At risk of getting the famous "we haven't done theming yet" response, is there a way to use |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
This commit replaces
_shadows.scss
withinsrc/core/styles
with_elevation.scss
, according to the proposed design outlinedhere. 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.