diff options
Diffstat (limited to 'less/navs.less')
-rw-r--r-- | less/navs.less | 60 |
1 files changed, 39 insertions, 21 deletions
diff --git a/less/navs.less b/less/navs.less index 2d08e79dac..01cd805bde 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; |