Merge pull request #294 from tilomitra/forms-font-size

[Fix #265]: Remove `font-size` rules from .pure-form children

Author: ericf

HISTORY.md

@@ -8,7 +8,9 @@ NEXT
 
 * Improve how `<input type="color">` elements look in Chrome by fixing paddings. ([#283][] @jpetto)
 
+* Remove `font-size` rules from `<input>`, `<legend>`, and `<fieldset>` elements within `.pure-form`. Font sizes are now inherited from your application's CSS file. ([#265][])
 
+[#265]: https://github.com/yui/pure/issues/265
 [#283]: https://github.com/yui/pure/issues/283
 
 

src/forms/css/forms-r.css

@@ -57,7 +57,7 @@
     .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;
     }

src/forms/css/forms.css

@@ -17,7 +17,6 @@
     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-box-sizing: border-box;
@@ -33,7 +32,6 @@ since IE8 won't execute CSS that contains a CSS3 selector.
     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-box-sizing: border-box;
@@ -155,7 +153,6 @@ since IE8 won't execute CSS that contains a CSS3 selector.
 }
 .pure-form label {
     margin: 0.5em 0 0.2em;
-    font-size: 90%;
 }
 .pure-form fieldset {
     margin: 0;
@@ -167,7 +164,6 @@ since IE8 won't execute CSS that contains a CSS3 selector.
     width: 100%;
     padding: 0.3em 0;
     margin-bottom: 0.3em;
-    font-size: 125%;
     color: #333;
     border-bottom: 1px solid #e5e5e5;
 }
@@ -289,12 +285,12 @@ since IE8 won't execute CSS that contains a CSS3 selector.
     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;
 }