Final 4.7.x build

Author: philwareham

dist/four-point-seven/styles/default.css

@@ -11,6 +11,13 @@ main {
   display: block;
 }
 
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  vertical-align: baseline;
+}
+
 /**
  * Add the correct display in all browsers.
  */
@@ -656,7 +663,7 @@ bdo[dir=rtl] {
   [dir=rtl] menu,
 [dir=rtl] ol,
 [dir=rtl] ul {
-    padding: 0 1.75em 0 0;
+    padding: 0 2em 0 0;
   }
 
   [dir=rtl] .site-navigation ul,
@@ -668,7 +675,7 @@ bdo[dir=rtl] {
    * Swap definition description margin positions in RTL languages.
    */
   [dir=rtl] dd {
-    margin: 0 1.75em 0 0;
+    margin: 0 2em 0 0;
   }
 
   /**
@@ -749,10 +756,10 @@ video {
   }
 
   /**
-   * Address margin not present in Safari.
+   * Consistent margins on `figure`.
    */
   figure {
-    margin: 0;
+    margin: 1em 0;
   }
 
   /* Tables
@@ -828,7 +835,7 @@ tfoot td {
   menu,
 ol,
 ul {
-    padding: 0 0 0 1.75em;
+    padding: 0 0 0 2em;
   }
 
   /**
@@ -850,7 +857,7 @@ li > ol {
    * Address margins set differently.
    */
   dd {
-    margin: 0 0 0 1.75em;
+    margin: 0 0 0 2em;
   }
 
   /**
@@ -908,13 +915,6 @@ li > ol {
     white-space: normal;
   }
 
-  /**
-   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
-   */
-  progress {
-    vertical-align: baseline;
-  }
-
   /**
    * Show the overflow in Edge.
    */
@@ -946,13 +946,6 @@ textarea {
     vertical-align: baseline;
   }
 
-  /**
-   * Remove the inner padding in Chrome and Safari on macOS.
-   */
-  [type=search]::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
   /**
    * Styling of form input fields.
    *
@@ -1032,6 +1025,14 @@ textarea:focus {
     height: auto;
   }
 
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  [type=search]::-webkit-search-decoration {
+    /* autoprefixer: off */
+    appearance: none;
+  }
+
   /**
    * Use indicator icon to signify the drop-down ability of `select`.
    */
@@ -1131,16 +1132,6 @@ span.disabled {
     cursor: default !important;
   }
 
-  /**
-   * Styling for form field validation.
-   */
-  input:focus:invalid,
-select:focus:invalid,
-textarea:focus:invalid {
-    border-color: #9d261d;
-    box-shadow: none;
-  }
-
   /**
    * Width display options for `input` fields. Height display options
    * for textareas.
@@ -1166,6 +1157,26 @@ textarea:focus:invalid {
     height: 9.75em;
   }
 
+  /**
+   * Styling for form field validation.
+   */
+  input:focus:invalid,
+select:focus:invalid,
+textarea:focus:invalid {
+    border-color: #9d261d;
+    box-shadow: none;
+  }
+
+  /**
+   * Styling for Firefox-specfic form field validation.
+   */
+  input:-moz-ui-invalid,
+select:-moz-ui-invalid,
+textarea:-moz-ui-invalid {
+    border-color: #9d261d;
+    box-shadow: none;
+  }
+
   /**
    * Normalize form placeholder style across browsers.
    *
@@ -1212,7 +1223,7 @@ textarea:focus:invalid {
      ========================================================================== */
   /**
    * 1. Address `overflow` set to `hidden` in IE 11.
-   * 2. Correct `button` style inheritance in Firefox, IE 11, and Opera.
+   * 2. Remove the inheritance of text transform in Edge, Firefox, and IE 11.
    */
   button {
     /* 1 */
@@ -1221,6 +1232,17 @@ textarea:focus:invalid {
     text-transform: none;
   }
 
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  button::-moz-focus-inner,
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
+
   /**
    * 1. Remove browser-specific default styling.
    * 2. Improve usability and consistency of cursor style between image-type
@@ -1289,17 +1311,6 @@ textarea:focus:invalid {
     top: 2px !important;
   }
 
-  /**
-   * Remove the inner border and padding in Firefox.
-   */
-  button::-moz-focus-inner,
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner {
-    padding: 0;
-    border-style: none;
-  }
-
   /* Comments
      ========================================================================== */
   /**
@@ -1357,7 +1368,6 @@ textarea:focus:invalid {
    */
   .comments_error {
     border-color: #9d261d;
-    box-shadow: 0 0 4px 2px #9d261d;
   }
 
   /* Popup comments (can be removed if you don't use popups)

src/scss/modules/_base.scss

@@ -10,6 +10,14 @@ main {
     display: block;
 }
 
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+    vertical-align: baseline;
+}
+
 /**
  * Add the correct display in all browsers.
  */

src/scss/modules/_buttons.scss

@@ -3,7 +3,7 @@
 
 /**
  * 1. Address `overflow` set to `hidden` in IE 11.
- * 2. Correct `button` style inheritance in Firefox, IE 11, and Opera.
+ * 2. Remove the inheritance of text transform in Edge, Firefox, and IE 11.
  */
 
 button {
@@ -13,6 +13,18 @@ button {
     text-transform: none;
 }
 
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+}
+
 /**
  * 1. Remove browser-specific default styling.
  * 2. Improve usability and consistency of cursor style between image-type
@@ -74,15 +86,3 @@ button[disabled],
 [type="submit"][disabled] {
     top: 2px !important;
 }
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-    padding: 0;
-    border-style: none;
-}

src/scss/modules/_comments.scss

@@ -65,7 +65,6 @@
 
 .comments_error {
     border-color: $color-error-text;
-    box-shadow: 0 0 4px 2px $color-error-text;
 }
 
 

src/scss/modules/_embedded-content.scss

@@ -54,9 +54,9 @@ img {
 }
 
 /**
- * Address margin not present in Safari.
+ * Consistent margins on `figure`.
  */
 
 figure {
-    margin: 0;
+    margin: 1em 0;
 }

src/scss/modules/_forms.scss

@@ -38,14 +38,6 @@ legend {
     white-space: normal;
 }
 
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-    vertical-align: baseline;
-}
-
 /**
  * Show the overflow in Edge.
  */
@@ -79,14 +71,6 @@ textarea {
     vertical-align: baseline;
 }
 
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
-}
-
 /**
  * Styling of form input fields.
  *
@@ -153,6 +137,15 @@ textarea {
     height: auto;
 }
 
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+    /* autoprefixer: off */
+    appearance: none;
+}
+
 /**
  * Use indicator icon to signify the drop-down ability of `select`.
  */
