new tab focus style and mixin

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index de895021a6ced36b6e7064456cbbaf22c9d81261..a6dd95e84e237858e5e5dd0c2c4b751acd932602 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Fri Jan 27 16:39:57 PST 2012
+ * Date: Fri Jan 27 18:33:07 PST 2012
  */
 article,
 aside,
@@ -35,6 +35,11 @@ html {
 }
 a:focus {
   outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+  -moz-outline: 5px auto -moz-mac-focusring;
+  -moz-outline-radius: 6px;
+  -moz-outline-offset: 0;
 }
 a:hover, a:active {
   outline: 0;
@@ -611,8 +616,7 @@ input:focus, textarea:focus {
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-  outline: 0;
-  outline: 1px dotted #666 \9;
+  outline: thin dotted \9;
   /* IE6-8 */
 
 }
@@ -620,7 +624,12 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
-  outline: 1px dotted #666;
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+  -moz-outline: 5px auto -moz-mac-focusring;
+  -moz-outline-radius: 6px;
+  -moz-outline-offset: 0;
 }
 .input-mini {
   width: 60px;
@@ -2612,7 +2621,12 @@ table .span12 {
   transition: background-position 0.1s linear;
 }
 .btn:focus {
-  outline: 1px dotted #666;
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+  -moz-outline: 5px auto -moz-mac-focusring;
+  -moz-outline-radius: 6px;
+  -moz-outline-offset: 0;
 }
 .btn.active, .btn:active {
   background-image: none;

diff --git a/docs/less.html b/docs/less.html
index 8e3e8e655585720cae9b9665a3cdd8d85ab9817c..72ce452ba0881cc0f04e925bb4d685bc89752020 100644 (file)
--- a/docs/less.html
+++ b/docs/less.html
@@ -455,6 +455,11 @@
         <td><em class="muted">none</em></td>
         <td>Add to any parent to clear floats within</td>
       </tr>
+      <tr>
+        <td><code>.tab-focus()</code></td>
+        <td><em class="muted">none</em></td>
+        <td>Apply the Webkit focus style and round Firefox outline</td>
+      </tr>
       <tr>
         <td><code>.center-block()</code></td>
         <td><em class="muted">none</em></td>

diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index 649f8f456ea1745c4363b01611c451f05376232d..ad6688e1eca72626753a8ff7241f13aca06f05de 100644 (file)
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -390,6 +390,11 @@
         <td><em class="muted">none</em></td>
         <td>{{_i}}Add to any parent to clear floats within{{/i}}</td>
       </tr>
+      <tr>
+        <td><code>.tab-focus()</code></td>
+        <td><em class="muted">none</em></td>
+        <td>{{_i}}Apply the Webkit focus style and round Firefox outline{{/i}}</td>
+      </tr>
       <tr>
         <td><code>.center-block()</code></td>
         <td><em class="muted">none</em></td>

diff --git a/less/buttons.less b/less/buttons.less
index 95690401bfa4c2f9a9cb061e0b17515b8b267dac..f372b84483e2fb2bd9ffe5446ee0340a8711b28b 100644 (file)
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -70,7 +70,7 @@
 
   // Focus state for keyboard and accessibility
   &:focus {
-    outline: 1px dotted #666;
+    .tab-focus();
   }
 
   // Active and Disabled states

diff --git a/less/forms.less b/less/forms.less
index c84d9a11ddaa91afa805e867a8fe81aa5375afb1..86e975725239e9e5c3eebb1fd05b873b82c50af4 100644 (file)
--- a/less/forms.less
+++ b/less/forms.less
@@ -191,14 +191,13 @@ textarea:focus {
   border-color: rgba(82,168,236,.8);
   @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
   .box-shadow(@shadow);
-  outline: 0;
-  outline: 1px dotted #666 \9; /* IE6-8 */
+  outline: thin dotted \9; /* IE6-8 */
 }
 input[type=file]:focus,
 input[type=checkbox]:focus,
 select:focus {
   .box-shadow(none); // override for file inputs
-  outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
+  .tab-focus();
 }
 
 

diff --git a/less/mixins.less b/less/mixins.less
index bbbba1e025f945338766fd3aa01ac4095efa9c05..65b7dbefc8e6688aad2a778517d28f84e7536bbb 100644 (file)
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -7,7 +7,7 @@
 // --------------------------------------------------
 
 // Clearfix
-// -------------------------
+// --------
 // For clearing floats like a boss h5bp.com/q
 .clearfix() {
   *zoom: 1;
@@ -21,8 +21,22 @@
   }
 }
 
+// Webkit-style focus
+// ------------------
+.tab-focus() {
+  // Default
+  outline: thin dotted;
+  // Webkit
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+  // Firefox
+  -moz-outline: 5px auto -moz-mac-focusring;
+  -moz-outline-radius: 6px;
+  -moz-outline-offset: 0;
+}
+
 // Center-align a block level element
-// -------------------------
+// ----------------------------------
 .center-block() {
   display: block;
   margin-left: auto;
@@ -30,7 +44,7 @@
 }
 
 // IE7 inline-block
-// -------------------------
+// ----------------
 .ie7-inline-block() {
   *display: inline; /* IE7 inline-block hack */
   *zoom: 1;

diff --git a/less/reset.less b/less/reset.less
index ef4dc8af6c91934e84388e3849e8dea293c69618..28d8eb60ca487c9ad9649cefacbb7db8de100a56 100644 (file)
--- a/less/reset.less
+++ b/less/reset.less
@@ -46,7 +46,7 @@ html {
 }
 // Focus states
 a:focus {
-  outline: thin dotted;
+  .tab-focus();
 }
 // Hover & Active
 a:hover,