diff options
| author | Mark Otto <[email protected]> | 2012-01-27 18:33:25 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-01-27 18:33:25 -0800 |
| commit | 7e72eb5063470a3728d612acd2cc0368aabc8664 (patch) | |
| tree | f35f14b46c7a7f11432081179c24cad5b2c78280 /less | |
| parent | 997fc33af9a4cbdc078e85ee491f777d0dd2d51a (diff) | |
| download | bootstrap-7e72eb5063470a3728d612acd2cc0368aabc8664.tar.xz bootstrap-7e72eb5063470a3728d612acd2cc0368aabc8664.zip | |
new tab focus style and mixin
Diffstat (limited to 'less')
| -rw-r--r-- | less/buttons.less | 2 | ||||
| -rw-r--r-- | less/forms.less | 5 | ||||
| -rw-r--r-- | less/mixins.less | 20 | ||||
| -rw-r--r-- | less/reset.less | 2 |
4 files changed, 21 insertions, 8 deletions
diff --git a/less/buttons.less b/less/buttons.less index 95690401b..f372b8448 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 c84d9a11d..86e975725 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 bbbba1e02..65b7dbefc 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 ef4dc8af6..28d8eb60c 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, |