Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

feat(elevation): Update mixin to accept theme color param #1449

Merged
merged 7 commits into from
Nov 3, 2017
Merged

feat(elevation): Update mixin to accept theme color param #1449

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
dffe295
feat(elevation): Update mixin to accept theme color param
acdvorak Oct 18, 2017
41d2155
WIP: Create variables for opacity values
acdvorak Oct 18, 2017
ab84f85
WIP: Extract variables to improve readability
acdvorak Oct 19, 2017
b0f154a
WIP: Add $opacity-boost param
acdvorak Oct 19, 2017
797dc23
Merge branch 'master' into feat/theme/elevation-mixins
acdvorak Nov 1, 2017
c4a204f
Merge branch 'master' into feat/theme/elevation-mixins
acdvorak Nov 3, 2017
78d98a1
WIP: Remove unnecessary param name
acdvorak Nov 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions demos/elevation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,21 +47,21 @@
background: white;
}

.hero .demo-surface {
width: 120px;
height: 48px;
margin: 24px 24px;
background-color: #212121;
color: #f0f0f0;
}

#hover-el {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
border-radius: 4px;
}

.hero .demo-surface {
width: 96px;
height: 48px;
margin: 24px 24px;
background-color: #212121;
color: #f0f0f0;
}
</style>
</head>
<body>
Expand All @@ -81,8 +81,11 @@
<figure class="demo-surface mdc-elevation--z0">
<figcaption>FLAT 0dp</figcaption>
</figure>
<figure class="demo-surface mdc-elevation--z4">
<figcaption>RAISED 4dp</figcaption>
<figure class="demo-surface mdc-elevation--z8">
<figcaption>RAISED 8dp</figcaption>
</figure>
<figure class="demo-surface demo-elevation--custom-color">
<figcaption>CUSTOM 16dp</figcaption>
</figure>
</section>

Expand Down
4 changes: 4 additions & 0 deletions demos/elevation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,7 @@

@import "../packages/mdc-elevation/mdc-elevation";
@import "../packages/mdc-typography/mdc-typography";

.demo-elevation--custom-color {
@include mdc-elevation(16, $color: secondary-dark, $opacity-boost: .1);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: why did you include the variable names here, when you're specifying all of them, in order, anyway?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could probably remove the $color name since it's pretty obvious what secondary-dark is. But for $opacity-boost, I think it's more readable to have the param name; without it, .1 is just a magical number that means who-knows-what, and you have to go read the documentation or source code to figure out what it does.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed $color!

}
2 changes: 1 addition & 1 deletion packages/mdc-elevation/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ CSS Class | Description

Mixin | Description
--- | ---
`mdc-elevation($z-value)` | Sets the elevation to the z-space for that given elevation
`mdc-elevation($z-value, $color, $opacity-boost)` | Sets the elevation to the z-space for that given elevation, and optionally sets the color and/or boosts the opacity of the shadow
`mdc-elevation-transition($duration, $easing)` | Applies the correct css rules to transition an element between elevations

Variable | Description
Expand Down
35 changes: 27 additions & 8 deletions packages/mdc-elevation/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,25 +14,44 @@
// limitations under the License.
//

@import "@material/theme/variables";
@import "./variables";

/**
* Applies the correct css rules to an element to give it the elevation specified by $z-value.
* Applies the correct CSS rules to an element to give it the elevation specified by $z-value.
* The $z-value must be between 0 and 24.
* If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use
* $opacity-boost.
*/
@mixin mdc-elevation($z-value) {
@mixin mdc-elevation($z-value, $color: $mdc-elevation-baseline-color, $opacity-boost: 0) {
@if type-of($z-value) != number or not unitless($z-value) {
@error "$z-value must be a unitless number";
@error "$z-value must be a unitless number, but received '#{$z-value}'";
}

@if $z-value < 0 or $z-value > 24 {
@error "$z-value must be between 0 and 24";
@error "$z-value must be between 0 and 24, but received '#{$z-value}'";
}

#{$mdc-elevation-property}:
#{"#{map-get($mdc-elevation-umbra-map, $z-value)} #{$mdc-elevation-umbra-color}"},
#{"#{map-get($mdc-elevation-penumbra-map, $z-value)} #{$mdc-elevation-penumbra-color}"},
#{map-get($mdc-elevation-ambient-map, $z-value)} $mdc-elevation-ambient-color;
@if map-has-key($mdc-theme-property-values, $color) {
$color: map-get($mdc-theme-property-values, $color);
}

@if type-of($color) != color {
@error "$color must be a valid color, but '#{$color}' is of type #{type-of($color)}";
}

$umbra-z-value: map-get($mdc-elevation-umbra-map, $z-value);
$penumbra-z-value: map-get($mdc-elevation-penumbra-map, $z-value);
$ambient-z-value: map-get($mdc-elevation-ambient-map, $z-value);

$umbra-color: rgba($color, $mdc-elevation-umbra-opacity + $opacity-boost);
$penumbra-color: rgba($color, $mdc-elevation-penumbra-opacity + $opacity-boost);
$ambient-color: rgba($color, $mdc-elevation-ambient-opacity + $opacity-boost);

box-shadow:
#{"#{$umbra-z-value} #{$umbra-color}"},
#{"#{$penumbra-z-value} #{$penumbra-color}"},
#{$ambient-z-value} $ambient-color;
}

/**
Expand Down
7 changes: 4 additions & 3 deletions packages/mdc-elevation/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@

@import "@material/animation/variables";

$mdc-elevation-umbra-color: rgba(black, .2);
$mdc-elevation-penumbra-color: rgba(black, .14);
$mdc-elevation-ambient-color: rgba(black, .12);
$mdc-elevation-baseline-color: black;
$mdc-elevation-umbra-opacity: .2;
$mdc-elevation-penumbra-opacity: .14;
$mdc-elevation-ambient-opacity: .12;

$mdc-elevation-umbra-map: (
0: "0px 0px 0px 0px",
Expand Down
3 changes: 2 additions & 1 deletion packages/mdc-elevation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"url": "https://github.com/material-components/material-components-web.git"
},
"dependencies": {
"@material/animation": "^0.4.1"
"@material/animation": "^0.4.1",
"@material/theme": "^0.4.0"
}
}