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