Closed notwaldorf closed 8 years ago
I have the same issue. Setting the paper-material height helps, but the vertical alignment of the button text is still off:
.button::shadow paper-material{
height:8px;
}
Found a work-around: the problem is resolved when you manipulate the size of the button by adjusting the font-size only, which in turn resizes the button
When I compared the old paper-button
(0.5.5) to the new paper-button
(1.0.1) I noticed three key things:
paper-material
element has replaced the paper-shadow
element which was used in 0.5.6 to provide the raised effectpaper-material
element has been given the wrong CSS and does not fill the button as the paper-shadow
did in 0.5.5div.button-content
to which padding was applied to fill out the button to a reasonable size surrounding the label and any icon when included.Once the CSS that was applied to paper-shadow
(via the fit
class) is applied to paper-material
, as in:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
and the padding that was applied to div.button-content
is applied to paper-button
, as in:
padding: 0.7em 0.57em;
we achieve equivalent appearance between the 0.5.5 paper-button and the 1.0.1 paper-button.
I believe this remedy can and should be applied at the component level as in:
<style>
:host {
display: inline-block;
position: relative;
box-sizing: border-box;
min-width: 5.14em;
margin: 0 0.29em;
padding: 0.7em 0.57em;
background: transparent;
text-align: center;
font: inherit;
text-transform: uppercase;
outline: none;
border-radius: 3px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
z-index: 0;
@apply(--paper-button);
}
...
/* Delete the padding applied to .content */
</style>
and
...
_computeContentClass: function(receivedFocusFromKeyboard) {
var className = 'content fit ';
if (receivedFocusFromKeyboard) {
className += ' keyboard-focus';
}
return className;
}
...
I submitted a PR for this.
Ignore my post above since it is due to an incompatibility between Meteor and Polymer with Shady DOM. The PR has also been withdrawn.
I have:
and
<paper-button class="button" raised>eeeek</paper-button>
just dumped in the body, and this ends up looking like this: