Bug fixes

- Fixes issues #64 #66
- Add pseudo-elements to universal selector in print media query
(h5bp/html5-boilerplate#1585)
- Remove gap below iframes
(h5bp/html5-boilerplate#1613)
- Add vertical centering for svg
(h5bp/html5-boilerplate#1453)
- simplify `:focus` selector

Author: JimBobSquarePants

build/responsive.css

@@ -5,7 +5,7 @@
 	Copyright (c),  James South.
 	Licensed under the MIT License.
 	============================================================================== */
-/*! Responsive v4.0.2 | MIT License | responsivebp.com */
+/*! Responsive v4.0.3 | MIT License | responsivebp.com */
 /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
 html {
   font-family: sans-serif;
@@ -156,8 +156,8 @@ html {
 *, :before, :after {
   box-sizing: inherit; }
 
-a:focus, area:focus, button:focus, input:focus, object:focus, select:focus, textarea:focus, [tabindex]:focus {
-  outline-color: #4d90fe;
+:focus {
+  outline: #4d90fe;
   outline-style: solid;
   outline-width: 1px;
   outline-offset: -1px; }
@@ -4537,8 +4537,10 @@ dt, dd {
       margin-right: 10.375rem; } }
 audio,
 canvas,
+iframe,
 img,
-video {
+video,
+svg {
   vertical-align: middle; }
 
 img {
@@ -5440,8 +5442,7 @@ button.modal-direction {
 
 [aria-hidden="true"],
 .hidden {
-  display: none !important;
-  visibility: hidden; }
+  display: none !important; }
 
 .visuallyhidden {
   border: 0;
@@ -5622,12 +5623,9 @@ button.modal-direction {
   caption.visible-l {
     display: table-caption !important; } }
 @media print {
-  * {
+  *, :before, :after {
     box-shadow: none !important;
-    text-shadow: none !important; }
-
-  html,
-  body {
+    text-shadow: none !important;
     background: transparent !important;
     color: #000 !important; }
 

build/responsive.js

@@ -6,7 +6,7 @@
     Licensed under the MIT License.
     ============================================================================== */
 
-/*! Responsive v4.0.2 | MIT License | responsivebp.com */
+/*! Responsive v4.0.3 | MIT License | responsivebp.com */
 
 /*
  * Responsive Core
@@ -1954,7 +1954,7 @@
             touch: true,
             next: ">",
             nextHint: "Next (" + (rtl ? "Left" : "Right") + " Arrow)",
-            prev: "<",
+            previous: "<",
             previousHint: "Previous (" + (rtl ? "Right" : "Left") + " Arrow)",
             closeHint: "Close (Esc)",
             errorHint: "<p>An error has occured.</p>",
@@ -2015,9 +2015,11 @@
             showEvent = $.Event(eshow),
             shownEvent = $.Event(eshown),
             complete = function () {
-
+                var $autofocus = $modal.find("[autofocus]");
                 $body.attr({ "tabindex": -1 });
-                $modal.data("currentModal", self.$element).attr({ "tabindex": 0 }).focus();
+
+                $modal.data("currentModal", self.$element).attr({ "tabindex": 0 });
+                $autofocus.length ? $autofocus.focus() : $modal.focus();
 
                 // Ensure that focus is maintained within the modal.
                 $(document).on(efocusin, function (event) {
@@ -2027,7 +2029,7 @@
                         $newTarget.length ? $newTarget.focus() : $modal.focus();
 
                         return false;
-                    }               
+                    }
                     return true;
                 });
 
@@ -2252,7 +2254,7 @@
             local = !notHash && !external,
             $group = this.$group,
             nextText = this.options.next + "<span class=\"visuallyhidden\">" + this.options.nextHint + "</span>",
-            prevText = this.options.prev + "<span class=\"visuallyhidden\">" + this.options.prevHint + "</span>",
+            prevText = this.options.previous + "<span class=\"visuallyhidden\">" + this.options.previousHint + "</span>",
             iframeScroll = this.options.iframeScroll,
             image = this.options.image || rimage.test(target),
             iframe = this.options.iframe || notHash && external ? !image : false,

build/responsive.min.css

@@ -6,7 +6,7 @@
     Licensed under the MIT License.
     ============================================================================== */
 
-/*! Responsive v4.0.2 | MIT License | responsivebp.com */
+/*! Responsive v4.0.3 | MIT License | responsivebp.com */
 
 /*
  * Responsive Core

build/responsive.min.js

@@ -125,9 +125,11 @@
             showEvent = $.Event(eshow),
             shownEvent = $.Event(eshown),
             complete = function () {
-
+                var $autofocus = $modal.find("[autofocus]");
                 $body.attr({ "tabindex": -1 });
-                $modal.data("currentModal", self.$element).attr({ "tabindex": 0 }).focus();
+
+                $modal.data("currentModal", self.$element).attr({ "tabindex": 0 });
+                $autofocus.length ? $autofocus.focus() : $modal.focus();
 
                 // Ensure that focus is maintained within the modal.
                 $(document).on(efocusin, function (event) {
@@ -137,7 +139,7 @@
                         $newTarget.length ? $newTarget.focus() : $modal.focus();
 
                         return false;
-                    }               
+                    }
                     return true;
                 });
 

src/js/responsive.core.js

@@ -12,23 +12,15 @@ html {
     box-sizing: inherit;
 }
 
-// Add a placeholder for focus events so we can manage
-// both global and button styles.
-%focus {
-    outline-color: $selection-focus-color;
+// Set focus on elements that can recieve it.
+// http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex
+:focus {
+    outline: $selection-focus-color;
     outline-style: $selection-focus-style;
     outline-width: $selection-focus-width;
     outline-offset: $selection-focus-offset;
 }
 
-// Set a focus on elements that can recieve it.
-// http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex
-a, area, button, input, object, select, textarea, [tabindex] {
-    &:focus {
-        @extend %focus;
-    }
-}
-
 // Suppress the focus outline on links that cannot be accessed via keyboard.
 // This prevents an unwanted focus outline from appearing around elements that
 // might still respond to pointer events.

src/js/responsive.modal.js

@@ -6,4 +6,4 @@
 	Licensed under the MIT License.
 	============================================================================== */
 
-/*! Responsive v4.0.2 | MIT License | responsivebp.com */
+/*! Responsive v4.0.3 | MIT License | responsivebp.com */

src/sass/partials/_base.scss

@@ -16,7 +16,6 @@
 [aria-hidden="true"],
 .hidden {
     display: none !important;
-    visibility: hidden;
 }
 
 // Hide only visually, but have it available for screen readers: h5bp.com/v

src/sass/partials/_copyright.scss

@@ -2,8 +2,10 @@
 // their containers: h5bp.com/i/440
 audio,
 canvas,
+iframe,
 img,
-video {
+video,
+svg {
     vertical-align: middle;
 }
 
@@ -74,7 +76,7 @@ a img {
         outline: none;
         padding: 0;
         position: absolute;
-        top: 0; 
+        top: 0;
         width: 100%;
     }
 
@@ -85,7 +87,7 @@ a img {
         // at 100%.
         bottom: -1000000%;
         left: -1000000%;
-        margin: auto; 
+        margin: auto;
         position: absolute;
         right: -1000000%;
         top: -1000000%;

src/sass/partials/_helpers-visibility.scss

@@ -4,13 +4,9 @@
 // Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
 
 @media print {
-    * {
+    *, :before, :after {
         box-shadow: none !important;
         text-shadow: none !important;
-    }
-
-    html,
-    body {
         background: transparent !important;
         color: #000 !important; // Black prints faster: h5bp.com/s
     }

src/sass/partials/_media.scss

@@ -27,7 +27,6 @@ $h6-margin: 1.561rem !default;
 $selection-background: #b3d4fc !default;
 
 // Focused objects
-$selection-focus: 1px solid #4d90fe!default;
 $selection-focus-color: #4d90fe!default;
 $selection-focus-style: solid!default;
 $selection-focus-width: 1px!default;