_navs.scss in bootstrap-sass-rails-rtl-2.3.1.0

- old
+ new

@@ -15,11 +15,12 @@
 
 // Make links block level
 .nav > li > a {
   display: block;
 }
-.nav > li > a:hover {
+.nav > li > a:hover,
+.nav > li > a:focus {
   text-decoration: none;
   background-color: $grayLighter;
 }
 
 // Prevent IE8 from misplacing imgs
@@ -67,11 +68,12 @@
 }
 .nav-list > li > a {
   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;
 }
 .nav-list [class^="icon-"],
@@ -122,17 +124,19 @@
   padding-top: 8px;
   padding-bottom: 8px;
   line-height: $baseLineHeight;
   border: 1px solid transparent;
   @include 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;
   border-bottom-color: transparent;
   cursor: default;
@@ -185,11 +189,12 @@
 }
 .nav-tabs.nav-stacked > li:last-child > a {
   @include border-radius(0 0 4px 4px);
   @include 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;
 }
 
 // Pills
@@ -218,11 +223,12 @@
 .nav .dropdown-toggle .caret {
   border-top-color: $linkColor;
   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;
 }
 /* move down carets for tabs */
 .nav-tabs .dropdown-toggle .caret {
@@ -238,35 +244,39 @@
 .nav-tabs .active .dropdown-toggle .caret {
   border-top-color: $gray;
   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;
 }
 
 // Open dropdowns
 // -------------------------
 .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;
   @include opacity(100);
 }
 
 // Dropdowns in stacked tabs
-.tabs-stacked .open > a:hover {
+.tabs-stacked .open > a:hover,
+.tabs-stacked .open > a:focus {
   border-color: $grayLight;
 }
 
 
 
@@ -313,17 +323,19 @@
   margin-top: -1px;
   margin-bottom: 0;
 }
 .tabs-below > .nav-tabs > li > a {
   @include 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;
 }
 
 // LEFT & RIGHT
 // ------------
@@ -348,15 +360,17 @@
 }
 .tabs-left > .nav-tabs > li > a {
   margin-right: -1px;
   @include 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;
 }
 
 // Tabs on the right
@@ -385,11 +399,12 @@
 
 // Gray out text
 .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;
 }