new tab focus style and mixin

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;

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>

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>

less/buttons.less

@@ -70,7 +70,7 @@
 
   // Focus state for keyboard and accessibility
   &:focus {
-    outline: 1px dotted #666;
+    .tab-focus();
   }
 
   // Active and Disabled states

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();
 }
 
 

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;

less/reset.less

@@ -46,7 +46,7 @@ html {
 }
 // Focus states
 a:focus {
-  outline: thin dotted;
+  .tab-focus();
 }
 // Hover & Active
 a:hover,