Fix padding for links inside of paper-items

[miztroh-zz]

Fixes #14

[Nemo64]

I don't know if this solution is the most pretty, but it's definitely better than the current state.

[ssorallen]

Rather than use negative margins, maybe paper-item should expect a single a or span child inside its content and move the padding currently on .button-content into that child.

polyfill-next-selector { content: '.button-content > span'; }
::content > span {
  padding: 0.9em 1em;
}

polyfill-next-selector { content: '.button-content > a'; }
::content > a {
  padding: 0.9em 1em;
}

[Nemo64]

But there isn't always a link in it and I don't want to remove the styles
of it every time I want a button and I don't want a useless href.

What about making the paper item have an optional parameter href which will
include the a in the element itself and also removes special link styles
with the value inherit?

Ross Allen notifications@github.com schrieb am Di., 24. Feb. 2015 00:10:

Rather than use negative margins, maybe paper-item should expect a single
a or span child inside its content and move the padding currently on
.button-content into that child.

polyfill-next-selector { content: '.button-content > span'; }
::content > span {
padding: 0.9em 1em;
}

polyfill-next-selector { content: '.button-content > a'; }
::content > a {
padding: 0.9em 1em;
}

—
Reply to this email directly or view it on GitHub
#17 (comment).

[ssorallen]

Yup agreed on the not-always-an-anchor, which is why I added the child span selector: either content is wrapped in a span and is not linkable or an anchor.

[ssorallen]

I'd err on the side of composition: let the user include an <a> with an href rather than add another new attribute to this custom element.

[askibinski]

Does this fix also take in account setting the active state of a paper-item?