Add block wide expanded button class.

[mariosant]

This is an example implementation for the #585. It adds the following classes:

.pure-button-expanded
pure-button-sm-expanded
pure-button-md-expanded
pure-button-lg-expanded
pure-button-xl-expanded

It would be very important to note here that the responsive classes works the opposite way grid does. The case here, is a button to be expanded in smaller screens and normal in larger. So for example pure-button-sm-expanded has @media screen and (max-width: 35.5em) media query, which implements the behaviour described above.

What do you guys think?

[yahoocla]

Thank you for submitting this pull request, however I do not see a valid CLA on file for you. Before we can merge this request please visit https://yahoocla.herokuapp.com/ and agree to the terms. Thanks! 😄

[yahoocla]

CLA is valid!

[lkraav]

Thanks. Have to think this through. Might take a bit of time.

[mariosant]

No prob @lkraav. 👍

[redonkulus]

@mariosant maybe a dumb question, but why do we need the additional classes if they all set it the width to the same value (i.e. 100%)?

[mariosant]

@redonkulus not a dumb question at all! The additional classes expand the buttons on several viewport widths.

[redonkulus]

@mariosant I guess what I meant was that the default width is already 100% in your example:

.pure-button-expanded {
    width: 100%;
}

Why do you need to set the same width for all the break points?

[emkorybski]

Hello @mariosant ,

Would be good if you explained your proposed changes from conflicting files a bit more.
At the moment, similar to @redonkulus, I understand that all the additional classes that you proposed do the same thing as default Pure class for button.
Moreover, it does not stick with your explanation from the very beginning, where you explained your intention as

important to note here that the responsive classes works the opposite way grid does

Looking forward to your comment. Thanks in advance!

[mariosant]

Hi, I apologize for the delayed response. It has been a busy month and this slipped of my attention.

The need for this PR was an expanded button (width: 100%). Sometimes though, this needs to get done on smaller viewports, while not expanding on larger devices (think of mobile full width buttons).

By "opposite way" grid does, I mean that it expands on the breakpoint defined and smaller viewports.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

Issue was closed because of inactivity. If you think this is still a valid issue, please file a new issue with additional information.