step-style: add <a><paper-button> styling #51
Conversation
All this time we've had the following "download" paper-button structure
on the official website at g.co/codelabs:
<a href="..."><paper-button>download</paper-button></a>
Note that this is in accordance with the Polymer 1.0 recommendation
in https://elements.polymer-project.org/bower_components/paper-button/demo/index.html
Unfortunately, this is not how codelab-components were styled all this
time. A demo codelab has the inverse structure:
<paper-button><a href="...">download</a></paper-button>
Here's where it's used in codelab-components repo:
https://github.com/googlecodelabs/codelab-components/blob/7397f708d210dfbb7348084033a32ba070ec4df4/demo/codelab.html#L74
As a consequence, the styling Will provided in a recent change in
f3e63d5
used the latter structure. We never noticed the difference because
before the styling refresh, the download button background and link
colors were very close.
| @@ -194,6 +194,13 @@ | |||
| color: inherit !important; | |||
| } | |||
|
|
|||
| .instructions ::content a paper-button { | |||
There was a problem hiding this comment.
couldnt you just target .instructions ::content a and use text-decoration: none;?
There was a problem hiding this comment.
But that would remove the underline from all regular links as well, wouldn't it?
I was convinced the underline text-decoration is encouraged in material design spec, but I'm far from an expert. Either way, we've always had underline on regular links, so I just wanted to preserve that styling.
There was a problem hiding this comment.
Right. I gotcha.
Do you need a text-align:center;?
There was a problem hiding this comment.
Hm... maybe I'm looking in a difference place but I don't see that:
Also, I think text-align wouldn't play much role here because the button is supposed to grow up to the contents size, so I assumed it would also be centered.
There was a problem hiding this comment.
Ah, sorry, I think I know what you mean. 1 sec...
There was a problem hiding this comment.
So, yeah the default computed text-align is start. Changing it to center or something else doesn't seem to have any effect though. I believe this is because there's actually no blank space to center it around and the way to center would be changing paddings/margins but I'm not sure this is a good idea. Besides, it doesn't look too bad:
WDYT?
There was a problem hiding this comment.
Yea that looks fine. I was seeing it on the buttons without icons.
|
LGTM |
All this time we've had the following "download" paper-button structure
on the official website at https://g.co/codelabs:
Note that this is in accordance with the Polymer 1.0 recommendation
in https://elements.polymer-project.org/bower_components/paper-button/demo/index.html
Unfortunately, this is not how codelab-components were styled all this
time. A demo codelab has the inverse structure:
Here's where it's used in codelab-components repo:
codelab-components/demo/codelab.html
Line 74 in 7397f70
As a consequence, the styling Will provided in a recent change in f3e63d5 used the latter structure. We never noticed the difference because before the styling refresh, the download button background and link
colors were very close.
All this change really does is it removes the text underline. The rest of the styling already matches.