Fix for issue #54: input type="submit" should look like pure-button #64
Conversation
| .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], |
There was a problem hiding this comment.
I believe [readonly] should only be applied to texty inputs anyway, so I just left this as it was.
|
@tilomitra can you add HISTORY.md entries too? |
|
Does this mean that IE 6&7 get no input styles? |
IE7 supports attribute selectors. IE6 does not. |
|
@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; | ||
| } |
There was a problem hiding this comment.
This will also target "button-ish" types ("submit", "reset", "button"). Is that the intent?
There was a problem hiding this comment.
Yes, everything should be stacked in that form.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
You're right. I didn't catch that.
Only labels should be display:block. This allows the .pure-form-message* classes to work as expected.
|
🔔 |
| @@ -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) | |||
There was a problem hiding this comment.
Will this lead to any back-compat issues for some people?
There was a problem hiding this comment.
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.
…weeney-buttons Conflicts: src/forms/css/forms.css
|
@eric want to take a final look over this? |
|
No thanks. 😺 |
|
hehehe, I meant @ericf |
|
@tilomitra I pulled this down locally and it looks good. Merging it in now… |
This pull request targets
.pure-form inputstyles to only texty inputs. This fixes the issue of "buttony" inputs such assubmit,button, andresetlooking different from.pure-button.Here's the issue: #54
This PR adds a bunch of rules to
forms.cssbut the k-weight gain is minor when gzipped. Here's some k-weight info:Original forms.css
With this fix