fix topbar dropdown active and hover states

diff --git a/bootstrap-1.0.0.css b/bootstrap-1.0.0.css
index edcb06b88d12c35794eaebe1f6a1269dad29a3ee..8d9774984f6938d532cf3fd4b14a3b553530d110 100644 (file)
--- a/bootstrap-1.0.0.css
+++ b/bootstrap-1.0.0.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sun Aug 21 20:27:08 PDT 2011
+ * Date: Sun Aug 21 20:30:19 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here      that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -1087,7 +1087,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
 /* Patterns.less
  * Repeatable UI elements outside the base styles provided from the scaffolding
  * ---------------------------------------------------------------------------- */
-div.topbar {
+.topbar {
   background-color: #222222;
   background-repeat: repeat-x;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
@@ -1108,17 +1108,17 @@ div.topbar {
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 }
-div.topbar a {
+.topbar a {
   color: #bfbfbf;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
-div.topbar a:hover, div.topbar ul li.active a {
+.topbar a:hover, .topbar ul li.active a {
   background-color: #333;
   background-color: rgba(255, 255, 255, 0.05);
   color: #ffffff;
   text-decoration: none;
 }
-div.topbar h3 a {
+.topbar h3 a {
   float: left;
   display: block;
   padding: 8px 20px 12px;
@@ -1128,7 +1128,7 @@ div.topbar h3 a {
   font-weight: 200;
   line-height: 1;
 }
-div.topbar form {
+.topbar form {
   float: left;
   margin: 5px 0 0 0;
   position: relative;
@@ -1137,7 +1137,7 @@ div.topbar form {
   -moz-opacity: 1;
   opacity: 1;
 }
-div.topbar form input {
+.topbar form input {
   background-color: #bfbfbf;
   background-color: rgba(255, 255, 255, 0.3);
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -1159,18 +1159,18 @@ div.topbar form input {
   -moz-transition: none;
   transition: none;
 }
-div.topbar form input:-moz-placeholder {
+.topbar form input:-moz-placeholder {
   color: #e6e6e6;
 }
-div.topbar form input::-webkit-input-placeholder {
+.topbar form input::-webkit-input-placeholder {
   color: #e6e6e6;
 }
-div.topbar form input:hover {
+.topbar form input:hover {
   background-color: #444;
   background-color: rgba(255, 255, 255, 0.5);
   color: #fff;
 }
-div.topbar form input:focus, div.topbar form input.focused {
+.topbar form input:focus, .topbar form input.focused {
   outline: none;
   background-color: #fff;
   color: #404040;
@@ -1181,47 +1181,47 @@ div.topbar form input:focus, div.topbar form input.focused {
   -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
 }
-div.topbar ul {
+.topbar ul {
   display: block;
   float: left;
   margin: 0 10px 0 0;
   position: relative;
 }
-div.topbar ul.secondary-nav {
+.topbar ul.secondary-nav {
   float: right;
   margin-left: 10px;
   margin-right: 0;
 }
-div.topbar ul li {
+.topbar ul li {
   display: block;
   float: left;
   font-size: 13px;
 }
-div.topbar ul li a {
+.topbar ul li a {
   display: block;
   float: none;
   padding: 10px 10px 11px;
   line-height: 19px;
   text-decoration: none;
 }
-div.topbar ul li a:hover {
+.topbar ul li a:hover {
   color: #fff;
   text-decoration: none;
 }
-div.topbar ul li.active a {
+.topbar ul li.active a {
   background-color: #222;
   background-color: rgba(0, 0, 0, 0.5);
 }
-div.topbar ul.primary-nav li ul {
+.topbar ul.primary-nav li ul {
   left: 0;
 }
-div.topbar ul.secondary-nav li ul {
+.topbar ul.secondary-nav li ul {
   right: 0;
 }
-div.topbar ul li.menu {
+.topbar ul li.menu {
   position: relative;
 }
-div.topbar ul li.menu a.menu:after {
+.topbar ul li.menu a.menu:after {
   width: 0px;
   height: 0px;
   display: inline-block;
@@ -1238,27 +1238,27 @@ div.topbar ul li.menu a.menu:after {
   -moz-opacity: 0.5;
   opacity: 0.5;
 }
-div.topbar ul li.menu.open a.menu, div.topbar ul li.menu.open a:hover {
-  background-color: #00b4eb;
+.topbar ul li.menu.open a.menu, .topbar ul li.menu.open a:hover {
+  background-color: #333;
   background-color: rgba(255, 255, 255, 0.1);
   color: #fff;
 }
-div.topbar ul li.menu.open ul {
+.topbar ul li.menu.open ul {
   display: block;
 }
-div.topbar ul li.menu.open ul li a {
+.topbar ul li.menu.open ul li a {
   background-color: transparent;
   font-weight: normal;
 }
-div.topbar ul li.menu.open ul li a:hover {
+.topbar ul li.menu.open ul li a:hover {
   background-color: rgba(255, 255, 255, 0.1);
   color: #fff;
 }
-div.topbar ul li.menu.open ul li.active a {
+.topbar ul li.menu.open ul li.active a {
   background-color: rgba(255, 255, 255, 0.1);
   font-weight: bold;
 }
-div.topbar ul li ul {
+.topbar ul li ul {
   background-color: #333;
   float: left;
   display: none;
@@ -1280,14 +1280,14 @@ div.topbar ul li ul {
   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 }
-div.topbar ul li ul li {
+.topbar ul li ul li {
   float: none;
   clear: both;
   display: block;
   background: none;
   font-size: 12px;
 }
-div.topbar ul li ul li a {
+.topbar ul li ul li a {
   display: block;
   padding: 6px 15px;
   clear: both;
@@ -1295,19 +1295,19 @@ div.topbar ul li ul li a {
   line-height: 19px;
   color: #bbb;
 }
-div.topbar ul li ul li a:hover {
+.topbar ul li ul li a:hover {
   background-color: #333;
   background-color: rgba(255, 255, 255, 0.25);
   color: #fff;
 }
-div.topbar ul li ul li.divider {
+.topbar ul li ul li.divider {
   height: 1px;
   overflow: hidden;
   background: rgba(0, 0, 0, 0.2);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   margin: 5px 0;
 }
-div.topbar ul li ul li span {
+.topbar ul li ul li span {
   clear: both;
   display: block;
   background: rgba(0, 0, 0, 0.2);

diff --git a/bootstrap-1.0.0.min.css b/bootstrap-1.0.0.min.css
index 273fb6eb9e922519c58b1c9643868fa0c561ed3a..2fd6ddd5ef84d83f3b1279cb4e212fbb6ca596db 100644 (file)
--- a/bootstrap-1.0.0.min.css
+++ b/bootstrap-1.0.0.min.css
@@ -152,25 +152,25 @@ table .orange{color:#f89406;border-bottom-color:#f89406;}
 table .headerSortUp.orange,table .headerSortDown.orange{background-color:#fee9cc;}
 table .purple{color:#7a43b6;border-bottom-color:#7a43b6;}
 table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0;}
-div.topbar{background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(#333333, #222222);background-image:-ms-linear-gradient(#333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(#333333, #222222);background-image:-o-linear-gradient(#333333, #222222);background-image:linear-gradient(#333333, #222222);height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}div.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
-div.topbar a:hover,div.topbar ul li.active a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
-div.topbar h3 a{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
-div.topbar form{float:left;margin:5px 0 0 0;position:relative;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}div.topbar form input{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;width:220px;padding:4px 9px;color:#fff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;transition:none;}div.topbar form input:-moz-placeholder{color:#e6e6e6;}
-div.topbar form input::-webkit-input-placeholder{color:#e6e6e6;}
-div.topbar form input:hover{background-color:#444;background-color:rgba(255, 255, 255, 0.5);color:#fff;}
-div.topbar form input:focus,div.topbar form input.focused{outline:none;background-color:#fff;color:#404040;text-shadow:0 1px 0 #fff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);}
-div.topbar ul{display:block;float:left;margin:0 10px 0 0;position:relative;}div.topbar ul.secondary-nav{float:right;margin-left:10px;margin-right:0;}
-div.topbar ul li{display:block;float:left;font-size:13px;}div.topbar ul li a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}div.topbar ul li a:hover{color:#fff;text-decoration:none;}
-div.topbar ul li.active a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
-div.topbar ul.primary-nav li ul{left:0;}
-div.topbar ul.secondary-nav li ul{right:0;}
-div.topbar ul li.menu{position:relative;}div.topbar ul li.menu a.menu:after{width:0px;height:0px;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #fff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
-div.topbar ul li.menu.open a.menu,div.topbar ul li.menu.open a:hover{background-color:#00b4eb;background-color:rgba(255, 255, 255, 0.1);color:#fff;}
-div.topbar ul li.menu.open ul{display:block;}div.topbar ul li.menu.open ul li a{background-color:transparent;font-weight:normal;}div.topbar ul li.menu.open ul li a:hover{background-color:rgba(255, 255, 255, 0.1);color:#fff;}
-div.topbar ul li.menu.open ul li.active a{background-color:rgba(255, 255, 255, 0.1);font-weight:bold;}
-div.topbar ul li ul{background-color:#333;float:left;display:none;position:absolute;top:40px;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:0;text-align:left;border:0;zoom:1;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);}div.topbar ul li ul li{float:none;clear:both;display:block;background:none;font-size:12px;}div.topbar ul li ul li a{display:block;padding:6px 15px;clear:both;font-weight:normal;line-height:19px;color:#bbb;}div.topbar ul li ul li a:hover{background-color:#333;background-color:rgba(255, 255, 255, 0.25);color:#fff;}
-div.topbar ul li ul li.divider{height:1px;overflow:hidden;background:rgba(0, 0, 0, 0.2);border-bottom:1px solid rgba(255, 255, 255, 0.1);margin:5px 0;}
-div.topbar ul li ul li span{clear:both;display:block;background:rgba(0, 0, 0, 0.2);padding:6px 15px;cursor:default;color:#808080;border-top:1px solid rgba(0, 0, 0, 0.2);}
+.topbar{background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(#333333, #222222);background-image:-ms-linear-gradient(#333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(#333333, #222222);background-image:-o-linear-gradient(#333333, #222222);background-image:linear-gradient(#333333, #222222);height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
+.topbar a:hover,.topbar ul li.active a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
+.topbar h3 a{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
+.topbar form{float:left;margin:5px 0 0 0;position:relative;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}.topbar form input{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;width:220px;padding:4px 9px;color:#fff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;transition:none;}.topbar form input:-moz-placeholder{color:#e6e6e6;}
+.topbar form input::-webkit-input-placeholder{color:#e6e6e6;}
+.topbar form input:hover{background-color:#444;background-color:rgba(255, 255, 255, 0.5);color:#fff;}
+.topbar form input:focus,.topbar form input.focused{outline:none;background-color:#fff;color:#404040;text-shadow:0 1px 0 #fff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);}
+.topbar ul{display:block;float:left;margin:0 10px 0 0;position:relative;}.topbar ul.secondary-nav{float:right;margin-left:10px;margin-right:0;}
+.topbar ul li{display:block;float:left;font-size:13px;}.topbar ul li a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.topbar ul li a:hover{color:#fff;text-decoration:none;}
+.topbar ul li.active a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
+.topbar ul.primary-nav li ul{left:0;}
+.topbar ul.secondary-nav li ul{right:0;}
+.topbar ul li.menu{position:relative;}.topbar ul li.menu a.menu:after{width:0px;height:0px;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #fff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
+.topbar ul li.menu.open a.menu,.topbar ul li.menu.open a:hover{background-color:#333;background-color:rgba(255, 255, 255, 0.1);color:#fff;}
+.topbar ul li.menu.open ul{display:block;}.topbar ul li.menu.open ul li a{background-color:transparent;font-weight:normal;}.topbar ul li.menu.open ul li a:hover{background-color:rgba(255, 255, 255, 0.1);color:#fff;}
+.topbar ul li.menu.open ul li.active a{background-color:rgba(255, 255, 255, 0.1);font-weight:bold;}
+.topbar ul li ul{background-color:#333;float:left;display:none;position:absolute;top:40px;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:0;text-align:left;border:0;zoom:1;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);}.topbar ul li ul li{float:none;clear:both;display:block;background:none;font-size:12px;}.topbar ul li ul li a{display:block;padding:6px 15px;clear:both;font-weight:normal;line-height:19px;color:#bbb;}.topbar ul li ul li a:hover{background-color:#333;background-color:rgba(255, 255, 255, 0.25);color:#fff;}
+.topbar ul li ul li.divider{height:1px;overflow:hidden;background:rgba(0, 0, 0, 0.2);border-bottom:1px solid rgba(255, 255, 255, 0.1);margin:5px 0;}
+.topbar ul li ul li span{clear:both;display:block;background:rgba(0, 0, 0, 0.2);padding:6px 15px;cursor:default;color:#808080;border-top:1px solid rgba(0, 0, 0, 0.2);}
 .hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
 .hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
 .page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:8px;}

diff --git a/lib/patterns.less b/lib/patterns.less
index 1f8f2896319d91153760d2cb48fb77897f78a531..79b8b2de99e3241fb1e28cb878095cfd068ec8c0 100644 (file)
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -7,7 +7,7 @@
 // ------
 
 // Topbar for Branding and Nav
-div.topbar {
+.topbar {
   #gradient > .vertical(#333, #222);
   height: 40px;
   position: fixed;
@@ -73,11 +73,13 @@ div.topbar {
       &::-webkit-input-placeholder {
         color: @grayLighter;
       }
+      // Hover states
       &:hover {
         background-color: #444;
         background-color: rgba(255,255,255,.5);
         color: #fff;
       }
+      // Focus states (we use .focused since IE8 and down doesn't support :focus)
       &:focus,
       &.focused {
         outline: none;
@@ -151,7 +153,7 @@ div.topbar {
       &.open {
         a.menu,
         a:hover {
-          background-color: lighten(#00a0d1,5);
+          background-color: #333;
           background-color: rgba(255,255,255,.1);
           color: #fff;
         }