diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index dee5dc608306..5286f3b275d0 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -1003,7 +1003,9 @@
margin-bottom: 2px;
}
.nav-collapse .nav > li > a:hover,
- .nav-collapse .dropdown-menu a:hover {
+ .nav-collapse .nav > li > a:focus,
+ .nav-collapse .dropdown-menu a:hover,
+ .nav-collapse .dropdown-menu a:focus {
background-color: #f2f2f2;
}
.navbar-inverse .nav-collapse .nav > li > a,
@@ -1011,7 +1013,9 @@
color: #999999;
}
.navbar-inverse .nav-collapse .nav > li > a:hover,
- .navbar-inverse .nav-collapse .dropdown-menu a:hover {
+ .navbar-inverse .nav-collapse .nav > li > a:focus,
+ .navbar-inverse .nav-collapse .dropdown-menu a:hover,
+ .navbar-inverse .nav-collapse .dropdown-menu a:focus {
background-color: #111111;
}
.nav-collapse.in .btn-group {
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 2e2f061605a7..23982903de65 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -235,7 +235,8 @@ a {
text-decoration: none;
}
-a:hover {
+a:hover,
+a:focus {
color: #005580;
text-decoration: underline;
}
@@ -678,7 +679,8 @@ cite {
color: #999999;
}
-a.muted:hover {
+a.muted:hover,
+a.muted:focus {
color: #808080;
}
@@ -686,7 +688,8 @@ a.muted:hover {
color: #c09853;
}
-a.text-warning:hover {
+a.text-warning:hover,
+a.text-warning:focus {
color: #a47e3c;
}
@@ -694,7 +697,8 @@ a.text-warning:hover {
color: #b94a48;
}
-a.text-error:hover {
+a.text-error:hover,
+a.text-error:focus {
color: #953b39;
}
@@ -702,7 +706,8 @@ a.text-error:hover {
color: #3a87ad;
}
-a.text-info:hover {
+a.text-info:hover,
+a.text-info:focus {
color: #2d6987;
}
@@ -710,7 +715,8 @@ a.text-info:hover {
color: #468847;
}
-a.text-success:hover {
+a.text-success:hover,
+a.text-success:focus {
color: #356635;
}
@@ -2259,7 +2265,7 @@ table th[class*="span"],
background-repeat: no-repeat;
}
-/* White icons with optional class, or on hover/active states of certain elements */
+/* White icons with optional class, or on hover/focus/active states of certain elements */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
@@ -2269,11 +2275,15 @@ table th[class*="span"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
+.dropdown-menu > li > a:focus > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
+.dropdown-menu > li > a:focus > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
-.dropdown-submenu:hover > a > [class*=" icon-"] {
+.dropdown-submenu:focus > a > [class^="icon-"],
+.dropdown-submenu:hover > a > [class*=" icon-"],
+.dropdown-submenu:focus > a > [class*=" icon-"] {
background-image: url("../img/glyphicons-halflings-white.png");
}
@@ -2923,7 +2933,8 @@ table th[class*="span"],
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
-.dropdown-submenu:hover > a {
+.dropdown-submenu:hover > a,
+.dropdown-submenu:focus > a {
color: #ffffff;
text-decoration: none;
background-color: #0081c2;
@@ -2937,7 +2948,8 @@ table th[class*="span"],
}
.dropdown-menu > .active > a,
-.dropdown-menu > .active > a:hover {
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
color: #ffffff;
text-decoration: none;
background-color: #0081c2;
@@ -2952,11 +2964,12 @@ table th[class*="span"],
}
.dropdown-menu > .disabled > a,
-.dropdown-menu > .disabled > a:hover {
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
color: #999999;
}
-.dropdown-menu > .disabled > a:hover {
+.dropdown-menu > .disabled > a:hover .dropdown-menu > .disabled > a:focus {
text-decoration: none;
cursor: default;
background-color: transparent;
@@ -3132,7 +3145,8 @@ table th[class*="span"],
filter: alpha(opacity=20);
}
-.close:hover {
+.close:hover,
+.close:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
@@ -3186,6 +3200,7 @@ button.close {
}
.btn:hover,
+.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
@@ -3204,7 +3219,8 @@ button.close {
*margin-left: 0;
}
-.btn:hover {
+.btn:hover,
+.btn:focus {
color: #333333;
text-decoration: none;
background-position: 0 -15px;
@@ -3331,6 +3347,7 @@ input[type="button"].btn-block {
}
.btn-primary:hover,
+.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
@@ -3363,6 +3380,7 @@ input[type="button"].btn-block {
}
.btn-warning:hover,
+.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
@@ -3395,6 +3413,7 @@ input[type="button"].btn-block {
}
.btn-danger:hover,
+.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
@@ -3427,6 +3446,7 @@ input[type="button"].btn-block {
}
.btn-success:hover,
+.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
@@ -3459,6 +3479,7 @@ input[type="button"].btn-block {
}
.btn-info:hover,
+.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
@@ -3491,6 +3512,7 @@ input[type="button"].btn-block {
}
.btn-inverse:hover,
+.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
@@ -3554,13 +3576,15 @@ input[type="submit"].btn.btn-mini {
border-radius: 0;
}
-.btn-link:hover {
+.btn-link:hover,
+.btn-link:focus {
color: #005580;
text-decoration: underline;
background-color: transparent;
}
-.btn-link[disabled]:hover {
+.btn-link[disabled]:hover,
+.btn-link[disabled]:focus {
color: #333333;
text-decoration: none;
}
@@ -3904,7 +3928,8 @@ input[type="submit"].btn.btn-mini {
display: block;
}
-.nav > li > a:hover {
+.nav > li > a:hover,
+.nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
@@ -3950,7 +3975,8 @@ input[type="submit"].btn.btn-mini {
}
.nav-list > .active > a,
-.nav-list > .active > a:hover {
+.nav-list > .active > a:hover,
+.nav-list > .active > a:focus {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
background-color: #0088cc;
@@ -4021,12 +4047,14 @@ input[type="submit"].btn.btn-mini {
border-radius: 4px 4px 0 0;
}
-.nav-tabs > li > a:hover {
+.nav-tabs > li > a:hover,
+.nav-tabs > li > a:focus {
border-color: #eeeeee #eeeeee #dddddd;
}
.nav-tabs > .active > a,
-.nav-tabs > .active > a:hover {
+.nav-tabs > .active > a:hover,
+.nav-tabs > .active > a:focus {
color: #555555;
cursor: default;
background-color: #ffffff;
@@ -4045,7 +4073,8 @@ input[type="submit"].btn.btn-mini {
}
.nav-pills > .active > a,
-.nav-pills > .active > a:hover {
+.nav-pills > .active > a:hover,
+.nav-pills > .active > a:focus {
color: #ffffff;
background-color: #0088cc;
}
@@ -4087,7 +4116,8 @@ input[type="submit"].btn.btn-mini {
-moz-border-radius-bottomleft: 4px;
}
-.nav-tabs.nav-stacked > li > a:hover {
+.nav-tabs.nav-stacked > li > a:hover,
+.nav-tabs.nav-stacked > li > a:focus {
z-index: 2;
border-color: #ddd;
}
@@ -4118,7 +4148,8 @@ input[type="submit"].btn.btn-mini {
border-bottom-color: #0088cc;
}
-.nav .dropdown-toggle:hover .caret {
+.nav .dropdown-toggle:hover .caret,
+.nav .dropdown-toggle:focus .caret {
border-top-color: #005580;
border-bottom-color: #005580;
}
@@ -4139,13 +4170,15 @@ input[type="submit"].btn.btn-mini {
border-bottom-color: #555555;
}
-.nav > .dropdown.active > a:hover {
+.nav > .dropdown.active > a:hover,
+.nav > .dropdown.active > a:focus {
cursor: pointer;
}
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
-.nav > li.dropdown.open.active > a:hover {
+.nav > li.dropdown.open.active > a:hover,
+.nav > li.dropdown.open.active > a:focus {
color: #ffffff;
background-color: #999999;
border-color: #999999;
@@ -4153,14 +4186,16 @@ input[type="submit"].btn.btn-mini {
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
-.nav li.dropdown.open a:hover .caret {
+.nav li.dropdown.open a:hover .caret,
+.nav li.dropdown.open a:focus .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
opacity: 1;
filter: alpha(opacity=100);
}
-.tabs-stacked .open > a:hover {
+.tabs-stacked .open > a:hover,
+.tabs-stacked .open > a:focus {
border-color: #999999;
}
@@ -4214,13 +4249,15 @@ input[type="submit"].btn.btn-mini {
border-radius: 0 0 4px 4px;
}
-.tabs-below > .nav-tabs > li > a:hover {
+.tabs-below > .nav-tabs > li > a:hover,
+.tabs-below > .nav-tabs > li > a:focus {
border-top-color: #ddd;
border-bottom-color: transparent;
}
.tabs-below > .nav-tabs > .active > a,
-.tabs-below > .nav-tabs > .active > a:hover {
+.tabs-below > .nav-tabs > .active > a:hover,
+.tabs-below > .nav-tabs > .active > a:focus {
border-color: transparent #ddd #ddd #ddd;
}
@@ -4249,12 +4286,14 @@ input[type="submit"].btn.btn-mini {
border-radius: 4px 0 0 4px;
}
-.tabs-left > .nav-tabs > li > a:hover {
+.tabs-left > .nav-tabs > li > a:hover,
+.tabs-left > .nav-tabs > li > a:focus {
border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}
.tabs-left > .nav-tabs .active > a,
-.tabs-left > .nav-tabs .active > a:hover {
+.tabs-left > .nav-tabs .active > a:hover,
+.tabs-left > .nav-tabs .active > a:focus {
border-color: #ddd transparent #ddd #ddd;
*border-right-color: #ffffff;
}
@@ -4272,12 +4311,14 @@ input[type="submit"].btn.btn-mini {
border-radius: 0 4px 4px 0;
}
-.tabs-right > .nav-tabs > li > a:hover {
+.tabs-right > .nav-tabs > li > a:hover,
+.tabs-right > .nav-tabs > li > a:focus {
border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}
.tabs-right > .nav-tabs .active > a,
-.tabs-right > .nav-tabs .active > a:hover {
+.tabs-right > .nav-tabs .active > a:hover,
+.tabs-right > .nav-tabs .active > a:focus {
border-color: #ddd #ddd #ddd transparent;
*border-left-color: #ffffff;
}
@@ -4286,7 +4327,8 @@ input[type="submit"].btn.btn-mini {
color: #999999;
}
-.nav > .disabled > a:hover {
+.nav > .disabled > a:hover,
+.nav > .disabled > a:focus {
text-decoration: none;
cursor: default;
background-color: transparent;
@@ -4352,7 +4394,8 @@ input[type="submit"].btn.btn-mini {
text-shadow: 0 1px 0 #ffffff;
}
-.navbar .brand:hover {
+.navbar .brand:hover,
+.navbar .brand:focus {
text-decoration: none;
}
@@ -4366,7 +4409,8 @@ input[type="submit"].btn.btn-mini {
color: #777777;
}
-.navbar-link:hover {
+.navbar-link:hover,
+.navbar-link:focus {
color: #333333;
}
@@ -4592,6 +4636,7 @@ input[type="submit"].btn.btn-mini {
}
.navbar .btn-navbar:hover,
+.navbar .btn-navbar:focus,
.navbar .btn-navbar:active,
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
@@ -4661,7 +4706,8 @@ input[type="submit"].btn.btn-mini {
border-bottom: 0;
}
-.navbar .nav li.dropdown > a:hover .caret {
+.navbar .nav li.dropdown > a:hover .caret,
+.navbar .nav li.dropdown > a:focus .caret {
border-top-color: #555555;
border-bottom-color: #555555;
}
@@ -4733,7 +4779,9 @@ input[type="submit"].btn.btn-mini {
}
.navbar-inverse .brand:hover,
-.navbar-inverse .nav > li > a:hover {
+.navbar-inverse .nav > li > a:hover,
+.navbar-inverse .brand:focus,
+.navbar-inverse .nav > li > a:focus {
color: #ffffff;
}
@@ -4762,7 +4810,8 @@ input[type="submit"].btn.btn-mini {
color: #999999;
}
-.navbar-inverse .navbar-link:hover {
+.navbar-inverse .navbar-link:hover,
+.navbar-inverse .navbar-link:focus {
color: #ffffff;
}
@@ -4778,7 +4827,8 @@ input[type="submit"].btn.btn-mini {
background-color: #111111;
}
-.navbar-inverse .nav li.dropdown > a:hover .caret {
+.navbar-inverse .nav li.dropdown > a:hover .caret,
+.navbar-inverse .nav li.dropdown > a:focus .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
@@ -4851,6 +4901,7 @@ input[type="submit"].btn.btn-mini {
}
.navbar-inverse .btn-navbar:hover,
+.navbar-inverse .btn-navbar:focus,
.navbar-inverse .btn-navbar:active,
.navbar-inverse .btn-navbar.active,
.navbar-inverse .btn-navbar.disabled,
@@ -4925,6 +4976,7 @@ input[type="submit"].btn.btn-mini {
}
.pagination ul > li > a:hover,
+.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
background-color: #f5f5f5;
@@ -4938,7 +4990,8 @@ input[type="submit"].btn.btn-mini {
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
-.pagination ul > .disabled > a:hover {
+.pagination ul > .disabled > a:hover,
+.pagination ul > .disabled > a:focus {
color: #999999;
cursor: default;
background-color: transparent;
@@ -5068,7 +5121,8 @@ input[type="submit"].btn.btn-mini {
border-radius: 15px;
}
-.pager li > a:hover {
+.pager li > a:hover,
+.pager li > a:focus {
text-decoration: none;
background-color: #f5f5f5;
}
@@ -5085,6 +5139,7 @@ input[type="submit"].btn.btn-mini {
.pager .disabled > a,
.pager .disabled > a:hover,
+.pager .disabled > a:focus,
.pager .disabled > span {
color: #999999;
cursor: default;
@@ -5483,7 +5538,8 @@ input[type="submit"].btn.btn-mini {
transition: all 0.2s ease-in-out;
}
-a.thumbnail:hover {
+a.thumbnail:hover,
+a.thumbnail:focus {
border-color: #0088cc;
-webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
@@ -5573,7 +5629,9 @@ a.thumbnail:hover {
}
a.label:hover,
-a.badge:hover {
+a.label:focus,
+a.badge:hover,
+a.badge:focus {
color: #ffffff;
text-decoration: none;
cursor: pointer;
@@ -5968,7 +6026,8 @@ a.badge:hover {
left: auto;
}
-.carousel-control:hover {
+.carousel-control:hover,
+.carousel-control:focus {
color: #ffffff;
text-decoration: none;
opacity: 0.9;
diff --git a/docs/examples/fluid.html b/docs/examples/fluid.html
index 4ca2920efd0b..359c4beed99f 100644
--- a/docs/examples/fluid.html
+++ b/docs/examples/fluid.html
@@ -86,7 +86,7 @@
Hello, world!
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
-
Learn more »
+
Learn more »
diff --git a/docs/examples/hero.html b/docs/examples/hero.html
index f0a5e17093b5..1b9fc2fce922 100644
--- a/docs/examples/hero.html
+++ b/docs/examples/hero.html
@@ -75,7 +75,7 @@
Hello, world!
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
-
Learn more »
+
Learn more »
diff --git a/less/buttons.less b/less/buttons.less
index 6f565b73c211..fba635a5e325 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -25,13 +25,14 @@
.ie7-restore-left-whitespace(); // Give IE7 some love
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
- // Hover state
- &:hover {
+ // Hover/focus state
+ &:hover,
+ &:focus {
color: @grayDark;
text-decoration: none;
background-position: 0 -15px;
- // transition is only when going to hover, otherwise the background
+ // transition is only when going to hover/focus, otherwise the background
// behind the gradient (there for IE<=9 fallback) gets mismatched
.transition(background-position .1s linear);
}
@@ -219,12 +220,14 @@ input[type="submit"].btn {
color: @linkColor;
.border-radius(0);
}
-.btn-link:hover {
+.btn-link:hover,
+.btn-link:focus {
color: @linkColorHover;
text-decoration: underline;
background-color: transparent;
}
-.btn-link[disabled]:hover {
+.btn-link[disabled]:hover,
+.btn-link[disabled]:focus {
color: @grayDark;
text-decoration: none;
}
diff --git a/less/carousel.less b/less/carousel.less
index b321e5bb5a0f..644ee2de975a 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -97,8 +97,9 @@
right: 15px;
}
- // Hover state
- &:hover {
+ // Hover/focus state
+ &:hover,
+ &:focus {
color: @white;
text-decoration: none;
.opacity(90);
diff --git a/less/close.less b/less/close.less
index c71a508f3ff4..4c626bda6cc6 100644
--- a/less/close.less
+++ b/less/close.less
@@ -11,7 +11,8 @@
color: @black;
text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(20);
- &:hover {
+ &:hover,
+ &:focus {
color: @black;
text-decoration: none;
cursor: pointer;
diff --git a/less/dropdowns.less b/less/dropdowns.less
index a0d4b1fd0c14..13490a637b64 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -83,11 +83,12 @@
}
}
-// Hover state
+// Hover/Focus state
// -----------
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
-.dropdown-submenu:hover > a {
+.dropdown-submenu:hover > a,
+.dropdown-submenu:focus > a {
text-decoration: none;
color: @dropdownLinkColorHover;
#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
@@ -96,7 +97,8 @@
// Active state
// ------------
.dropdown-menu > .active > a,
-.dropdown-menu > .active > a:hover {
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
color: @dropdownLinkColorActive;
text-decoration: none;
outline: 0;
@@ -105,13 +107,15 @@
// Disabled state
// --------------
-// Gray out text and ensure the hover state remains gray
+// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a,
-.dropdown-menu > .disabled > a:hover {
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
color: @grayLight;
}
-// Nuke hover effects
-.dropdown-menu > .disabled > a:hover {
+// Nuke hover/focus effects
+.dropdown-menu > .disabled > a:hover
+.dropdown-menu > .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
diff --git a/less/labels-badges.less b/less/labels-badges.less
index 9c3a40bfbf82..bc321fe5c186 100644
--- a/less/labels-badges.less
+++ b/less/labels-badges.less
@@ -35,10 +35,12 @@
}
}
-// Hover state, but only for links
+// Hover/focus state, but only for links
a {
&.label:hover,
- &.badge:hover {
+ &.label:focus,
+ &.badge:hover,
+ &.badge:focus {
color: @white;
text-decoration: none;
cursor: pointer;
diff --git a/less/mixins.less b/less/mixins.less
index 4b09bea4cd2d..f996a3e9ef15 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -506,7 +506,7 @@
.reset-filter();
// in these cases the gradient won't cover the background, so we override
- &:hover, &:active, &.active, &.disabled, &[disabled] {
+ &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
color: @textColor;
background-color: @endColor;
*background-color: darken(@endColor, 5%);
diff --git a/less/navbar.less b/less/navbar.less
index b5793beca80a..668ad38f96f9 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -56,7 +56,8 @@
font-weight: 200;
color: @navbarBrandColor;
text-shadow: 0 1px 0 @navbarBackgroundHighlight;
- &:hover {
+ &:hover,
+ &:focus {
text-decoration: none;
}
}
@@ -73,7 +74,8 @@
// -------------------------
.navbar-link {
color: @navbarLinkColor;
- &:hover {
+ &:hover,
+ &:focus {
color: @navbarLinkColorHover;
}
}
@@ -247,10 +249,10 @@
margin-top: 8px;
}
-// Hover
+// Hover/focus
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
- background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
+ background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
color: @navbarLinkColorHover;
text-decoration: none;
}
@@ -334,8 +336,9 @@
}
}
-// Caret should match text color on hover
-.navbar .nav li.dropdown > a:hover .caret {
+// Caret should match text color on hover/focus
+.navbar .nav li.dropdown > a:hover .caret,
+.navbar .nav li.dropdown > a:focus .caret {
border-top-color: @navbarLinkColorActive;
border-bottom-color: @navbarLinkColorActive;
}
@@ -395,7 +398,8 @@
.nav > li > a {
color: @navbarInverseLinkColor;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
- &:hover {
+ &:hover,
+ &:focus {
color: @navbarInverseLinkColorHover;
}
}
@@ -424,7 +428,8 @@
// Inline text links
.navbar-link {
color: @navbarInverseLinkColor;
- &:hover {
+ &:hover,
+ &:focus {
color: @navbarInverseLinkColorHover;
}
}
@@ -442,7 +447,8 @@
background-color: @navbarInverseLinkBackgroundActive;
color: @navbarInverseLinkColorActive;
}
- .nav li.dropdown > a:hover .caret {
+ .nav li.dropdown > a:hover .caret,
+ .nav li.dropdown > a:focus .caret {
border-top-color: @navbarInverseLinkColorActive;
border-bottom-color: @navbarInverseLinkColorActive;
}
diff --git a/less/navs.less b/less/navs.less
index 2d08e79dacfb..01cd805bde28 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -16,7 +16,8 @@
.nav > li > a {
display: block;
}
-.nav > li > a:hover {
+.nav > li > a:hover,
+.nav > li > a:focus {
text-decoration: none;
background-color: @grayLighter;
}
@@ -68,7 +69,8 @@
padding: 3px 15px;
}
.nav-list > .active > a,
-.nav-list > .active > a:hover {
+.nav-list > .active > a:hover,
+.nav-list > .active > a:focus {
color: @white;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: @linkColor;
@@ -122,13 +124,15 @@
line-height: @baseLineHeight;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
- &:hover {
+ &:hover,
+ &:focus {
border-color: @grayLighter @grayLighter #ddd;
}
}
-// Active state, and it's :hover to override normal :hover
+// Active state, and it's :hover/:focus to override normal :hover/:focus
.nav-tabs > .active > a,
-.nav-tabs > .active > a:hover {
+.nav-tabs > .active > a:hover,
+.nav-tabs > .active > a:focus {
color: @gray;
background-color: @bodyBackground;
border: 1px solid #ddd;
@@ -151,7 +155,8 @@
// Active state
.nav-pills > .active > a,
-.nav-pills > .active > a:hover {
+.nav-pills > .active > a:hover,
+.nav-pills > .active > a:focus {
color: @white;
background-color: @linkColor;
}
@@ -183,7 +188,8 @@
.nav-tabs.nav-stacked > li:last-child > a {
.border-bottom-radius(4px);
}
-.nav-tabs.nav-stacked > li > a:hover {
+.nav-tabs.nav-stacked > li > a:hover,
+.nav-tabs.nav-stacked > li > a:focus {
border-color: #ddd;
z-index: 2;
}
@@ -216,7 +222,8 @@
border-bottom-color: @linkColor;
margin-top: 6px;
}
-.nav .dropdown-toggle:hover .caret {
+.nav .dropdown-toggle:hover .caret,
+.nav .dropdown-toggle:focus .caret {
border-top-color: @linkColorHover;
border-bottom-color: @linkColorHover;
}
@@ -236,9 +243,10 @@
border-bottom-color: @gray;
}
-// Active:hover dropdown links
+// Active:hover/:focus dropdown links
// -------------------------
-.nav > .dropdown.active > a:hover {
+.nav > .dropdown.active > a:hover,
+.nav > .dropdown.active > a:focus {
cursor: pointer;
}
@@ -246,21 +254,24 @@
// -------------------------
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
-.nav > li.dropdown.open.active > a:hover {
+.nav > li.dropdown.open.active > a:hover,
+.nav > li.dropdown.open.active > a:focus {
color: @white;
background-color: @grayLight;
border-color: @grayLight;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
-.nav li.dropdown.open a:hover .caret {
+.nav li.dropdown.open a:hover .caret,
+.nav li.dropdown.open a:focus .caret {
border-top-color: @white;
border-bottom-color: @white;
.opacity(100);
}
// Dropdowns in stacked tabs
-.tabs-stacked .open > a:hover {
+.tabs-stacked .open > a:hover,
+.tabs-stacked .open > a:focus {
border-color: @grayLight;
}
@@ -311,13 +322,15 @@
}
.tabs-below > .nav-tabs > li > a {
.border-radius(0 0 4px 4px);
- &:hover {
+ &:hover,
+ &:focus {
border-bottom-color: transparent;
border-top-color: #ddd;
}
}
.tabs-below > .nav-tabs > .active > a,
-.tabs-below > .nav-tabs > .active > a:hover {
+.tabs-below > .nav-tabs > .active > a:hover,
+.tabs-below > .nav-tabs > .active > a:focus {
border-color: transparent #ddd #ddd #ddd;
}
@@ -346,11 +359,13 @@
margin-right: -1px;
.border-radius(4px 0 0 4px);
}
-.tabs-left > .nav-tabs > li > a:hover {
+.tabs-left > .nav-tabs > li > a:hover,
+.tabs-left > .nav-tabs > li > a:focus {
border-color: @grayLighter #ddd @grayLighter @grayLighter;
}
.tabs-left > .nav-tabs .active > a,
-.tabs-left > .nav-tabs .active > a:hover {
+.tabs-left > .nav-tabs .active > a:hover,
+.tabs-left > .nav-tabs .active > a:focus {
border-color: #ddd transparent #ddd #ddd;
*border-right-color: @white;
}
@@ -365,11 +380,13 @@
margin-left: -1px;
.border-radius(0 4px 4px 0);
}
-.tabs-right > .nav-tabs > li > a:hover {
+.tabs-right > .nav-tabs > li > a:hover,
+.tabs-right > .nav-tabs > li > a:focus {
border-color: @grayLighter @grayLighter @grayLighter #ddd;
}
.tabs-right > .nav-tabs .active > a,
-.tabs-right > .nav-tabs .active > a:hover {
+.tabs-right > .nav-tabs .active > a:hover,
+.tabs-right > .nav-tabs .active > a:focus {
border-color: #ddd #ddd #ddd transparent;
*border-left-color: @white;
}
@@ -383,8 +400,9 @@
.nav > .disabled > a {
color: @grayLight;
}
-// Nuke hover effects
-.nav > .disabled > a:hover {
+// Nuke hover/focus effects
+.nav > .disabled > a:hover,
+.nav > .disabled > a:focus {
text-decoration: none;
background-color: transparent;
cursor: default;
diff --git a/less/pager.less b/less/pager.less
index da2425367211..1476188297ef 100644
--- a/less/pager.less
+++ b/less/pager.less
@@ -20,7 +20,8 @@
border: 1px solid #ddd;
.border-radius(15px);
}
-.pager li > a:hover {
+.pager li > a:hover,
+.pager li > a:focus {
text-decoration: none;
background-color: #f5f5f5;
}
@@ -34,6 +35,7 @@
}
.pager .disabled > a,
.pager .disabled > a:hover,
+.pager .disabled > a:focus,
.pager .disabled > span {
color: @grayLight;
background-color: #fff;
diff --git a/less/pagination.less b/less/pagination.less
index e35d3f4a8e85..a789db2d28b7 100644
--- a/less/pagination.less
+++ b/less/pagination.less
@@ -32,6 +32,7 @@
border-left-width: 0;
}
.pagination ul > li > a:hover,
+.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
background-color: @paginationActiveBackground;
@@ -43,7 +44,8 @@
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
-.pagination ul > .disabled > a:hover {
+.pagination ul > .disabled > a:hover,
+.pagination ul > .disabled > a:focus {
color: @grayLight;
background-color: transparent;
cursor: default;
diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less
index 2a0b0c057f50..21cd3ba6717e 100644
--- a/less/responsive-navbar.less
+++ b/less/responsive-navbar.less
@@ -81,7 +81,9 @@
margin-bottom: 2px;
}
.nav-collapse .nav > li > a:hover,
- .nav-collapse .dropdown-menu a:hover {
+ .nav-collapse .nav > li > a:focus,
+ .nav-collapse .dropdown-menu a:hover,
+ .nav-collapse .dropdown-menu a:focus {
background-color: @navbarBackground;
}
.navbar-inverse .nav-collapse .nav > li > a,
@@ -89,7 +91,9 @@
color: @navbarInverseLinkColor;
}
.navbar-inverse .nav-collapse .nav > li > a:hover,
- .navbar-inverse .nav-collapse .dropdown-menu a:hover {
+ .navbar-inverse .nav-collapse .nav > li > a:focus,
+ .navbar-inverse .nav-collapse .dropdown-menu a:hover,
+ .navbar-inverse .nav-collapse .dropdown-menu a:focus {
background-color: @navbarInverseBackground;
}
// Buttons in the navbar
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 7a7496a64ed8..f17e8cadb402 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -23,7 +23,8 @@ a {
color: @linkColor;
text-decoration: none;
}
-a:hover {
+a:hover,
+a:focus {
color: @linkColorHover;
text-decoration: underline;
}
diff --git a/less/sprites.less b/less/sprites.less
index 9cd2ae3bfd95..2a79ef8f2732 100644
--- a/less/sprites.less
+++ b/less/sprites.less
@@ -28,7 +28,7 @@
margin-top: 1px;
}
-/* White icons with optional class, or on hover/active states of certain elements */
+/* White icons with optional class, or on hover/focus/active states of certain elements */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
@@ -37,11 +37,15 @@
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
+.dropdown-menu > li > a:focus > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
+.dropdown-menu > li > a:focus > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
-.dropdown-submenu:hover > a > [class*=" icon-"] {
+.dropdown-submenu:focus > a > [class^="icon-"],
+.dropdown-submenu:hover > a > [class*=" icon-"],
+.dropdown-submenu:focus > a > [class*=" icon-"] {
background-image: url("@{iconWhiteSpritePath}");
}
diff --git a/less/thumbnails.less b/less/thumbnails.less
index a84a7d37d921..4fd07d25337d 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -33,8 +33,9 @@
.box-shadow(0 1px 3px rgba(0,0,0,.055));
.transition(all .2s ease-in-out);
}
-// Add a hover state for linked versions only
-a.thumbnail:hover {
+// Add a hover/focus state for linked versions only
+a.thumbnail:hover,
+a.thumbnail:focus {
border-color: @linkColor;
.box-shadow(0 1px 4px rgba(0,105,214,.25));
}
diff --git a/less/type.less b/less/type.less
index 6b1c6d2912bc..58a4d4794cf3 100644
--- a/less/type.less
+++ b/less/type.less
@@ -29,19 +29,24 @@ cite { font-style: normal; }
// Utility classes
.muted { color: @grayLight; }
-a.muted:hover { color: darken(@grayLight, 10%); }
+a.muted:hover,
+a.muted:focus { color: darken(@grayLight, 10%); }
.text-warning { color: @warningText; }
-a.text-warning:hover { color: darken(@warningText, 10%); }
+a.text-warning:hover,
+a.text-warning:focus { color: darken(@warningText, 10%); }
.text-error { color: @errorText; }
-a.text-error:hover { color: darken(@errorText, 10%); }
+a.text-error:hover,
+a.text-error:focus { color: darken(@errorText, 10%); }
.text-info { color: @infoText; }
-a.text-info:hover { color: darken(@infoText, 10%); }
+a.text-info:hover,
+a.text-info:focus { color: darken(@infoText, 10%); }
.text-success { color: @successText; }
-a.text-success:hover { color: darken(@successText, 10%); }
+a.text-success:hover,
+a.text-success:focus { color: darken(@successText, 10%); }
// Headings