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

feat(button): Setup elevation overlay #5256

Merged
merged 3 commits into from
Nov 15, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 4 additions & 1 deletion packages/mdc-button/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
$feat-structure: mdc-feature-create-target($query, structure);

@include mdc-touch-target-wrapper($query);
@include mdc-elevation-overlay-common($query);

// postcss-bem-linter: define button
.mdc-button {
Expand Down Expand Up @@ -386,10 +387,12 @@ $query: mdc-feature-all()) {

@include mdc-typography(button, $query);
@include mdc-button-horizontal-padding($mdc-button-horizontal-padding, $query);
@include mdc-elevation-overlay-surface-position($query: $query);
@include mdc-elevation-overlay-size(100%, $query: $query);

@include mdc-feature-targets($feat-structure) {
display: inline-flex;
position: relative;
// position: relative; already set in mdc-elevation-overlay-surface-position
align-items: center;
justify-content: center;
box-sizing: border-box;
Expand Down
2 changes: 1 addition & 1 deletion packages/mdc-elevation/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ Mixin | Description
`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-overlay-common` | Called once per application to setup the universal elevation overlay styles
`mdc-elevation-shadow($box-shadow)` | Sets the `box-shadow` of the closest parent selector
`mdc-elevation-overlay-parent` | Sets the positioning of the overlay's parent element so that the overlay can be appropriately centered
`mdc-elevation-overlay-surface-position` | Sets the positioning of the overlay's surface element so that the overlay can be appropriately centered
`mdc-elevation-overlay-size($width, $height: $width)` | Sets the width and height of the elevation overlay
`mdc-elevation-overlay-fill-color($color)` | Sets the color of the elevation overlay
`mdc-elevation-overlay-opacity($opacity)` | Sets the opacity of the elevation overlay
Expand Down
4 changes: 2 additions & 2 deletions packages/mdc-elevation/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,9 @@
}

///
/// Sets the elevation overlay parent required positioning.
/// Sets the elevation overlay surface required positioning.
///
@mixin mdc-elevation-overlay-parent($query: mdc-feature-all()) {
@mixin mdc-elevation-overlay-surface-position($query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);

@include mdc-feature-targets($feat-structure) {
Expand Down