Update "forms" section. #88

JohnAlbin · Oct 24, 2016 · 86f9337 · 86f9337
1 parent 0dcebf6
commit 86f9337
Show file tree

Hide file tree

Showing 15 changed files with 135 additions and 275 deletions.
diff --git a/fork-versions/default/_normalize.scss b/fork-versions/default/_normalize.scss
@@ -384,7 +384,7 @@ svg:not(:root) {
  */
 
 /**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 1. Change the font styles in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.
  */
 
@@ -393,7 +393,14 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit; /* 1 */
+  @if $normalize-vertical-rhythm {
+    @include normalize-line-height($base-font-size); /* 1 */
+  }
+  @else {
+    line-height: 1.15; /* 1 */
+  }
+  font-family: $base-font-family; /* 1 */
+  font-size: 100%; /* 1 */
   margin: 0; /* 2 */
 }
 
@@ -460,8 +467,8 @@ input {
 }
 
 /**
- * 1. Add the correct box sizing in IE <11.
- * 2. Remove the padding in IE <11.
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
  */
 
 [type="checkbox"],
@@ -489,7 +496,7 @@ input {
   outline-offset: -2px; /* 2 */
 
   /**
-   * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+   * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
    */
 
   &::-webkit-search-cancel-button,
@@ -498,15 +505,6 @@ input {
   }
 }
 
-/**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-
 /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
@@ -543,14 +541,6 @@ legend {
   padding: 0; /* 3 */
 }
 
-/**
- * Restore the font weight unset by a previous rule.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
 /**
  * 1. Add the correct display in IE 9-.
  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.

diff --git a/fork-versions/deprecated-compass/_normalize.scss b/fork-versions/deprecated-compass/_normalize.scss
@@ -391,7 +391,7 @@ svg:not(:root) {
  */
 
 /**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 1. Change the font styles in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.
  */
 
@@ -400,7 +400,14 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit; /* 1 */
+  @if $normalize-vertical-rhythm {
+    @include adjust-leading-to(1); /* 1 */
+  }
+  @else {
+    line-height: 1.15; /* 1 */
+  }
+  font-family: $base-font-family; /* 1 */
+  font-size: 100%; /* 1 */
   margin: 0; /* 2 */
 }
 
@@ -467,8 +474,8 @@ input {
 }
 
 /**
- * 1. Add the correct box sizing in IE <11.
- * 2. Remove the padding in IE <11.
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
  */
 
 [type="checkbox"],
@@ -496,7 +503,7 @@ input {
   outline-offset: -2px; /* 2 */
 
   /**
-   * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+   * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
    */
 
   &::-webkit-search-cancel-button,
@@ -505,15 +512,6 @@ input {
   }
 }
 
-/**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-
 /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
@@ -554,14 +552,6 @@ legend {
   padding: 0; /* 3 */
 }
 
-/**
- * Restore the font weight unset by a previous rule.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
 /**
  * 1. Add the correct display in IE 9-.
  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.

diff --git a/fork-versions/typey-chroma-kss/base/forms/_forms.scss b/fork-versions/typey-chroma-kss/base/forms/_forms.scss
@@ -22,11 +22,13 @@ input,
 optgroup,
 select,
 textarea {
+  // Change the font styles in all browsers (opinionated).
+  @include typeface(body);
+  @include line-height(1);
+  font-size: 100%;
   // Keep form elements constrained in their containers.
   box-sizing: border-box;
   max-width: 100%;
-  // Change font properties to `inherit` in all browsers (opinionated).
-  font: inherit;
   // Remove the margin in Firefox and Safari.
   margin: 0;
 }
@@ -59,19 +61,13 @@ input {
   // Correct the outline style in Safari.
   outline-offset: -2px;
 
-  // Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+  // Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
   &::-webkit-search-cancel-button,
   &::-webkit-search-decoration {
     -webkit-appearance: none;
   }
 }
 
-// Correct the text style of placeholders in Chrome, Edge, and Safari.
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: .54;
-}
-
 ::-webkit-file-upload-button {
   // Correct the inability to style clickable types in iOS and Safari.
   -webkit-appearance: button;
@@ -163,9 +159,9 @@ input {
 
 [type='checkbox'],
 [type='radio'] {
-  // Add the correct box sizing in IE <11.
+  // Add the correct box sizing in IE 10-.
   box-sizing: border-box;
-  // Remove the padding in IE <11.
+  // Remove the padding in IE 10-.
   padding: 0;
 }
 
@@ -229,14 +225,9 @@ select {
   // Add your styles.
 }
 
-optgroup {
-  // Restore the font weight unset by a previous rule.
-  font-weight: bold;
-}
-
 // Progress
 //
-// The `<progress>` HTML element.
+// The `<progress>` element represents the completion progress of a task.
 //
 // Style guide: forms.base.progress
 

diff --git a/fork-versions/typey/_normalize.scss b/fork-versions/typey/_normalize.scss
@@ -349,7 +349,7 @@ svg:not(:root) {
  */
 
 /**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 1. Change the font styles in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.
  */
 
