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

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
15c7e73a · Mark Otto · cb0fed66 · c5532908 · 15c7e73a · 15c7e73a
Commit 15c7e73a authored 12 years ago by Mark Otto
Expand all Hide whitespace changes
Inline Side-by-side

Showing

with 126 additions and 6159 deletions
+126 -6159
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -1003,7 +1003,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: #f2f2f2;
  }
  .navbar-inverse .nav-collapse .nav > li > a,
@@ -1011,7 +1013,9 @@
    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 {

--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
--- a/docs/examples/fluid.html
+++ b/docs/examples/fluid.html
@@ -95,7 +95,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">

--- a/docs/examples/hero.html
+++ b/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 -->

--- 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;
 }
--- 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);

--- 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;

--- 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

--- 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;

--- 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%);

--- 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;
  }

--- 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;

--- 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;

--- 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;

--- 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

--- 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;
 }

--- 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}");
 }


--- 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));
 }

--- 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; }