Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Basic keyboard accessibility CSS tweaks

Mostly doubling-up :hover styles to also cover :focus, as a first step
to making the framework more keyboard-friendly.
Additionally, fixed two small markup issues in the docs/examples to
make the "Learn more" large primary button-styled links
keyboard-focusable (as without href they're treated as non-tabable
anchors).
  • Loading branch information...
commit 848ca6e31562fc65da891cce9046853bd16564eb 1 parent 1c0e4fc
@patrickhlauke patrickhlauke authored
View
215 docs/assets/css/bootstrap-responsive.css
@@ -7,22 +7,18 @@
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
-
.clearfix {
*zoom: 1;
}
-
.clearfix:before,
.clearfix:after {
display: table;
- line-height: 0;
content: "";
+ line-height: 0;
}
-
.clearfix:after {
clear: both;
}
-
.hide-text {
font: 0/0 a;
color: transparent;
@@ -30,41 +26,33 @@
background-color: transparent;
border: 0;
}
-
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
-
@-ms-viewport {
width: device-width;
}
-
.hidden {
display: none;
visibility: hidden;
}
-
.visible-phone {
display: none !important;
}
-
.visible-tablet {
display: none !important;
}
-
.hidden-desktop {
display: none !important;
}
-
.visible-desktop {
display: inherit !important;
}
-
@media (min-width: 768px) and (max-width: 979px) {
.hidden-desktop {
display: inherit !important;
@@ -79,7 +67,6 @@
display: none !important;
}
}
-
@media (max-width: 767px) {
.hidden-desktop {
display: inherit !important;
@@ -94,7 +81,6 @@
display: none !important;
}
}
-
@media (min-width: 1200px) {
.row {
margin-left: -30px;
@@ -103,8 +89,8 @@
.row:before,
.row:after {
display: table;
- line-height: 0;
content: "";
+ line-height: 0;
}
.row:after {
clear: both;
@@ -199,22 +185,22 @@
.row-fluid:before,
.row-fluid:after {
display: table;
- line-height: 0;
content: "";
+ line-height: 0;
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
- float: left;
width: 100%;
min-height: 30px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ float: left;
margin-left: 2.564102564102564%;
*margin-left: 2.5109110747408616%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
@@ -374,64 +360,40 @@
.controls-row [class*="span"] + [class*="span"] {
margin-left: 30px;
}
- input.span12,
- textarea.span12,
- .uneditable-input.span12 {
+ input.span12, textarea.span12, .uneditable-input.span12 {
width: 1156px;
}
- input.span11,
- textarea.span11,
- .uneditable-input.span11 {
+ input.span11, textarea.span11, .uneditable-input.span11 {
width: 1056px;
}
- input.span10,
- textarea.span10,
- .uneditable-input.span10 {
+ input.span10, textarea.span10, .uneditable-input.span10 {
width: 956px;
}
- input.span9,
- textarea.span9,
- .uneditable-input.span9 {
+ input.span9, textarea.span9, .uneditable-input.span9 {
width: 856px;
}
- input.span8,
- textarea.span8,
- .uneditable-input.span8 {
+ input.span8, textarea.span8, .uneditable-input.span8 {
width: 756px;
}
- input.span7,
- textarea.span7,
- .uneditable-input.span7 {
+ input.span7, textarea.span7, .uneditable-input.span7 {
width: 656px;
}
- input.span6,
- textarea.span6,
- .uneditable-input.span6 {
+ input.span6, textarea.span6, .uneditable-input.span6 {
width: 556px;
}
- input.span5,
- textarea.span5,
- .uneditable-input.span5 {
+ input.span5, textarea.span5, .uneditable-input.span5 {
width: 456px;
}
- input.span4,
- textarea.span4,
- .uneditable-input.span4 {
+ input.span4, textarea.span4, .uneditable-input.span4 {
width: 356px;
}
- input.span3,
- textarea.span3,
- .uneditable-input.span3 {
+ input.span3, textarea.span3, .uneditable-input.span3 {
width: 256px;
}
- input.span2,
- textarea.span2,
- .uneditable-input.span2 {
+ input.span2, textarea.span2, .uneditable-input.span2 {
width: 156px;
}
- input.span1,
- textarea.span1,
- .uneditable-input.span1 {
+ input.span1, textarea.span1, .uneditable-input.span1 {
width: 56px;
}
.thumbnails {
@@ -444,7 +406,6 @@
margin-left: 0;
}
}
-
@media (min-width: 768px) and (max-width: 979px) {
.row {
margin-left: -20px;
@@ -453,8 +414,8 @@
.row:before,
.row:after {
display: table;
- line-height: 0;
content: "";
+ line-height: 0;
}
.row:after {
clear: both;
@@ -549,22 +510,22 @@
.row-fluid:before,
.row-fluid:after {
display: table;
- line-height: 0;
content: "";
+ line-height: 0;
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
- float: left;
width: 100%;
min-height: 30px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ float: left;
margin-left: 2.7624309392265194%;
*margin-left: 2.709239449864817%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
@@ -724,86 +685,61 @@
.controls-row [class*="span"] + [class*="span"] {
margin-left: 20px;
}
- input.span12,
- textarea.span12,
- .uneditable-input.span12 {
+ input.span12, textarea.span12, .uneditable-input.span12 {
width: 710px;
}
- input.span11,
- textarea.span11,
- .uneditable-input.span11 {
+ input.span11, textarea.span11, .uneditable-input.span11 {
width: 648px;
}
- input.span10,
- textarea.span10,
- .uneditable-input.span10 {
+ input.span10, textarea.span10, .uneditable-input.span10 {
width: 586px;
}
- input.span9,
- textarea.span9,
- .uneditable-input.span9 {
+ input.span9, textarea.span9, .uneditable-input.span9 {
width: 524px;
}
- input.span8,
- textarea.span8,
- .uneditable-input.span8 {
+ input.span8, textarea.span8, .uneditable-input.span8 {
width: 462px;
}
- input.span7,
- textarea.span7,
- .uneditable-input.span7 {
+ input.span7, textarea.span7, .uneditable-input.span7 {
width: 400px;
}
- input.span6,
- textarea.span6,
- .uneditable-input.span6 {
+ input.span6, textarea.span6, .uneditable-input.span6 {
width: 338px;
}
- input.span5,
- textarea.span5,
- .uneditable-input.span5 {
+ input.span5, textarea.span5, .uneditable-input.span5 {
width: 276px;
}
- input.span4,
- textarea.span4,
- .uneditable-input.span4 {
+ input.span4, textarea.span4, .uneditable-input.span4 {
width: 214px;
}
- input.span3,
- textarea.span3,
- .uneditable-input.span3 {
+ input.span3, textarea.span3, .uneditable-input.span3 {
width: 152px;
}
- input.span2,
- textarea.span2,
- .uneditable-input.span2 {
+ input.span2, textarea.span2, .uneditable-input.span2 {
width: 90px;
}
- input.span1,
- textarea.span1,
- .uneditable-input.span1 {
+ input.span1, textarea.span1, .uneditable-input.span1 {
width: 28px;
}
}
-
@media (max-width: 767px) {
body {
- padding-right: 20px;
padding-left: 20px;
+ padding-right: 20px;
}
.navbar-fixed-top,
.navbar-fixed-bottom,
.navbar-static-top {
- margin-right: -20px;
margin-left: -20px;
+ margin-right: -20px;
}
.container-fluid {
padding: 0;
}
.dl-horizontal dt {
float: none;
- width: auto;
clear: none;
+ width: auto;
text-align: left;
}
.dl-horizontal dd {
@@ -826,20 +762,20 @@
[class*="span"],
.uneditable-input[class*="span"],
.row-fluid [class*="span"] {
- display: block;
float: none;
+ display: block;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
.span12,
.row-fluid .span12 {
width: 100%;
-webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;
@@ -855,8 +791,8 @@
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
.input-prepend input,
.input-append input,
@@ -871,8 +807,8 @@
.modal {
position: fixed;
top: 20px;
- right: 20px;
left: 20px;
+ right: 20px;
width: auto;
margin: 0;
}
@@ -883,7 +819,6 @@
top: 20px;
}
}
-
@media (max-width: 480px) {
.nav-collapse {
-webkit-transform: translate3d(0, 0, 0);
@@ -909,13 +844,13 @@
padding-top: 0;
}
.form-horizontal .form-actions {
- padding-right: 10px;
padding-left: 10px;
+ padding-right: 10px;
}
.media .pull-left,
.media .pull-right {
- display: block;
float: none;
+ display: block;
margin-bottom: 10px;
}
.media-object {
@@ -924,8 +859,8 @@
}
.modal {
top: 10px;
- right: 10px;
left: 10px;
+ right: 10px;
}
.modal-header .close {
padding: 10px;
@@ -935,7 +870,6 @@
position: static;
}
}
-
@media (max-width: 979px) {
body {
padding-top: 0;
@@ -959,8 +893,8 @@
padding: 0;
}
.navbar .brand {
- padding-right: 10px;
padding-left: 10px;
+ padding-right: 10px;
margin: 0 0 0 -5px;
}
.nav-collapse {
@@ -989,21 +923,23 @@
font-weight: bold;
color: #777777;
-webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
}
.nav-collapse .btn {
padding: 4px 10px 4px;
font-weight: normal;
-webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
}
.nav-collapse .dropdown-menu li + li a {
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,30 +947,32 @@
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 {
- padding: 0;
margin-top: 5px;
+ padding: 0;
}
.nav-collapse .dropdown-menu {
position: static;
top: auto;
left: auto;
- display: none;
float: none;
+ display: none;
max-width: none;
- padding: 0;
margin: 0 15px;
+ padding: 0;
background-color: transparent;
border: none;
-webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
-webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
}
.nav-collapse .open > .dropdown-menu {
display: block;
@@ -1057,9 +995,9 @@
margin: 10px 0;
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
- -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
- -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+ -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
+ -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
+ box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
}
.navbar-inverse .nav-collapse .navbar-form,
.navbar-inverse .nav-collapse .navbar-search {
@@ -1072,18 +1010,17 @@
}
.nav-collapse,
.nav-collapse.collapse {
- height: 0;
overflow: hidden;
+ height: 0;
}
.navbar .btn-navbar {
display: block;
}
.navbar-static .navbar-inner {
- padding-right: 10px;
padding-left: 10px;
+ padding-right: 10px;
}
}
-
@media (min-width: 980px) {
.nav-collapse.collapse {
height: auto !important;
View
2,220 docs/assets/css/bootstrap.css
676 additions, 1,544 deletions not shown
View
2  docs/examples/fluid.html
@@ -86,7 +86,7 @@
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>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.</p>
- <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
+ <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>
<div class="row-fluid">
<div class="span4">
View
2  docs/examples/hero.html
@@ -75,7 +75,7 @@
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>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.</p>
- <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
+ <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>
<!-- Example row of columns -->
View
13 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;
}
View
5 less/carousel.less
@@ -97,8 +97,9 @@
right: 15px;
}
- // Hover state
- &:hover {
+ // Hover/focus state
+ &:hover,
+ &:focus {
color: @white;
text-decoration: none;
.opacity(90);
View
3  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;
View
18 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
View
6 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;
View
2  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%);
View
24 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;
}
View
60 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;
View
4 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;
View
4 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;
View
8 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
View
3  less/scaffolding.less
@@ -23,7 +23,8 @@ a {
color: @linkColor;
text-decoration: none;
}
-a:hover {
+a:hover,
+a:focus {
color: @linkColorHover;
text-decoration: underline;
}
View
8 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}");
}
View
5 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));
}
View
15 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
Please sign in to comment.
Something went wrong with that request. Please try again.