forms.css in purecss-0.4.2

- old
+ new

@@ -1,8 +1,8 @@
 /*!
-Pure v0.3.1-pre
-Copyright 2013 Yahoo! Inc. All rights reserved.
+Pure v0.5.0-pre
+Copyright 2014 Yahoo! Inc. All rights reserved.
 Licensed under the BSD License.
 https://github.com/yui/pure/blob/master/LICENSE.md
 */
 .pure-form input[type="text"],
 .pure-form input[type="password"],
@@ -21,23 +21,40 @@
 .pure-form select,
 .pure-form textarea {
     padding: 0.5em 0.6em;
     display: inline-block;
     border: 1px solid #ccc;
-    font-size: 0.8em;
     box-shadow: inset 0 1px 3px #ddd;
     border-radius: 4px;
-    -webkit-transition: 0.3s linear border;
-    -moz-transition: 0.3s linear border;
-    -ms-transition: 0.3s linear border;
-    -o-transition: 0.3s linear border;
-    transition: 0.3s linear border;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 
+/*
+Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
+since IE8 won't execute CSS that contains a CSS3 selector.
+*/
+.pure-form input:not([type]) {
+    padding: 0.5em 0.6em;
+    display: inline-block;
+    border: 1px solid #ccc;
+    box-shadow: inset 0 1px 3px #ddd;
+    border-radius: 4px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+
+/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
+/* May be able to remove this tweak as color inputs become more standardized across browsers. */
+.pure-form input[type="color"] {
+    padding: 0.2em 0.5em;
+}
+
+
 .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,
@@ -55,10 +72,20 @@
     outline: 0;
     outline: thin dotted \9; /* IE6-9 */
     border-color: #129FEA;
 }
 
+/*
+Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
+since IE8 won't execute CSS that contains a CSS3 selector.
+*/
+.pure-form input:not([type]):focus {
+    outline: 0;
+    outline: thin dotted \9; /* IE6-9 */
+    border-color: #129FEA;
+}
+
 .pure-form input[type="file"]:focus,
 .pure-form input[type="radio"]:focus,
 .pure-form input[type="checkbox"]:focus {
     outline: thin dotted #333;
     outline: 1px auto #129FEA;
@@ -66,10 +93,11 @@
 .pure-form .pure-checkbox,
 .pure-form .pure-radio {
     margin: 0.5em 0;
     display: block;
 }
+
 .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],
@@ -86,10 +114,20 @@
 .pure-form textarea[disabled] {
     cursor: not-allowed;
     background-color: #eaeded;
     color: #cad2d3;
 }
+
+/*
+Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
+since IE8 won't execute CSS that contains a CSS3 selector.
+*/
+.pure-form input:not([type])[disabled] {
+    cursor: not-allowed;
+    background-color: #eaeded;
+    color: #cad2d3;
+}
 .pure-form input[readonly],
 .pure-form select[readonly],
 .pure-form textarea[readonly] {
     background: #eee; /* menu hover bg color */
     color: #777; /* menu text color */
@@ -98,11 +136,11 @@
 
 .pure-form input:focus:invalid,
 .pure-form textarea:focus:invalid,
 .pure-form select:focus:invalid {
     color: #b94a48;
-    border: 1px solid #ee5f5b;
+    border-color: #ee5f5b;
 }
 .pure-form input:focus:invalid:focus,
 .pure-form textarea:focus:invalid:focus,
 .pure-form select:focus:invalid:focus {
     border-color: #e9322d;
@@ -119,11 +157,10 @@
 .pure-form select[multiple] {
     height: auto;
 }
 .pure-form label {
     margin: 0.5em 0 0.2em;
-    font-size: 90%;
 }
 .pure-form fieldset {
     margin: 0;
     padding: 0.35em 0 0.75em;
     border: 0;
@@ -131,11 +168,10 @@
 .pure-form legend {
     display: block;
     width: 100%;
     padding: 0.3em 0;
     margin-bottom: 0.3em;
-    font-size: 125%;
     color: #333;
     border-bottom: 1px solid #e5e5e5;
 }
 
 .pure-form-stacked input[type="text"],
@@ -157,10 +193,18 @@
 .pure-form-stacked textarea {
     display: block;
     margin: 0.25em 0;
 }
 
+/*
+Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
+since IE8 won't execute CSS that contains a CSS3 selector.
+*/
+.pure-form-stacked input:not([type]) {
+    display: block;
+    margin: 0.25em 0;
+}
 .pure-form-aligned input,
 .pure-form-aligned textarea,
 .pure-form-aligned select,
 /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
 .pure-form-aligned .pure-help-inline,
@@ -168,10 +212,13 @@
     display: inline-block;
     *display: inline;
     *zoom: 1;
     vertical-align: middle;
 }
+.pure-form-aligned textarea {
+    vertical-align: top;
+}
 
 /* Aligned Forms */
 .pure-form-aligned .pure-control-group {
     margin-bottom: 0.5em;
 }
@@ -242,25 +289,26 @@
 .pure-form-message-inline {
     display: inline-block;
     padding-left: 0.3em;
     color: #666;
     vertical-align: middle;
-    font-size: 90%;
+    font-size: 0.875em;
 }
 
 /* Block help for forms */
 .pure-form-message {
     display: block;
     color: #666;
-    font-size: 90%;
+    font-size: 0.875em;
 }
 
 @media only screen and (max-width : 480px) {
     .pure-form button[type="submit"] {
         margin: 0.7em 0 0;
     }
 
+    .pure-form input:not([type]),
     .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"],
@@ -276,10 +324,11 @@
     .pure-form label {
         margin-bottom: 0.3em;
         display: block;
     }
 
+    .pure-group input:not([type]),
     .pure-group input[type="text"],
     .pure-group input[type="password"],
     .pure-group input[type="email"],
     .pure-group input[type="url"],
     .pure-group input[type="date"],
@@ -309,10 +358,10 @@
     /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
     .pure-form .pure-help-inline,
     .pure-form-message-inline,
     .pure-form-message {
         display: block;
-        font-size: 80%;
+        font-size: 0.75em;
         /* Increased bottom padding to make it group with its related input element. */
         padding: 0.2em 0 0.8em;
     }
 }