@@ -358,7 +358,9 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit; /* 1 */
+  @include typeface(body); /* 1 */
+  @include line-height(1); /* 1 */
+  font-size: 100%; /* 1 */
   margin: 0; /* 2 */
 }
 
@@ -425,8 +427,8 @@ input {
 }
 
 /**
- * 1. Add the correct box sizing in IE <11.
- * 2. Remove the padding in IE <11.
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
  */
 
 [type="checkbox"],
@@ -454,7 +456,7 @@ input {
   outline-offset: -2px; /* 2 */
 
   /**
-   * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+   * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
    */
 
   &::-webkit-search-cancel-button,
@@ -463,15 +465,6 @@ input {
   }
 }
 
-/**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-
 /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
@@ -509,14 +502,6 @@ legend {
   padding: 0; /* 3 */
 }
 
-/**
- * Restore the font weight unset by a previous rule.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
 /**
  * 1. Add the correct display in IE 9-.
  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.

diff --git a/sass/normalize/_normalize-mixin.scss b/sass/normalize/_normalize-mixin.scss
@@ -426,7 +426,7 @@
      */
 
     /**
-     * 1. Change font properties to `inherit` in all browsers (opinionated).
+     * 1. Change the font styles in all browsers (opinionated).
      * 2. Remove the margin in Firefox and Safari.
      */
 
@@ -435,7 +435,14 @@
     optgroup,
     select,
     textarea {
-      font: inherit; /* 1 */
+      font-family: $base-font-family; /* 1 */
+      font-size: 100%; /* 1 */
+      @if $normalize-vertical-rhythm {
+        line-height: ($base-line-height / $base-font-size) * 1em; /* 1 */
+      }
+      @else {
+        line-height: 1.15; /* 1 */
+      }
       margin: 0; /* 2 */
     }
 
@@ -502,8 +509,8 @@
     }
 
     /**
-     * 1. Add the correct box sizing in IE <11.
-     * 2. Remove the padding in IE <11.
+     * 1. Add the correct box sizing in IE 10-.
+     * 2. Remove the padding in IE 10-.
      */
 
     [type="checkbox"],
@@ -531,7 +538,7 @@
       outline-offset: -2px; /* 2 */
 
       /**
-       * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+       * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
        */
 
       &::-webkit-search-cancel-button,
@@ -540,15 +547,6 @@
       }
     }
 
-    /**
-     * Correct the text style of placeholders in Chrome, Edge, and Safari.
-     */
-
-    ::-webkit-input-placeholder {
-      color: inherit;
-      opacity: 0.54;
-    }
-
     /**
      * 1. Correct the inability to style clickable types in iOS and Safari.
      * 2. Change font properties to `inherit` in Safari.
@@ -585,14 +583,6 @@
       padding: 0; /* 3 */
     }
 
-    /**
-     * Restore the font weight unset by a previous rule.
-     */
-
-    optgroup {
-      font-weight: bold;
-    }
-
     /**
      * 1. Add the correct display in IE 9-.
      * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.