@@ -263,20 +256,6 @@ span.disabled {
     cursor: default !important;
 }
 
-
-/**
- * Styling for form field validation.
- */
-
-input,
-select,
-textarea {
-    &:focus:invalid {
-        border-color: $color-error-text;
-        box-shadow: none; // Normalize Firefox styling
-    }
-}
-
 /**
  * Width display options for `input` fields. Height display options
  * for textareas.
@@ -309,6 +288,32 @@ textarea {
     }
 }
 
+/**
+ * Styling for form field validation.
+ */
+
+input,
+select,
+textarea {
+    &:focus:invalid {
+        border-color: $color-error-text;
+        box-shadow: none; // Normalize Firefox styling
+    }
+}
+
+/**
+ * Styling for Firefox-specfic form field validation.
+ */
+
+input,
+select,
+textarea {
+    &:-moz-ui-invalid {
+        border-color: $color-error-text;
+        box-shadow: none;
+    }
+}
+
 /**
  * Normalize form placeholder style across browsers.
  *

src/scss/modules/_internationalization.scss

@@ -113,7 +113,7 @@ bdo[dir="rtl"] {
     menu,
     ol,
     ul {
-        padding: 0 1.75em 0 0;
+        padding: 0 2em 0 0;
     }
 }
 
@@ -129,7 +129,7 @@ bdo[dir="rtl"] {
  */
 
 [dir="rtl"] dd {
-    margin: 0 1.75em 0 0;
+    margin: 0 2em 0 0;
 }
 
 /**