From 4f67e135dc2a8ad7a7b3d8946cc7a857a34881a0 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Fri, 26 Aug 2011 20:38:23 -0700
Subject: [PATCH] adding dropdowns to tabs by refactoring the shizzzz out of
them
---
bootstrap-1.1.1.css | 291 +++++++++++++------------
bootstrap-1.1.1.min.css | 41 ++--
docs/assets/js/application.js | 6 +-
docs/index.html | 32 ++-
lib/patterns.less | 398 +++++++++++++++++-----------------
5 files changed, 392 insertions(+), 376 deletions(-)
diff --git a/bootstrap-1.1.1.css b/bootstrap-1.1.1.css
index 9ece1008d4..90c8724939 100644
--- a/bootstrap-1.1.1.css
+++ b/bootstrap-1.1.1.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: Fri Aug 26 15:21:30 PDT 2011
+ * Date: Fri Aug 26 20:37:39 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).
@@ -1205,8 +1205,8 @@ table .headerSortUp.purple, table .headerSortDown.purple {
z-index: 10000;
overflow: visible;
}
-.topbar .fill {
- background: #222;
+.topbar .wrapper {
+ background-color: #222;
background-color: #222222;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
@@ -1296,49 +1296,47 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-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 {
+.nav {
display: block;
float: left;
margin: 0 10px 0 0;
position: relative;
+ left: 0;
}
-.topbar ul.secondary-nav {
+.nav.secondary-nav {
float: right;
margin-left: 10px;
margin-right: 0;
}
-.topbar ul li {
+.nav li {
display: block;
float: left;
font-size: 13px;
}
-.topbar ul li a {
+.nav li a {
display: block;
float: none;
padding: 10px 10px 11px;
line-height: 19px;
text-decoration: none;
}
-.topbar ul li a:hover {
+.nav li a:hover {
color: #fff;
text-decoration: none;
}
-.topbar ul li.active a {
+.nav 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 {
+.nav.secondary-nav li .dropdown-menu {
right: 0;
}
-.topbar ul li.menu {
+.dropdown {
position: relative;
}
-.topbar ul li.menu a.menu:after {
- width: 0px;
- height: 0px;
+.dropdown-toggle:after {
+ width: 0;
+ height: 0;
display: inline-block;
content: "↓";
text-indent: -99999px;
@@ -1353,34 +1351,8 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-moz-opacity: 0.5;
opacity: 0.5;
}
-.topbar ul li.menu.open a.menu, .topbar ul li.menu.open a:hover {
- background-color: #444;
- background-color: rgba(255, 255, 255, 0.1);
- *background-color: #444;
- /* IE6-7 */
-
- 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);
- *background-color: #444;
- /* IE6-7 */
-
- 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;
+.dropdown-menu {
+ background-color: #fff;
float: left;
display: none;
position: absolute;
@@ -1390,53 +1362,151 @@ table .headerSortUp.purple, table .headerSortDown.purple {
_width: 160px;
margin-left: 0;
margin-right: 0;
- padding: 0;
- text-align: left;
- border: 0;
+ padding: 6px 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 {
+ border-color: #999;
+ border-color: rgba(0, 0, 0, 0.2);
+ border-style: solid;
+ border-width: 0 1px 1px;
+ -webkit-border-radius: 0 0 6px 6px;
+ -moz-border-radius: 0 0 6px 6px;
+ border-radius: 0 0 6px 6px;
+ -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding-box;
+ background-clip: padding-box;
+}
+.dropdown-menu li {
float: none;
- clear: both;
display: block;
- background: none;
- font-size: 12px;
+ background-color: none;
}
-.topbar ul li ul li a {
+.dropdown-menu li a {
display: block;
- padding: 6px 15px;
+ padding: 4px 15px;
clear: both;
font-weight: normal;
- line-height: 19px;
- color: #bbb;
+ line-height: 18px;
+ color: #808080;
+ text-shadow: 0 1px 0 #fff;
}
-.topbar ul li ul li a:hover {
- background-color: #333;
- background-color: rgba(255, 255, 255, 0.25);
- color: #fff;
+.dropdown-menu li a:hover {
+ background-color: #dddddd;
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
+ background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
+ background-image: -ms-linear-gradient(top, #eeeeee, #dddddd);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));
+ background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
+ background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
+ background-image: linear-gradient(top, #eeeeee, #dddddd);
+ color: #404040;
+ text-decoration: none;
+ -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
+ -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
+ box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
}
-.topbar ul li ul li.divider {
+.dropdown-menu li.divider {
height: 1px;
- overflow: hidden;
- background: #222;
- background: rgba(0, 0, 0, 0.2);
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin: 5px 0;
+ overflow: hidden;
+ background-color: #eee;
+ border-bottom: 1px solid #fff;
+}
+.dropdown.open .dropdown-toggle {
+ color: #fff;
+ background-color: rgba(0, 0, 0, 0.3);
+}
+.dropdown.open .dropdown-menu {
+ display: block;
+}
+.tabs, .pills {
+ margin: 0 0 20px;
+ padding: 0;
+ list-style: none;
+ zoom: 1;
+ margin-bottom: 18px;
+}
+.tabs:before,
+.pills:before,
+.tabs:after,
+.pills:after {
+ display: table;
+ content: "";
}
-.topbar ul li ul li span {
+.tabs:after, .pills:after {
clear: both;
+}
+.tabs > li, .pills > li {
+ float: left;
+}
+.tabs > li > a, .pills > li > a {
display: block;
- background: rgba(0, 0, 0, 0.2);
- padding: 6px 15px;
- cursor: default;
+}
+.tabs {
+ width: 100%;
+ border-bottom: 1px solid #ddd;
+}
+.tabs > li {
+ position: relative;
+}
+.tabs > li > a {
+ margin-bottom: -1px;
+ margin-right: 2px;
+ padding: 0 15px;
+ line-height: 35px;
+ -webkit-border-radius: 4px 4px 0 0;
+ -moz-border-radius: 4px 4px 0 0;
+ border-radius: 4px 4px 0 0;
+}
+.tabs > li > a:hover {
+ background-color: #eee;
+ border-bottom: 1px solid #ddd;
+ text-decoration: none;
+}
+.tabs > li.active > a {
+ background-color: #fff;
+ padding: 0 14px;
+ border: 1px solid #ddd;
+ border-bottom: 0;
color: #808080;
- border-top: 1px solid rgba(0, 0, 0, 0.2);
+}
+.tabs .dropdown-menu {
+ top: 35px;
+ border-width: 1px;
+ -webkit-border-radius: 0 6px 6px 6px;
+ -moz-border-radius: 0 6px 6px 6px;
+ border-radius: 0 6px 6px 6px;
+}
+.tabs .dropdown-toggle:after {
+ border-top-color: #999;
+ margin-top: 15px;
+ margin-left: 5px;
+}
+.tabs .dropdown.open .dropdown-toggle:after {
+ border-top-color: #555;
+}
+.pills li a {
+ margin: 5px 3px 5px 0;
+ padding: 0 15px;
+ text-shadow: 0 1px 1px #fff;
+ line-height: 30px;
+ -webkit-border-radius: 15px;
+ -moz-border-radius: 15px;
+ border-radius: 15px;
+}
+.pills li a:hover {
+ background: #0050a3;
+ color: #fff;
+ text-decoration: none;
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+}
+.pills li.active a {
+ background: #0069d6;
+ color: #fff;
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.hero-unit {
background-color: #f5f5f5;
@@ -1651,73 +1721,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
background-color: #ddf4fb;
border-color: #c6edf9;
}
-.tabs, .pills {
- margin: 0 0 20px;
- padding: 0;
- zoom: 1;
- margin-bottom: 18px;
-}
-.tabs:before,
-.pills:before,
-.tabs:after,
-.pills:after {
- display: table;
- content: "";
-}
-.tabs:after, .pills:after {
- clear: both;
-}
-.tabs li, .pills li {
- display: inline;
-}
-.tabs li a, .pills li a {
- float: left;
- width: auto;
-}
-.tabs {
- width: 100%;
- border-bottom: 1px solid #bfbfbf;
-}
-.tabs li a {
- margin-bottom: -1px;
- margin-right: 2px;
- padding: 0 15px;
- line-height: 35px;
- -webkit-border-radius: 3px 3px 0 0;
- -moz-border-radius: 3px 3px 0 0;
- border-radius: 3px 3px 0 0;
-}
-.tabs li a:hover {
- background-color: #e6e6e6;
- border-bottom: 1px solid #bfbfbf;
-}
-.tabs li.active a {
- background-color: #fff;
- padding: 0 14px;
- border: 1px solid #ccc;
- border-bottom: 0;
- color: #808080;
-}
-.pills li a {
- margin: 5px 3px 5px 0;
- padding: 0 15px;
- text-shadow: 0 1px 1px #fff;
- line-height: 30px;
- -webkit-border-radius: 15px;
- -moz-border-radius: 15px;
- border-radius: 15px;
-}
-.pills li a:hover {
- background: #0050a3;
- color: #fff;
- text-decoration: none;
- text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
-}
-.pills li.active a {
- background: #0069d6;
- color: #fff;
- text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
-}
.pagination {
height: 36px;
margin: 18px 0;
diff --git a/bootstrap-1.1.1.min.css b/bootstrap-1.1.1.min.css
index 06bff3eb77..211f84e832 100644
--- a/bootstrap-1.1.1.min.css
+++ b/bootstrap-1.1.1.min.css
@@ -178,7 +178,7 @@ 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;}
-.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar .fill{background:#222;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(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);-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{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar .wrapper{background-color:#222;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(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);-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{position:relative;}.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;}
@@ -186,18 +186,26 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.topbar form input::-webkit-input-placeholder{color:#e6e6e6;}
.topbar form input:hover{background-color:#bfbfbf;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:#444;background-color:rgba(255, 255, 255, 0.1);*background-color:#444;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);*background-color:#444;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:#222;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);}
+.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}
+.nav li{display:block;float:left;font-size:13px;}.nav li a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.nav li a:hover{color:#fff;text-decoration:none;}
+.nav li.active a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
+.nav.secondary-nav li .dropdown-menu{right:0;}
+.dropdown{position:relative;}
+.dropdown-toggle:after{width:0;height:0;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;}
+.dropdown-menu{background-color:#fff;float:left;display:none;position:absolute;top:40px;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.dropdown-menu li{float:none;display:block;background-color:none;}.dropdown-menu li a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #fff;}.dropdown-menu li a:hover{background-color:#dddddd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
+.dropdown-menu li.divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #fff;}
+.dropdown.open .dropdown-toggle{color:#fff;background-color:rgba(0, 0, 0, 0.3);}
+.dropdown.open .dropdown-menu{display:block;}
+.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;margin-bottom:18px;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";}
+.tabs:after,.pills:after{clear:both;}
+.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
+.tabs{width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;}.tabs>li>a{margin-bottom:-1px;margin-right:2px;padding:0 15px;line-height:35px;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{background-color:#eee;border-bottom:1px solid #ddd;text-decoration:none;}
+.tabs>li.active>a{background-color:#fff;padding:0 14px;border:1px solid #ddd;border-bottom:0;color:#808080;}
+.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
+.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
+.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
+.pills li a{margin:5px 3px 5px 0;padding:0 15px;text-shadow:0 1px 1px #fff;line-height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills li a:hover{background:#0050a3;color:#fff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
+.pills li.active a{background:#0069d6;color:#fff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
.hero-unit{background-color:#f5f5f5;margin-top:60px;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;}
footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
@@ -221,13 +229,6 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.alert-message.block-message.error{background-color:#fddfde;border-color:#fbc7c6;}
.alert-message.block-message.success{background-color:#d1eed1;border-color:#bfe7bf;}
.alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;}
-.tabs,.pills{margin:0 0 20px;padding:0;zoom:1;margin-bottom:18px;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";}
-.tabs:after,.pills:after{clear:both;}
-.tabs li,.pills li{display:inline;}.tabs li a,.pills li a{float:left;width:auto;}
-.tabs{width:100%;border-bottom:1px solid #bfbfbf;}.tabs li a{margin-bottom:-1px;margin-right:2px;padding:0 15px;line-height:35px;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}.tabs li a:hover{background-color:#e6e6e6;border-bottom:1px solid #bfbfbf;}
-.tabs li.active a{background-color:#fff;padding:0 14px;border:1px solid #ccc;border-bottom:0;color:#808080;}
-.pills li a{margin:5px 3px 5px 0;padding:0 15px;text-shadow:0 1px 1px #fff;line-height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills li a:hover{background:#0050a3;color:#fff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
-.pills li.active a{background:#0069d6;color:#fff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
.pagination{height:36px;margin:18px 0;}.pagination ul{float:left;margin:0;border:1px solid #ddd;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);}.pagination ul li{display:inline;}.pagination ul li a{float:left;padding:0 14px;line-height:34px;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;text-decoration:none;}
.pagination ul li a:hover,.pagination ul li.active a{background-color:#c7eefe;}
.pagination ul li.disabled a,.pagination ul li.disabled a:hover{background-color:transparent;color:#bfbfbf;}
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 30677829e9..aaf76e0f04 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -5,6 +5,7 @@ $(document).ready(function(){
prettyPrint();
+
// scroll spy logic
// ================
@@ -19,7 +20,6 @@ $(document).ready(function(){
return $(id).offset().top;
});
-
function setButton(id) {
nav.parent("li").removeClass('active');
$(nav[$.inArray(id, targets)]).parent("li").addClass('active');
@@ -48,10 +48,10 @@ $(document).ready(function(){
// ===============================
$("body").bind("click", function (e) {
- $('a.menu').parent("li").removeClass("open");
+ $('.dropdown-toggle').parent("li").removeClass("open");
});
- $("a.menu").click(function (e) {
+ $(".dropdown-toggle").click(function (e) {
var $li = $(this).parent("li").toggleClass('open');
return false;
});
diff --git a/docs/index.html b/docs/index.html
index bc0e216aba..cbc482002e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -34,10 +34,10 @@
<!-- Topbar
================================================== -->
<div class="topbar">
- <div class="fill">
+ <div class="wrapper">
<div class="container">
<h3><a href="#">Bootstrap</a></h3>
- <ul>
+ <ul class="nav">
<li class="active"><a href="#masthead">Overview</a></li>
<li><a href="#about">About</a></li>
<li><a href="#grid-system">Grid</a></li>
@@ -901,22 +901,31 @@
<h2>Fixed topbar</h2>
<div class="topbar-wrapper" style="z-index: 5;">
<div class="topbar">
- <div class="fill">
+ <div class="wrapper">
<div class="container">
<h3><a href="#">Project Name</a></h3>
- <ul>
+ <ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle">Dropdown</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Secondary link</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Another link</a></li>
+ </ul>
+ </li>
</ul>
<form action="">
<input type="text" placeholder="Search" />
</form>
<ul class="nav secondary-nav">
- <li class="menu">
- <a href="#" class="menu">Dropdown</a>
- <ul class="menu-dropdown">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle">Dropdown</a>
+ <ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
@@ -960,6 +969,15 @@
<li><a href="#">Messages</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Contact</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle">Dropdown</a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Secondary link</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Another link</a></li>
+ </ul>
+ </li>
</ul>
<pre class="prettyprint linenums">
<ul class="tabs">
diff --git a/lib/patterns.less b/lib/patterns.less
index d0e4cda123..f5ca099cb5 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -17,8 +17,8 @@
overflow: visible;
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
- .fill {
- background:#222;
+ .wrapper {
+ background-color: #222;
#gradient > .vertical(#333, #222);
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
.box-shadow(@shadow);
@@ -100,151 +100,213 @@
}
}
}
+}
- // Navigation
- ul {
+
+// NAVIGATION
+// ----------
+// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
+.nav {
+ display: block;
+ float: left;
+ margin: 0 10px 0 0;
+ position: relative;
+ left: 0;
+ &.secondary-nav {
+ float: right;
+ margin-left: 10px;
+ margin-right: 0;
+ }
+ li {
display: block;
float: left;
- margin: 0 10px 0 0;
- position: relative;
- &.secondary-nav {
- float: right;
- margin-left: 10px;
- margin-right: 0;
- }
- li {
+ font-size: 13px;
+ a {
display: block;
- float: left;
- font-size: 13px;
- a {
- display: block;
- float: none;
- padding: 10px 10px 11px;
- line-height: 19px;
+ float: none;
+ padding: 10px 10px 11px;
+ line-height: 19px;
+ text-decoration: none;
+ &:hover {
+ color: #fff;
text-decoration: none;
- &:hover {
- color: #fff;
- text-decoration: none;
- }
- }
- &.active a {
- background-color: #222;
- background-color: rgba(0,0,0,.5);
}
}
+ &.active a {
+ background-color: #222;
+ background-color: rgba(0,0,0,.5);
+ }
+ }
- // Dropdowns
- &.primary-nav li ul {
- left: 0;
+ // Dropdowns within the .nav
+ &.secondary-nav li .dropdown-menu {
+ right: 0;
+ }
+}
+
+// Dropdown Menus
+// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
+.dropdown {
+ position: relative;
+}
+// The link that is clicked to toggle the dropdown
+.dropdown-toggle:after {
+ width: 0;
+ height: 0;
+ 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;
+ .opacity(50);
+}
+// The dropdown menu (ul)
+.dropdown-menu {
+ background-color: #fff;
+ float: left;
+ display: none; // None by default, but block on "open" of the menu
+ position: absolute;
+ top: 40px;
+ min-width: 160px;
+ max-width: 220px;
+ _width: 160px;
+ margin-left: 0; // override default ul styles
+ margin-right: 0;
+ padding: 6px 0;
+ zoom: 1; // do we need this?
+ border-color: #999;
+ border-color: rgba(0,0,0,.2);
+ border-style: solid;
+ border-width: 0 1px 1px;
+ .border-radius(0 0 6px 6px);
+ .box-shadow(0 2px 4px rgba(0,0,0,.2));
+ .background-clip(padding-box);
+
+ // Unfloat any li's to make them stack
+ li {
+ float: none;
+ display: block;
+ background-color: none;
+ // Links within the dropdown menu
+ a {
+ display: block;
+ padding: 4px 15px;
+ clear: both;
+ font-weight: normal;
+ line-height: 18px;
+ color: @gray;
+ text-shadow: 0 1px 0 #fff;
+ // Hover state
+ &:hover {
+ #gradient > .vertical(#eeeeee, #dddddd);
+ color: @grayDark;
+ text-decoration: none;
+ @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
+ .box-shadow(@shadow);
+ }
}
- &.secondary-nav li ul {
- right: 0;
+ // Dividers (basically an hr) within the dropdown
+ &.divider {
+ height: 1px;
+ margin: 5px 0;
+ overflow: hidden;
+ background-color: #eee;
+ border-bottom: 1px solid #fff;
}
- li.menu {
- position: relative;
- 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;
- .opacity(50);
- }
- }
- &.open {
- a.menu,
- a:hover {
- background-color: #444;
- background-color: rgba(255,255,255,.1);
- *background-color: #444; /* IE6-7 */
- color: #fff;
- }
- ul {
- display: block;
- li {
- a {
- background-color: transparent;
- font-weight: normal;
- &:hover {
- background-color: rgba(255,255,255,.1);
- *background-color: #444; /* IE6-7 */
- color: #fff;
- }
- }
- &.active a {
- background-color: rgba(255,255,255,.1);
- font-weight: bold;
- }
- }
- }
+ }
+}
+// Open state for the dropdown
+.dropdown.open {
+ .dropdown-toggle {
+ color: #fff;
+ background-color: rgba(0,0,0,.3);
+ }
+ .dropdown-menu {
+ display: block;
+ }
+}
+
+// Tabs and Pills
+.tabs,
+.pills {
+ margin: 0 0 20px;
+ padding: 0;
+ list-style: none;
+ .clearfix();
+ > li {
+ float: left;
+ > a {
+ display: block;
+ }
+ }
+}
+
+// Basic Tabs
+.tabs {
+ width: 100%;
+ border-bottom: 1px solid #ddd;
+ > li {
+ position: relative; // For the dropdowns mostly
+ > a {
+ margin-bottom: -1px;
+ margin-right: 2px;
+ padding: 0 15px;
+ line-height: (@baseline * 2) - 1;
+ .border-radius(4px 4px 0 0);
+ &:hover {
+ background-color: #eee;
+ border-bottom: 1px solid #ddd;
+ text-decoration: none;
}
}
- 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;
- .border-radius(0 0 5px 5px);
- .box-shadow(0 1px 2px rgba(0,0,0,0.6));
- li {
- float: none;
- clear: both;
- display: block;
- background: none;
- font-size: 12px;
- a {
- display: block;
- padding: 6px 15px;
- clear: both;
- font-weight: normal;
- line-height: 19px;
- color: #bbb;
- &:hover {
- background-color: #333;
- background-color: rgba(255,255,255,.25);
- color: #fff;
- }
- }
-
- // Dividers (basically an hr)
- &.divider {
- height: 1px;
- overflow: hidden;
- background: #222;
- background: rgba(0,0,0,.2);
- border-bottom: 1px solid rgba(255,255,255,.1);
- margin: 5px 0;
- }
-
- // Section separaters
- span {
- clear: both;
- display: block;
- background: rgba(0,0,0,.2);
- padding: 6px 15px;
- cursor: default;
- color: @gray;
- border-top: 1px solid rgba(0,0,0,.2);
- }
+ &.active > a {
+ background-color: #fff;
+ padding: 0 14px;
+ border: 1px solid #ddd;
+ border-bottom: 0;
+ color: @gray;
+ }
+ }
+ .dropdown-menu {
+ top: 35px;
+ border-width: 1px;
+ .border-radius(0 6px 6px 6px);
+ }
+ .dropdown-toggle:after {
+ border-top-color: #999;
+ margin-top: 15px;
+ margin-left: 5px;
+ }
+ .dropdown.open .dropdown-toggle:after {
+ border-top-color: #555;
+ }
+}
+
+// Basic pill nav
+.pills {
+ li {
+ a {
+ margin: 5px 3px 5px 0;
+ padding: 0 15px;
+ text-shadow: 0 1px 1px #fff;
+ line-height: 30px;
+ .border-radius(15px);
+ &:hover {
+ background: @linkColorHover;
+ color: #fff;
+ text-decoration: none;
+ text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
}
+ &.active a {
+ background: @linkColor;
+ color: #fff;
+ text-shadow: 0 1px 1px rgba(0,0,0,.25);
+ }
}
}
@@ -450,74 +512,6 @@ input[type=submit].btn {
}
}
-// NAVIGATION
-// ----------
-
-// Common tab and pill styles
-.tabs,
-.pills {
- margin: 0 0 20px;
- padding: 0;
- .clearfix();
- li {
- display: inline;
- a {
- float: left;
- width: auto;
- }
- }
-}
-
-// Basic Tabs
-.tabs {
- width: 100%;
- border-bottom: 1px solid @grayLight;
- li {
- a {
- margin-bottom: -1px;
- margin-right: 2px;
- padding: 0 15px;
- line-height: (@baseline * 2) - 1;
- .border-radius(3px 3px 0 0);
- &:hover {
- background-color: @grayLighter;
- border-bottom: 1px solid @grayLight;
- }
- }
- &.active a {
- background-color: #fff;
- padding: 0 14px;
- border: 1px solid #ccc;
- border-bottom: 0;
- color: @gray;
- }
- }
-}
-
-// Basic pill nav
-.pills {
- li {
- a {
- margin: 5px 3px 5px 0;
- padding: 0 15px;
- text-shadow: 0 1px 1px #fff;
- line-height: 30px;
- .border-radius(15px);
- &:hover {
- background: @linkColorHover;
- color: #fff;
- text-decoration: none;
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
- }
- }
- &.active a {
- background: @linkColor;
- color: #fff;
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
- }
- }
-}
-
// PAGINATION
// ----------
@@ -748,4 +742,4 @@ input[type=submit].btn {
margin-bottom: 0;
}
}
-}
+}
\ No newline at end of file
--
GitLab