Skip to content
This repository was archived by the owner on Dec 19, 2024. It is now read-only.

Fix transition to use correct translateY for vertical alignment #87

Open
pik wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix transition to use correct translateY for vertical alignment #87

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
18 changes: 16 additions & 2 deletions paper-toast.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,17 @@
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
opacity: 0;
@apply(--paper-font-common-base);
}

:host(.vertical-align-bottom) {
-webkit-transform: translateY(100px);
transform: translateY(100px);
@apply(--paper-font-common-base);
}

:host(.vertical-align-top) {

@valdrinkoshi valdrinkoshi Apr 17, 2017 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

you could only add this new style, with a selector :host([vertical-align="top"])

-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}

:host(.capsule) {
Expand Down Expand Up @@ -150,7 +158,8 @@
*/
verticalAlign: {
type: String,
value: 'bottom'
value: 'bottom',
observer: '_verticalAlign'
},

/**
Expand Down Expand Up @@ -218,6 +227,11 @@
Polymer.IronA11yAnnouncer.requestAvailability();
},

// Setup the correct translateY based on vertical alignmnet
_verticalAlign: function(verticalAlign) {
this.classList.add('vertical-align-' + verticalAlign)
},

/**
* Show the toast. Without arguments, this is the same as `open()` from `IronOverlayBehavior`.
* @param {(Object|string)=} properties Properties to be set before opening the toast.
Expand Down