Skip to content
GitLab
Commit 4f67e135 authored by Mark Otto's avatar Mark Otto
Browse files

adding dropdowns to tabs by refactoring the shizzzz out of them

parent b9c9f1d8
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 392 additions and 376 deletions
+392 -376
bootstrap-1.1.1.css
+ 147
- 144
View file @ 4f67e135
......@@ -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;
......
bootstrap-1.1.1.min.css
+ 21
- 20
View file @ 4f67e135
......@@ -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;}
......
docs/assets/js/application.js
+ 3
- 3
View file @ 4f67e135
......@@ -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;
});
......
docs/index.html
+ 25
- 7
View file @ 4f67e135
......@@ -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">
&lt;ul class="tabs"&gt;
......
lib/patterns.less
+ 196
- 202
View file @ 4f67e135
......@@ -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: "&darr;";
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: "&darr;";
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
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment