navbar.less in twitter-bootstrap-rails-2.2.3

- old
+ new

@@ -54,11 +54,12 @@
   margin-left: -20px; // negative indent to left-align the text down the page
   font-size: 20px;
   font-weight: 200;
   color: @navbarBrandColor;
   text-shadow: 0 1px 0 @navbarBackgroundHighlight;
-  &:hover {
+  &:hover,
+  &:focus {
     text-decoration: none;
   }
 }
 
 // Plain text in topbar
@@ -71,11 +72,12 @@
 
 // Janky solution for now to account for links outside the .nav
 // -------------------------
 .navbar-link {
   color: @navbarLinkColor;
-  &:hover {
+  &:hover,
+  &:focus {
     color: @navbarLinkColorHover;
   }
 }
 
 // Dividers in navbar
@@ -93,11 +95,13 @@
 .navbar .btn-group {
   .navbarVerticalAlign(30px); // Vertically center in navbar
 }
 .navbar .btn-group .btn,
 .navbar .input-prepend .btn,
-.navbar .input-append .btn {
+.navbar .input-append .btn,
+.navbar .input-prepend .btn-group,
+.navbar .input-append .btn-group {
   margin-top: 0; // then undo the margin here so we don't accidentally double it
 }
 
 // Navbar forms
 // -------------------------
@@ -243,17 +247,16 @@
   text-decoration: none;
   text-shadow: 0 1px 0 @navbarBackgroundHighlight;
 }
 .navbar .nav .dropdown-toggle .caret {
   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;
 }
 
 // Active nav items
@@ -333,14 +336,15 @@
     bottom: -6px;
     top: auto;
   }
 }
 
-// Caret should match text color on hover
-.navbar .nav li.dropdown > a:hover .caret {
-  border-top-color: @navbarLinkColorActive;
-  border-bottom-color: @navbarLinkColorActive;
+// 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
 .navbar .nav li.dropdown.open > .dropdown-toggle,
 .navbar .nav li.dropdown.active > .dropdown-toggle,
@@ -394,11 +398,12 @@
 
   .brand,
   .nav > li > a {
     color: @navbarInverseLinkColor;
     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-    &:hover {
+    &:hover,
+    &:focus {
       color: @navbarInverseLinkColorHover;
     }
   }
 
   .brand {
@@ -423,11 +428,12 @@
   }
 
   // Inline text links
   .navbar-link {
     color: @navbarInverseLinkColor;
-    &:hover {
+    &:hover,
+    &:focus {
       color: @navbarInverseLinkColorHover;
     }
   }
 
   // Dividers in navbar
@@ -441,10 +447,11 @@
   .nav li.dropdown.active > .dropdown-toggle,
   .nav li.dropdown.open.active > .dropdown-toggle {
     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;
   }
   .nav li.dropdown > .dropdown-toggle .caret {
     border-top-color: @navbarInverseLinkColor;