Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix for issue #54: input type="submit" should look like pure-button #64

Merged
merged 5 commits into from
Jun 8, 2013

Conversation

tilomitra
Copy link
Contributor

This pull request targets .pure-form input styles to only texty inputs. This fixes the issue of "buttony" inputs such as submit, button, and reset looking different from .pure-button.

Here's the issue: #54

This PR adds a bunch of rules to forms.css but the k-weight gain is minor when gzipped. Here's some k-weight info:

Original forms.css

File build/forms-min.css created.
Original: 8401 bytes.
Minified: 4975 bytes.
Gzipped:  909 bytes.

With this fix

File build/forms-min.css created.
Original: 9880 bytes.
Minified: 6336 bytes.
Gzipped:  1050 bytes.

.pure-form input[type="number"][disabled],
.pure-form input[type="search"][disabled],
.pure-form input[type="tel"][disabled],
.pure-form input[type="color"][disabled],
.pure-form select[disabled],
.pure-form textarea[disabled],
.pure-form input[readonly],
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I believe [readonly] should only be applied to texty inputs anyway, so I just left this as it was.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Yeah, sounds reasonable.

@ericf
Copy link
Collaborator

ericf commented Jun 5, 2013

@tilomitra can you add HISTORY.md entries too?

@ericf
Copy link
Collaborator

ericf commented Jun 5, 2013

Does this mean that IE 6&7 get no input styles?

@tilomitra
Copy link
Contributor Author

Does this mean that IE 6&7 get no input styles?

IE7 supports attribute selectors. IE6 does not.

@tilomitra
Copy link
Contributor Author

@msweeney Want to take a look at this?

.pure-form.pure-form-stacked label {
.pure-form-stacked input,
.pure-form-stacked select,
.pure-form-stacked label {
display: block;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

This will also target "button-ish" types ("submit", "reset", "button"). Is that the intent?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, everything should be stacked in that form.

Copy link
Contributor

Choose a reason for hiding this comment

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

This is a breaking change. Currently button-ish text types layout inline in a pure-stacked-form: http://jsfiddle.net/pQLS2/, but after this change they are stacked: http://jsfiddle.net/YTKfv/. Unless the buttons also fill the entire width, the inline layout seems preferable in this context.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

You're right. I didn't catch that.

@tilomitra
Copy link
Contributor Author

🔔

@@ -19,6 +19,13 @@ NEXT

* `<textarea>`s now have the same styling as `<input>`s. (Issue #49) (rcbdev)

* `.pure-form input` rules are now more specific, targetting only "texty" inputs.
This prevents input styles from affecting "buttony" inputs. (Issue #54)
Copy link
Collaborator

Choose a reason for hiding this comment

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

Will this lead to any back-compat issues for some people?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

No. This was a bug in 0.1.0. In the older version, input[type='text'] was display:block which meant that you couldn't place an inline help message beside it. We didn't catch this in our tests.

@tilomitra
Copy link
Contributor Author

@eric want to take a final look over this?

@eric
Copy link

eric commented Jun 7, 2013

No thanks. 😺

@tilomitra
Copy link
Contributor Author

hehehe, I meant @ericf

@ericf
Copy link
Collaborator

ericf commented Jun 8, 2013

@tilomitra I pulled this down locally and it looks good. Merging it in now…

@ericf ericf merged commit 2e357aa into pure-css:master Jun 8, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants