diff options
| author | Mark Otto <[email protected]> | 2013-02-05 19:39:49 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-02-05 19:39:49 -0800 |
| commit | 15c7e73abd8d97f0139d177d05c94e26faa17dd2 (patch) | |
| tree | 5d9a2317d17b669fe4a9ce6863ea59f0ddeea430 /less | |
| parent | cb0fed66933d179b5bc3669a1df7df00b5688cbe (diff) | |
| parent | c55329085ebc6d05d91412251331c0613ea2250b (diff) | |
| download | bootstrap-15c7e73abd8d97f0139d177d05c94e26faa17dd2.tar.xz bootstrap-15c7e73abd8d97f0139d177d05c94e26faa17dd2.zip | |
Merge branch '2.3.0-wip' of https://github.com/patrickhlauke/bootstrap into patrickhlauke-2.3.0-wip
Conflicts:
docs/assets/css/bootstrap.css
less/navbar.less
Diffstat (limited to 'less')
| -rw-r--r-- | less/buttons.less | 13 | ||||
| -rw-r--r-- | less/carousel.less | 5 | ||||
| -rw-r--r-- | less/close.less | 3 | ||||
| -rw-r--r-- | less/dropdowns.less | 18 | ||||
| -rw-r--r-- | less/labels-badges.less | 6 | ||||
| -rw-r--r-- | less/mixins.less | 2 | ||||
| -rw-r--r-- | less/navbar.less | 24 | ||||
| -rw-r--r-- | less/navs.less | 60 | ||||
| -rw-r--r-- | less/pager.less | 4 | ||||
| -rw-r--r-- | less/pagination.less | 4 | ||||
| -rw-r--r-- | less/responsive-navbar.less | 8 | ||||
| -rw-r--r-- | less/scaffolding.less | 3 | ||||
| -rw-r--r-- | less/sprites.less | 8 | ||||
| -rw-r--r-- | less/thumbnails.less | 5 | ||||
| -rw-r--r-- | less/type.less | 15 |
15 files changed, 118 insertions, 60 deletions
diff --git a/less/buttons.less b/less/buttons.less index 71865a748..4cd4d862b 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); } @@ -214,12 +215,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 83045e541..55bc05014 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -98,8 +98,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 c71a508f3..4c626bda6 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 a0d4b1fd0..13490a637 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 9c3a40bfb..bc321fe5c 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 e1db44ed7..cc69d750e 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -517,7 +517,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 cfbc30a6e..fc237a949 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; } } @@ -249,10 +251,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; } @@ -340,6 +342,11 @@ .navbar .nav li.dropdown > a:hover .caret { border-top-color: @navbarLinkColorHover; border-bottom-color: @navbarLinkColorHover; +// 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: @navbarLinkColorHover; + border-bottom-color: @navbarLinkColorHover; } // Remove background color from open dropdown @@ -397,7 +404,8 @@ .nav > li > a { color: @navbarInverseLinkColor; text-shadow: 0 -1px 0 rgba(0,0,0,.25); - &:hover { + &:hover, + &:focus { color: @navbarInverseLinkColorHover; } } @@ -426,7 +434,8 @@ // Inline text links .navbar-link { color: @navbarInverseLinkColor; - &:hover { + &:hover, + &:focus { color: @navbarInverseLinkColorHover; } } @@ -444,7 +453,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 2d08e79da..01cd805bd 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 da2425367..147618829 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 e35d3f4a8..a789db2d2 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 2a0b0c057..21cd3ba67 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 7a7496a64..f17e8cadb 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 65a3d1bc3..1812bf71a 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 a84a7d37d..4fd07d253 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 7eabfd9ad..337138ac8 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%); } .text-left { text-align: left; } .text-right { text-align: right; } |
