From 7e72eb5063470a3728d612acd2cc0368aabc8664 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 18:33:25 -0800 Subject: [PATCH] new tab focus style and mixin --- docs/assets/css/bootstrap.css | 24 +++++++++++++++++++----- docs/less.html | 5 +++++ docs/templates/pages/less.mustache | 5 +++++ less/buttons.less | 2 +- less/forms.less | 5 ++--- less/mixins.less | 20 +++++++++++++++++--- less/reset.less | 2 +- 7 files changed, 50 insertions(+), 13 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index de895021a6..a6dd95e84e 100644 --- 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 8e3e8e6555..72ce452ba0 100644 --- a/docs/less.html +++ b/docs/less.html @@ -455,6 +455,11 @@ none Add to any parent to clear floats within + + .tab-focus() + none + Apply the Webkit focus style and round Firefox outline + .center-block() none diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index 649f8f456e..ad6688e1ec 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -390,6 +390,11 @@ none {{_i}}Add to any parent to clear floats within{{/i}} + + .tab-focus() + none + {{_i}}Apply the Webkit focus style and round Firefox outline{{/i}} + .center-block() none diff --git a/less/buttons.less b/less/buttons.less index 95690401bf..f372b84483 100644 --- 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 c84d9a11dd..86e9757252 100644 --- 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 bbbba1e025..65b7dbefc8 100644 --- 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 ef4dc8af6c..28d8eb60ca 100644 --- 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,