new tab focus style and mixin

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,