Merge remote-tracking branch 'origin/v4'

MIT-LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2013 James South
+Copyright (c) 2013 - 2015 James South
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,5 +1,5 @@
 #Responsive
-##A super lightweight HTML, Sass, CSS, and JavaScript framework for building responsive websites
+##A powerful, accessible, developer friendly framework for building responsive websites
 
 [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/ResponsiveBP/Responsive?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
@@ -23,8 +23,8 @@ Browser support covers IE9+ as well as all other modern browsers.
 
 Several options are available for downloading Responsive:
 
-- [Download the latest release](https://github.com/ResponsiveBP/Responsive/releases/download/4.0.2/responsive.zip).
-- [Download the latest release source](https://github.com/ResponsiveBP/Responsive/archive/4.0.2.zip).
+- [Download the latest release](https://github.com/ResponsiveBP/Responsive/releases/download/4.0.3/responsive.zip).
+- [Download the latest release source](https://github.com/ResponsiveBP/Responsive/archive/4.0.3.zip).
 - Clone the repo: `git clone https://github.com/ResponsiveBP/Responsive.git`.
 - Install with [Bower](http://bower.io): `bower install responsive`.
 

bower.json

@@ -1,7 +1,7 @@
 {
     "name": "responsive",
-    "description": "A super lightweight HTML, Sass, CSS, and JavaScript framework for building responsive websites.",
-    "version": "4.0.2",
+    "description": "A powerful, accessible, developer friendly framework for building responsive websites.",
+    "version": "4.0.3",
     "homepage": "http://responsivebp.com",
     "authors": [
         "James South"

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/template.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
 <head>
     <meta charset="utf-8" />

src/js/responsive.core.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

src/js/responsive.modal.js

@@ -64,7 +64,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>",
@@ -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;
                 });
 
@@ -362,7 +364,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,

src/sass/partials/_base.scss

@@ -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/sass/partials/_copyright.scss

@@ -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/_helpers-visibility.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/_media.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/_print.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/utilities/_variables.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;

tests/css/ltr/modal/all.html

@@ -98,7 +98,7 @@ <h3>Form</h3>
                 <fieldset>
                     <legend>Default Form</legend>
                     <label for="field-one">Field One</label>
-                    <input type="text" id="field-one" />
+                    <input type="text" id="field-one" autofocus/>
                     <label for="field-two">Field Two</label>
                     <select id="field-two">
                         <option>1</option>

tests/css/rtl/modal/all.html

@@ -98,7 +98,7 @@ <h3>Form</h3>
                 <fieldset>
                     <legend>Default Form</legend>
                     <label for="field-one">Field One</label>
-                    <input type="text" id="field-one" />
+                    <input type="text" id="field-one" autofocus />
                     <label for="field-two">Field Two</label>
                     <select id="field-two">
                         <option>1</option>