library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2024-11-24 10:44:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'consistent-buttons' of github.com:tilomitra/kimono into consistent-buttons

Browse Source 
Conflicts:
	src/forms/css/forms.css
This commit is contained in:
Eric Ferraiuolo 2013-06-07 23:01:19 -04:00
commit 9d6410646f
5 changed files with 156 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
HISTORY.md
View File

@ -38,6 +38,10 @@ NEXT
* `<textarea>`s now have the same styling as `<input>`s. (Issue #49) (rcbdev) * `<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)
### Grids ### Grids
* Adding a classname before the responsive grid's unit classname now works. * Adding a classname before the responsive grid's unit classname now works.

14
src/buttons/tests/manual/button.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<title>Button Manual Tests</title> <title>Button Manual Tests</title>
<link rel="stylesheet" type="text/css" href="../../../../build/buttons-min.css"> <link rel="stylesheet" type="text/css" href="../../../../build/pure-min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome-ie7.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome-ie7.css" rel="stylesheet">
@ -115,5 +115,17 @@
cillum dolore eu fugiat <a href="#">nulla pariatur</a>. Excepteur sint occaecat cupidatat non cillum dolore eu fugiat <a href="#">nulla pariatur</a>. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> </p>
<div class= "pure-g-r">
<div class= "pure-u-1">
<form class="pure-form">
<a class="pure-button pure-button-primary">Anchor</a>
<button class="pure-button pure-button-primary">Button</button>
<input type="submit" class="pure-button pure-button-primary" value="Submit" />
<input type="button" class="pure-button pure-button-primary" value="Input Button" />
<input type="reset" class="pure-button pure-button-primary" value="Reset" />
</form>
</div>
</div>
</body> </body>
</html> </html>

81
src/forms/css/forms-r.css
View File

@ -1,34 +1,61 @@
@media only screen and (max-width : 480px) { @media only screen and (max-width : 480px) {
.pure-form button[type='submit'] { .pure-form button[type="submit"] {
margin: 0.7em 0 0; margin: 0.7em 0 0;
} }
.pure-form input[type='text'], .pure-form button, .pure-form label { .pure-form input[type="text"],
margin-bottom: 0.3em; .pure-form input[type="password"],
display: block; .pure-form input[type="email"],
} .pure-form input[type="url"],
.pure-form input[type="date"],
.pure-form input[type="month"],
.pure-form input[type="time"],
.pure-form input[type="datetime"],
.pure-form input[type="datetime-local"],
.pure-form input[type="week"],
.pure-form input[type="number"],
.pure-form input[type="search"],
.pure-form input[type="tel"],
.pure-form input[type="color"],
.pure-form label {
margin-bottom: 0.3em;
display: block;
}
.pure-group input[type='text'] { .pure-group input[type="text"],
margin-bottom: 0; .pure-form input[type="password"],
} .pure-form input[type="email"],
.pure-form input[type="url"],
.pure-form input[type="date"],
.pure-form input[type="month"],
.pure-form input[type="time"],
.pure-form input[type="datetime"],
.pure-form input[type="datetime-local"],
.pure-form input[type="week"],
.pure-form input[type="number"],
.pure-form input[type="search"],
.pure-form input[type="tel"],
.pure-form input[type="color"] {
margin-bottom: 0;
}
.pure-form-aligned .pure-control-group label { .pure-form-aligned .pure-control-group label {
margin-bottom: 0.3em; margin-bottom: 0.3em;
text-align: left; text-align: left;
display: block; display: block;
width: 100%; width: 100%;
} }
.pure-form-aligned .pure-controls { .pure-form-aligned .pure-controls {
margin: 1.5em 0 0 0; margin: 1.5em 0 0 0;
} }
/* note: pure-help-inline is deprecated. Use .pure-form-message-inline instead */ /* note: pure-help-inline is deprecated. Use .pure-form-message-inline instead */
.pure-form .pure-help-inline, .pure-form .pure-help-inline,
.pure-form-message-inline, .pure-form-message-inline,
.pure-form-message { .pure-form-message {
display: block; display: block;
font-size: 80%; font-size: 80%;
padding: 0.2em 0 0.8em; /* increased bottom padding to make it group with its related input element */ padding: 0.2em 0 0.8em; /* increased bottom padding to make it group with its related input element */
} }
} }

64
src/forms/css/forms.css
View File

@ -1,4 +1,17 @@
.pure-form input, .pure-form input[type="text"],
.pure-form input[type="password"],
.pure-form input[type="email"],
.pure-form input[type="url"],
.pure-form input[type="date"],
.pure-form input[type="month"],
.pure-form input[type="time"],
.pure-form input[type="datetime"],
.pure-form input[type="datetime-local"],
.pure-form input[type="week"],
.pure-form input[type="number"],
.pure-form input[type="search"],
.pure-form input[type="tel"],
.pure-form input[type="color"],
.pure-form select, .pure-form select,
.pure-form textarea { .pure-form textarea {
padding: 0.5em 0.6em; padding: 0.5em 0.6em;
@ -18,13 +31,27 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.pure-form input:focus, .pure-form input[type="text"]:focus,
.pure-form input[type="password"]:focus,
.pure-form input[type="email"]:focus,
.pure-form input[type="url"]:focus,
.pure-form input[type="date"]:focus,
.pure-form input[type="month"]:focus,
.pure-form input[type="time"]:focus,
.pure-form input[type="datetime"]:focus,
.pure-form input[type="datetime-local"]:focus,
.pure-form input[type="week"]:focus,
.pure-form input[type="number"]:focus,
.pure-form input[type="search"]:focus,
.pure-form input[type="tel"]:focus,
.pure-form input[type="color"]:focus,
.pure-form select:focus, .pure-form select:focus,
.pure-form textarea:focus { .pure-form textarea:focus {
outline: 0; outline: 0;
outline: thin dotted \9; /* IE6-9 */ outline: thin dotted \9; /* IE6-9 */
border-color: #129FEA; border-color: #129FEA;
} }
.pure-form input[type="file"]:focus, .pure-form input[type="file"]:focus,
.pure-form input[type="radio"]:focus, .pure-form input[type="radio"]:focus,
.pure-form input[type="checkbox"]:focus { .pure-form input[type="checkbox"]:focus {
@ -36,7 +63,20 @@
margin: 0.5em 0; margin: 0.5em 0;
display: block; display: block;
} }
.pure-form input[disabled], .pure-form input[type="text"][disabled],
.pure-form input[type="password"][disabled],
.pure-form input[type="email"][disabled],
.pure-form input[type="url"][disabled],
.pure-form input[type="date"][disabled],
.pure-form input[type="month"][disabled],
.pure-form input[type="time"][disabled],
.pure-form input[type="datetime"][disabled],
.pure-form input[type="datetime-local"][disabled],
.pure-form input[type="week"][disabled],
.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 select[disabled],
.pure-form textarea[disabled], .pure-form textarea[disabled],
.pure-form input[readonly], .pure-form input[readonly],
@ -90,7 +130,20 @@
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
.pure-form-stacked input[type='text'], .pure-form-stacked input[type="text"],
.pure-form-stacked input[type="password"],
.pure-form-stacked input[type="email"],
.pure-form-stacked input[type="url"],
.pure-form-stacked input[type="date"],
.pure-form-stacked input[type="month"],
.pure-form-stacked input[type="time"],
.pure-form-stacked input[type="datetime"],
.pure-form-stacked input[type="datetime-local"],
.pure-form-stacked input[type="week"],
.pure-form-stacked input[type="number"],
.pure-form-stacked input[type="search"],
.pure-form-stacked input[type="tel"],
.pure-form-stacked input[type="color"],
.pure-form-stacked select, .pure-form-stacked select,
.pure-form-stacked label { .pure-form-stacked label {
display: block; display: block;
@ -99,7 +152,8 @@
.pure-form-aligned input, .pure-form-aligned input,
.pure-form-aligned textarea, .pure-form-aligned textarea,
.pure-form-aligned select, .pure-form-aligned select,
.pure-form-aligned .pure-help-inline, /* note: pure-help-inline is deprecated. Use .pure-form-message-inline instead */ /* note: pure-help-inline is deprecated. Use .pure-form-message-inline instead */
.pure-form-aligned .pure-help-inline,
.pure-form-message-inline { .pure-form-message-inline {
display: inline-block; display: inline-block;
*display: inline; /* IE7 inline-block hack */ *display: inline; /* IE7 inline-block hack */

30
src/forms/tests/manual/forms.html
View File

@ -4,6 +4,7 @@
<meta charset='utf-8'> <meta charset='utf-8'>
<meta name="viewport" content="width = device-width"> <meta name="viewport" content="width = device-width">
<title>Forms CSS Manual Test</title> <title>Forms CSS Manual Test</title>
<link rel="stylesheet" type="text/css" href="../../../../build/base-min.css">
<link rel="stylesheet" type="text/css" href="../../../../build/grids-min.css"> <link rel="stylesheet" type="text/css" href="../../../../build/grids-min.css">
<link rel="stylesheet" type="text/css" href="../../../../build/forms-min.css"> <link rel="stylesheet" type="text/css" href="../../../../build/forms-min.css">
<link rel="stylesheet" type="text/css" href="../../../../build/buttons-min.css"> <link rel="stylesheet" type="text/css" href="../../../../build/buttons-min.css">
@ -50,8 +51,8 @@
<input type="text"> <input type="text">
</div> </div>
<div class='pure-u-1-3'> <div class='pure-u-1-3'>
<label>Last Name</label> <label>Password</label>
<input type="text"> <input type="password">
</div> </div>
<div class='pure-u-1-3'> <div class='pure-u-1-3'>
<label>E-Mail</label> <label>E-Mail</label>
@ -78,6 +79,7 @@
<input type="checkbox"> I've read the terms and conditions <input type="checkbox"> I've read the terms and conditions
</label> </label>
<button type="submit" class='pure-button'>Submit</button> <button type="submit" class='pure-button'>Submit</button>
<button type="reset" class='pure-button'>Reset</button>
</fieldset> </fieldset>
</form> </form>
@ -92,13 +94,15 @@
<legend>Legend</legend> <legend>Legend</legend>
<label>First Name</label> <label>First Name</label>
<input type="text"> <input type="text">
<label>Last Name</label> <label>Password</label>
<input type="text"> <input type="password">
<label>E-Mail</label> <label>E-Mail</label>
<input type="email" required> <input type="email" required>
<aside class='pure-help-inline'>This is a required field.</aside> <aside class='pure-help-inline'>This is a required field.</aside>
<label>City</label> <label>City</label>
<input type="text"> <input type="text">
<aside class='pure-form-message'>This is another required field.</aside>
<label>State</label> <label>State</label>
<select class='pure-input-medium'> <select class='pure-input-medium'>
<option>AL</option> <option>AL</option>
@ -111,6 +115,8 @@
<input type="checkbox"> I've read the terms and conditions <input type="checkbox"> I've read the terms and conditions
</label> </label>
<button type="submit" class='pure-button notice'>Submit</button> <button type="submit" class='pure-button notice'>Submit</button>
<button type="reset" class='pure-button'>Reset</button>
</fieldset> </fieldset>
</form> </form>
@ -136,6 +142,10 @@
<label>Email Address</label> <label>Email Address</label>
<input type="text" placeholder="Email Address"> <input type="text" placeholder="Email Address">
</div> </div>
<div class="pure-control-group">
<label>Here's a button</label>
<input type="button" value="Button" class="pure-button">
</div>
<div class="pure-control-group"> <div class="pure-control-group">
<label>Supercalifragilistic Label</label> <label>Supercalifragilistic Label</label>
@ -298,5 +308,17 @@
</fieldset> </fieldset>
</form> </form>
</div> </div>
<div class= "pure-g-r">
<div class= "pure-u-1">
<form class="pure-form">
<a class="pure-button pure-button-primary">Anchor</a>
<button class="pure-button pure-button-primary">Button</button>
<input type="submit" class="pure-button pure-button-primary" value="Submit" />
<input type="button" class="pure-button pure-button-primary" value="Input Button" />
<input type="reset" class="pure-button pure-button-primary" value="Reset" />
</form>
</div>
</div>
</body> </body>
</html> </html>