* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sat Jan 7 15:52:40 PST 2012
+ * Date: Sat Jan 7 20:25:41 PST 2012
*/
html, body {
margin: 0;
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
white-space: pre;
white-space: pre-wrap;
word-break: break-all;
line-height: 36px;
color: #333333;
border-bottom: 1px solid #eee;
+ -webkit-margin-collapse: separate;
}
label,
input,
background-image: linear-gradient(top, #049cdb, #0064cd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
+ background-color: #0077b3;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));
+ background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+ background-image: -ms-linear-gradient(top, #0088cc, #0077b3);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));
+ background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+ background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+ background-image: linear-gradient(top, #0088cc, #0077b3);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
left: 0;
z-index: 1010;
}
-.nav {
+.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
+ /* // Dropdowns within the .nav
+ .dropdown-toggle:hover,
+ .dropdown.open .dropdown-toggle {
+ background: #444;
+ background: rgba(255,255,255,.05);
+ }
+ .dropdown-menu {
+ background-color: #333;
+ .dropdown-toggle {
+ color: @white;
+ &.open {
+ background: #444;
+ background: rgba(255,255,255,.05);
+ }
+ }
+ li a {
+ padding: 4px 15px;
+ color: #999;
+ text-shadow: 0 1px 0 rgba(0,0,0,.5);
+ &:hover {
+ #gradient > .vertical(#292929,#191919);
+ color: @white;
+ }
+ }
+ .active a {
+ color: @white;
+ }
+ .divider {
+ background-color: #222;
+ border-color: #444;
+ }
+ }*/
+
}
-.nav > li {
+.navbar .nav > li {
display: block;
float: left;
}
-.nav a {
- display: block;
+.navbar .nav a {
float: none;
padding: 10px 10px 11px;
line-height: 19px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
-.nav a:hover {
+.navbar .nav a:hover {
color: #ffffff;
text-decoration: none;
}
-.nav .active > a {
+.navbar .nav .active > a {
background-color: #222;
background-color: rgba(0, 0, 0, 0.5);
}
-.nav .vertical-divider {
+.navbar .nav .vertical-divider {
height: 40px;
width: 1px;
margin: 0 5px;
background-color: #222;
border-right: 1px solid #444;
}
-.nav.secondary-nav {
+.navbar .nav.secondary-nav {
float: right;
margin-left: 10px;
margin-right: 0;
}
-.nav.secondary-nav .dropdown-menu {
+.navbar .nav.secondary-nav .dropdown-menu {
right: 0;
border: 0;
}
-.nav .dropdown-toggle:hover, .nav .dropdown.open .dropdown-toggle {
- background: #444;
- background: rgba(255, 255, 255, 0.05);
+.nav {
+ margin-left: 0;
+ margin-bottom: 18px;
+ list-style: none;
}
-.nav .dropdown-menu {
- background-color: #333;
+.nav > li > a {
+ display: block;
}
-.nav .dropdown-menu .dropdown-toggle {
- color: #ffffff;
+.nav > li > a:hover {
+ text-decoration: none;
+ background-color: #eee;
}
-.nav .dropdown-menu .dropdown-toggle.open {
- background: #444;
- background: rgba(255, 255, 255, 0.05);
-}
-.nav .dropdown-menu li a {
- padding: 4px 15px;
- color: #999;
- text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
-}
-.nav .dropdown-menu li a:hover {
- background-color: #191919;
- background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
- background-image: -moz-linear-gradient(top, #292929, #191919);
- background-image: -ms-linear-gradient(top, #292929, #191919);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));
- background-image: -webkit-linear-gradient(top, #292929, #191919);
- background-image: -o-linear-gradient(top, #292929, #191919);
- background-image: linear-gradient(top, #292929, #191919);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
- color: #ffffff;
+.nav.list {
+ padding-left: 14px;
+ padding-right: 14px;
+ margin-bottom: 0;
}
-.nav .dropdown-menu .active a {
- color: #ffffff;
+.nav.list > li > a, .nav.list .nav-header {
+ display: block;
+ padding: 3px 15px;
+ margin-left: -15px;
+ margin-right: -15px;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
-.nav .dropdown-menu .divider {
- background-color: #222;
- border-color: #444;
+.nav.list .nav-header {
+ font-size: 11px;
+ font-weight: bold;
+ line-height: 18px;
+ color: #999999;
+ text-transform: uppercase;
+}
+.nav.list > li + .nav-header {
+ margin-top: 9px;
+}
+.nav.list .active > a {
+ color: #ffffff;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+ background-color: #0088cc;
}
.tabs, .pills {
- padding: 0;
- margin: 0 0 20px;
- list-style: none;
zoom: 1;
}
.tabs:before,
float: left;
}
.tabs > li > a, .pills > li > a {
- display: block;
+ padding-right: 12px;
+ padding-left: 12px;
+ margin-right: 2px;
+ line-height: 14px;
}
.tabs {
- border-color: #ddd;
- border-style: solid;
- border-width: 0 0 1px;
+ border-bottom: 1px solid #ddd;
}
.tabs > li {
- position: relative;
margin-bottom: -1px;
}
.tabs > li > a {
- padding: 0 15px;
- margin-right: 2px;
- line-height: 36px;
+ padding-top: 9px;
+ padding-bottom: 9px;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.tabs > li > a:hover {
- text-decoration: none;
- background-color: #eee;
border-color: #eee #eee #ddd;
}
.tabs .active > a, .tabs .active > a:hover {
border-bottom-color: transparent;
cursor: default;
}
+.pills > li > a {
+ padding-top: 8px;
+ padding-bottom: 8px;
+ margin-top: 2px;
+ margin-bottom: 2px;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+}
+.pills .active > a, .pills .active > a:hover {
+ color: #ffffff;
+ background-color: #0088cc;
+}
+.nav.stacked > li {
+ float: none;
+}
+.nav.stacked > li > a {
+ margin-right: 0;
+}
+.tabs.stacked {
+ border-bottom: 0;
+}
+.tabs.stacked > li > a {
+ border: 1px solid #ddd;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+}
+.tabs.stacked > li:first-child > a {
+ -webkit-border-radius: 4px 4px 0 0;
+ -moz-border-radius: 4px 4px 0 0;
+ border-radius: 4px 4px 0 0;
+}
+.tabs.stacked > li:last-child > a {
+ -webkit-border-radius: 0 0 4px 4px;
+ -moz-border-radius: 0 0 4px 4px;
+ border-radius: 0 0 4px 4px;
+}
+.tabs.stacked > li > a:hover {
+ border-color: #ddd;
+ z-index: 2;
+}
+.pills.stacked > li > a {
+ margin-bottom: 3px;
+}
+.pills.stacked > li:last-child > a {
+ margin-bottom: 1px;
+}
+.tabs .dropdown-menu, .pills .dropdown-menu {
+ top: 33px;
+ border-width: 1px;
+}
+.pills .dropdown-menu {
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+.tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret {
+ margin-top: 6px;
+}
+.tabs .open .dropdown-toggle, .pills .open .dropdown-toggle {
+ background-color: #999;
+ border-color: #999;
+}
+.tabs .open .caret, .pills .open .caret {
+ border-top-color: #fff;
+ filter: alpha(opacity=100);
+ -moz-opacity: 1;
+ opacity: 1;
+}
.tabbable {
margin-bottom: 18px;
}
border-color: #ddd;
border-left-color: transparent;
}
-.tabs .dropdown-menu {
- top: 37px;
- border-width: 1px;
-}
-.tabs .dropdown-toggle .caret {
- margin-top: 15px;
- margin-left: 5px;
-}
-.tabs .open .dropdown-toggle {
- border-color: #999;
-}
-.tabs .open .dropdown-toggle .caret {
- border-top-color: #fff;
- filter: alpha(opacity=100);
- -moz-opacity: 1;
- opacity: 1;
-}
-.pills > li > a {
- padding: 0 15px;
- margin: 5px 3px 5px 0;
- line-height: 30px;
- text-shadow: 0 1px 1px #ffffff;
- -webkit-border-radius: 15px;
- -moz-border-radius: 15px;
- border-radius: 15px;
-}
-.pills > li > a:hover {
- color: #ffffff;
- text-decoration: none;
- text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
- background-color: #005580;
-}
-.pills .active > a {
- color: #ffffff;
- text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
- background-color: #0088cc;
-}
-.pills-vertical > li {
- float: none;
-}
.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none;
}
color: #333333;
background-color: #eee;
}
-.side-nav {
- padding: 9px 0;
+/*.side-nav {
+ padding: @baseLineHeight / 2 0;
}
-.side-nav .nav-label, .side-nav .nav-item {
+.side-nav .nav-label,
+.side-nav .nav-item {
display: block;
padding: 3px 15px;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.side-nav .nav-label {
font-size: 11px;
- line-height: 18px;
- color: #999999;
+ line-height: @baseLineHeight;
+ color: @grayLight;
text-transform: uppercase;
}
.side-nav .nav-group {
- margin: 0;
+ margin: 0; // clear default ul margins
list-style: none;
}
.side-nav .nav-group + .nav-label {
margin-top: 9px;
}
+
.side-nav .nav-item {
font-weight: bold;
}
}
.side-nav .active .nav-item {
color: #fff;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
- background-color: #999999;
- background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));
- background-image: -moz-linear-gradient(top, #cccccc, #999999);
- background-image: -ms-linear-gradient(top, #cccccc, #999999);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #999999));
- background-image: -webkit-linear-gradient(top, #cccccc, #999999);
- background-image: -o-linear-gradient(top, #cccccc, #999999);
- background-image: linear-gradient(top, #cccccc, #999999);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999', GradientType=0);
- -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
- -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
- box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
-}
-.breadcrumb {
+ text-shadow: 0 -1px 0 rgba(0,0,0,.3);
+ #gradient > .vertical(#ccc, #999);
+ @shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05);
+ .box-shadow(@shadow);
+}*/.breadcrumb {
padding: 7px 14px;
margin: 0 0 18px;
background-color: #f5f5f5;
address{display:block;margin-bottom:18px;line-height:18px;}
code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
code{padding:1px 3px;background-color:#fee9cc;}
-pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;}
+pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;}
pre code{padding:0;background-color:transparent;}
form{margin-bottom:18px;}
-legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333333;border-bottom:1px solid #eee;}
+legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333333;border-bottom:1px solid #eee;-webkit-margin-collapse:separate;}
label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:18px;}
label{display:block;margin-bottom:5px;color:#333333;}
input,textarea,select,.uneditable-input{display:block;width:210px;height:18px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.dropdown .caret{margin-top:8px;margin-left:2px;}
.dropdown:hover .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
.dropdown-menu{position:absolute;top:40px;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:5px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.1);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;}
-.dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;}.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);}
+.dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;}.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);background-color:#0077b3;background-image:-khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-ms-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(top, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);}
.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
.dropdown.open .dropdown-menu{display:block;}
.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
.navbar-static{margin-bottom:18px;}
.navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:1010;}
-.nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;}
-.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.nav a:hover{color:#ffffff;text-decoration:none;}
-.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
-.nav .vertical-divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;}
-.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.nav.secondary-nav .dropdown-menu{right:0;border:0;}
-.nav .dropdown-toggle:hover,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
-.nav .dropdown-menu{background-color:#333;}.nav .dropdown-menu .dropdown-toggle{color:#ffffff;}.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
-.nav .dropdown-menu li a{padding:4px 15px;color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.nav .dropdown-menu li a:hover{background-color:#191919;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
-.nav .dropdown-menu .active a{color:#ffffff;}
-.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
-.tabs,.pills{padding:0;margin:0 0 20px;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;}
+.navbar .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.navbar .nav>li{display:block;float:left;}
+.navbar .nav a{float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.navbar .nav a:hover{color:#ffffff;text-decoration:none;}
+.navbar .nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
+.navbar .nav .vertical-divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;}
+.navbar .nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.navbar .nav.secondary-nav .dropdown-menu{right:0;border:0;}
+.nav{margin-left:0;margin-bottom:18px;list-style:none;}
+.nav>li>a{display:block;}
+.nav>li>a:hover{text-decoration:none;background-color:#eee;}
+.nav.list{padding-left:14px;padding-right:14px;margin-bottom:0;}
+.nav.list>li>a,.nav.list .nav-header{display:block;padding:3px 15px;margin-left:-15px;margin-right:-15px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
+.nav.list .nav-header{font-size:11px;font-weight:bold;line-height:18px;color:#999999;text-transform:uppercase;}
+.nav.list>li+.nav-header{margin-top:9px;}
+.nav.list .active>a{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.2);background-color:#0088cc;}
+.tabs,.pills{zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;}
.tabs:after,.pills:after{clear:both;}
-.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
-.tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
+.tabs>li,.pills>li{float:left;}
+.tabs>li>a,.pills>li>a{padding-right:12px;padding-left:12px;margin-right:2px;line-height:14px;}
+.tabs{border-bottom:1px solid #ddd;}
+.tabs>li{margin-bottom:-1px;}
+.tabs>li>a{padding-top:9px;padding-bottom:9px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{border-color:#eee #eee #ddd;}
.tabs .active>a,.tabs .active>a:hover{color:#555555;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;}
+.pills>li>a{padding-top:8px;padding-bottom:8px;margin-top:2px;margin-bottom:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
+.pills .active>a,.pills .active>a:hover{color:#ffffff;background-color:#0088cc;}
+.nav.stacked>li{float:none;}
+.nav.stacked>li>a{margin-right:0;}
+.tabs.stacked{border-bottom:0;}
+.tabs.stacked>li>a{border:1px solid #ddd;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
+.tabs.stacked>li:first-child>a{-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}
+.tabs.stacked>li:last-child>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}
+.tabs.stacked>li>a:hover{border-color:#ddd;z-index:2;}
+.pills.stacked>li>a{margin-bottom:3px;}
+.pills.stacked>li:last-child>a{margin-bottom:1px;}
+.tabs .dropdown-menu,.pills .dropdown-menu{top:33px;border-width:1px;}
+.pills .dropdown-menu{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
+.tabs .dropdown-toggle .caret,.pills .dropdown-toggle .caret{margin-top:6px;}
+.tabs .open .dropdown-toggle,.pills .open .dropdown-toggle{background-color:#999;border-color:#999;}
+.tabs .open .caret,.pills .open .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
.tabbable{margin-bottom:18px;}.tabbable .tabs{margin-bottom:0;border-bottom:0;}
.tabbable .tab-content{padding:19px;border:1px solid #ddd;}
.tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;}
.tabbable.tabs-right .tab-content{margin-right:100px;}
.tabbable.tabs-right .tabs{float:right;}.tabbable.tabs-right .tabs>li{margin-left:-1px;}.tabbable.tabs-right .tabs>li>a{margin-left:0;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}.tabbable.tabs-right .tabs>li>a:hover{border-left-color:#ddd;}
.tabbable.tabs-right .tabs .active>a,.tabbable.tabs-right .tabs .active>a:hover{border-color:#ddd;border-left-color:transparent;}
-.tabs .dropdown-menu{top:37px;border-width:1px;}
-.tabs .dropdown-toggle .caret{margin-top:15px;margin-left:5px;}
-.tabs .open .dropdown-toggle{border-color:#999;}
-.tabs .open .dropdown-toggle .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
-.pills>li>a{padding:0 15px;margin:5px 3px 5px 0;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills>li>a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#005580;}
-.pills .active>a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0088cc;}
-.pills-vertical>li{float:none;}
.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;}
.tab-content>.active,.pill-content>.active{display:block;}
.step-nav{position:relative;margin:0 0 18px;list-style:none;line-height:30px;text-align:center;background-color:#f5f5f5;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.step-nav li{display:inline;color:#999999;}
.subnav li:first-child a{border-left:0;-webkit-border-radius:6px 0 0 6px;-moz-border-radius:6px 0 0 6px;border-radius:6px 0 0 6px;}
.subnav li:last-child a{border-right:0;-webkit-border-radius:0 6px 6px 0;-moz-border-radius:0 6px 6px 0;border-radius:0 6px 6px 0;}
.subnav ul .active>a{color:#333333;background-color:#eee;}
-.side-nav{padding:9px 0;}
-.side-nav .nav-label,.side-nav .nav-item{display:block;padding:3px 15px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
-.side-nav .nav-label{font-size:11px;line-height:18px;color:#999999;text-transform:uppercase;}
-.side-nav .nav-group{margin:0;list-style:none;}
-.side-nav .nav-group+.nav-label{margin-top:9px;}
-.side-nav .nav-item{font-weight:bold;}
-.side-nav .nav-item i{vertical-align:-2px;}
-.side-nav .nav-item:hover{text-decoration:none;}
-.side-nav .active .nav-item{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);background-color:#999999;background-image:-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));background-image:-moz-linear-gradient(top, #cccccc, #999999);background-image:-ms-linear-gradient(top, #cccccc, #999999);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #999999));background-image:-webkit-linear-gradient(top, #cccccc, #999999);background-image:-o-linear-gradient(top, #cccccc, #999999);background-image:linear-gradient(top, #cccccc, #999999);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);}
.breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
.breadcrumb .divider{padding:0 5px;color:#999999;}
.breadcrumb .active a{color:#333333;}
.kwd, .linenums .tag { color: #1e347b; }
.typ, .atn, .dec, .var { color: teal; }
.pln { color: #48484c; }
-pre.prettyprint {
- background-color: #fefbf3;
- padding: 9px;
- margin-bottom: 9px;
-}
-
-pre.prettyprint {
- color: #ccc;
- background-color: #252525;
-}
-pre.prettyprint {
+.prettyprint {
padding: 8px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
+}
+.prettyprint.linenums {
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
</header>
-<!-- Media
+
+<!-- Nav, Tabs, & Pills
================================================== -->
-<section id="media">
+<section id="tabsAndPills">
<div class="page-header">
- <h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1>
+ <h1>Nav, tabs, and pills <small>Highly customizable list-style navigation</small></h1>
</div>
+ <h2>Lightweight defaults <small>Same markup, different classes</small></h2>
<div class="row">
- <div class="span6">
- <h2>Default thumbnails</h2>
- <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
- <ul class="thumbnails">
- <li class="span3">
- <a href="#" class="thumbnail">
- <img src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- <li class="span3">
- <a href="#" class="thumbnail">
- <img src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- <li class="span3">
- <a href="#" class="thumbnail">
- <img src="http://placehold.it/210x150" alt="">
- </a>
- </li>
- <li class="span3">
- <a href="#" class="thumbnail">
- <img src="http://placehold.it/210x150" alt="">
- </a>
- </li>
+ <div class="span4">
+ <h3>Powerful base class</h3>
+ <p>All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
+ <h3>Why tabs and pills</h3>
+ <p>Tabs and pills in Bootstrap are built on a <code><ul></code> with the same core HTML, a list of links. Swap between tabs or pills with only a class.</p>
+ <p>Both options are great for sub-sections of content or navigating between pages of related content.</p>
+ </div>
+ <div class="span4">
+ <h3>Basic tabs</h3>
+ <p>Take a regular <code><ul></code> of links and add <code>.tabs</code>:</p>
+ <ul class="nav tabs">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
</ul>
+<pre class="prettyprint linenums">
+<ul class="nav tabs">
+ <li class="active">
+ <a href="#">Home</a>
+ </li>
+ <li><a href="#">...</a></li>
+ <li><a href="#">...</a></li>
+</ul>
+</pre>
</div>
- <div class="span6">
- <h2>Highly customizable</h2>
- <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
- <ul class="thumbnails">
- <li class="span3">
- <div class="thumbnail">
- <img src="http://placehold.it/210x150" alt="">
- <div class="caption">
- <h5>Thumbnail label</h5>
- <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
- <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
- </div>
- </div>
- </li>
- <li class="span3">
- <div class="thumbnail">
- <img src="http://placehold.it/210x150" alt="">
- <div class="caption">
- <h5>Thumbnail label</h5>
- <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
- <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
- </div>
- </div>
- </li>
+ <div class="span4">
+ <h3>Basic pills</h3>
+ <p>Take that same HTML, but use <code>.pills</code> instead:</p>
+ <ul class="nav pills">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
</ul>
+<pre class="prettyprint linenums">
+<ul class="nav pills">
+ <li class="active">
+ <a href="#">Home</a>
+ </li>
+ <li><a href="#">...</a></li>
+ <li><a href="#">...</a></li>
+</ul>
+</pre>
</div>
</div>
+ <h2>Stackable <small>Make tabs or pills vertical</small></h2>
<div class="row">
<div class="span4">
- <h3>Why use thumbnails</h3>
- <p>Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.</p>
+ <h3>How to stack 'em</h3>
+ <p>As tabs and pills are horizontal by default, just add a second class, <code>.stacked</code>, to make them appear vertically stacked.</p>
</div>
<div class="span4">
- <h3>Simple, flexible markup</h3>
- <p>Thumbnail markup is simple—a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.</p>
- </div>
- <div class="span4">
- <h3>Uses grid column sizes</h3>
- <p>Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.</p>
- </div>
- </div>
-
- <div class="row">
- <div class="span6">
- <h2>The markup</h2>
- <p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p>
+ <h3>Stacked tabs</h3>
+ <ul class="nav tabs stacked">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ </ul>
<pre class="prettyprint linenums">
-<ul class="thumbnails">
- <li class="span3">
- <a href="#" class="thumbnail">
- <img src="http://placehold.it/210x150" alt="">
- </a>
- </li>
+<ul class="nav tabs stacked">
...
</ul>
</pre>
- <p>For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code><a></code> for a <code><div></code> like so:</p>
+ </div>
+ <div class="span4">
+ <h3>Stacked pills</h3>
+ <ul class="nav pills stacked">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ </ul>
<pre class="prettyprint linenums">
-<ul class="thumbnails">
- <li class="span3">
- <div class="thumbnail">
- <img src="http://placehold.it/210x150" alt="">
- <h5>Thumbnail label</h5>
- <p>Thumbnail caption right here...</p>
- </div>
- </li>
+<ul class="nav pills stacked">
...
</ul>
</pre>
</div>
- <div class="span6">
- <h2>More examples</h2>
- <p>Explore all your options with the various grid classes available to you. You can also mix and match different sizes.</p>
- <ul class="thumbnails">
- <li class="span4">
- <a href="#" class="thumbnail">
- <img src="http://placehold.it/290x230" alt="">
- </a>
- </li>
- <li class="span2">
- <a href="#" class="thumbnail">
- <img src="http://placehold.it/130x100" alt="">
- </a>
- </li>
- <li class="span2">
- <a href="#" class="thumbnail">
- <img src="http://placehold.it/130x100" alt="">
- </a>
- </li>
- <li class="span2">
- <a href="#" class="thumbnail">
- <img src="http://placehold.it/130x100" alt="">
- </a>
- </li>
- <li class="span2">
- <a href="#" class="thumbnail">
- <img src="http://placehold.it/130x100" alt="">
- </a>
- </li>
- <li class="span2">
- <a href="#" class="thumbnail">
- <img src="http://placehold.it/130x100" alt="">
- </a>
- </li>
- </ul>
- </div>
- </div>
-
-</section>
-
-
-
-<!-- Autocomplete
-================================================== -->
-<section id="autocomplete">
- <div class="page-header">
- <h1>Autocomplete <small></small></h1>
- </div>
-
-</section>
-
-
-
-<!-- Carousel
-================================================== -->
-<section id="carousel">
- <div class="page-header">
- <h1>Carousel <small></small></h1>
- </div>
-
-</section>
-
-
-
-<!-- Side nav
-================================================== -->
-<section id="sidenav">
- <div class="page-header">
- <h1>Side nav <small>for lists of links</small></h1>
</div>
+ <h2>Dropdowns <small>For advanced nav components</small></h2>
<div class="row">
- <div class="span3">
- <h3>Examples</h3>
- <p>Side navs can be just links, links with headings, and links with icons.</p>
- <div class="well side-nav">
- <ul class="nav-group">
- <li class="active"><a class="nav-item" href="#">Home</a></li>
- <li><a class="nav-item" href="#">Library</a></li>
- <li><a class="nav-item" href="#">Help</a></li>
- </ul>
- <h6 class="nav-label">Your account</h6>
- <ul class="nav-group">
- <li><a class="nav-item" href="#">Profile</a></li>
- <li><a class="nav-item" href="#">Settings</a></li>
- </ul>
- <h6 class="nav-label">Your account</h6>
- <ul class="nav-group">
- <li><a class="nav-item" href="#"><i class="home"></i> Home</a></li>
- <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li>
- <li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li>
- <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li>
- <li><a class="nav-item" href="#"><i class="time"></i> Help</a></li>
- </ul>
- </div>
- </div>
- <div class="span3">
- <h3>Why use it</h3>
- <p></p>
+ <div class="span4">
+ <h3>Rich menus made easy</h3>
+ <p>Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.</p>
+ <p>Head over to the Javascript page to read the docs on <a href="./javascript.html#tabs">initializing dropdowns</a> in Bootstrap.</p>
</div>
- <div class="span6">
- <h3>Markup</h3>
- <p>Marking up a side nav is at the core just writing an unordered list of links.</p>
+ <div class="span4">
+ <h3>Tabs with dropdowns</h3>
+ <ul class="nav tabs">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li class="dropdown">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </li>
+ </ul>
<pre class="prettyprint linenums">
- <ul class="nav-group">
- <li class="active">
- <a class="nav-item" href="#">Home</a>
- </li>
- <li><a class="nav-item" href="#">Library</a></li>
- <li><a class="nav-item" href="#">Help</a></li>
- </ul>
+<ul class="nav tabs">
+ <li class="dropdown">
+ <a class="dropdown-toggle"
+ data-toggle="dropdown"
+ href="#">
+ Dropdown
+ <b class="caret"></b>
+ </a>
+ <ul class="dropdown-menu">
+ <!-- links -->
+ </ul>
+ </li>
+</ul>
</pre>
- <p>Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.</p>
+ </div>
+ <div class="span4">
+ <h3>Pills with dropdowns</h3>
+ <ul class="nav pills">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li class="dropdown">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </li>
+ </ul>
<pre class="prettyprint linenums">
- <h6 class="nav-label"></h6>
- <ul class="nav-group">
- ...
- </ul>
- <h6 class="nav-label"></h6>
- <ul class="nav-group">
- ...
- </ul>
+<ul class="nav pills">
+ <li class="dropdown">
+ <a class="dropdown-toggle"
+ data-toggle="dropdown"
+ href="#">
+ Dropdown
+ <b class="caret"></b>
+ </a>
+ <ul class="dropdown-menu">
+ <!-- links -->
+ </ul>
+ </li>
+</ul>
</pre>
</div>
</div>
-
-</section>
-
-
-<!-- Navbar
-================================================== -->
-<section id="navbar">
- <div class="page-header">
- <h1>Navbar</h1>
- </div>
- <h2>Static navbar example</h2>
- <p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
- <div class="navbar navbar-static">
- <div class="navbar-inner">
- <div class="container" style="width: auto;">
- <a class="brand" href="#">Project name</a>
- <ul class="nav">
+ <h2>Nav lists <small>Build simple stacked navs, great for sidebars</small></h2>
+ <div class="row">
+ <div class="span4">
+ <h3>Application-style navigation</h3>
+ <p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p>
+ <p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
+ </div>
+ <div class="span4">
+ <h3>Example sidebar navigation</h3>
+ <div class="well" style="padding: 8px 0;">
+ <ul class="nav list">
+ <li class="nav-header">List header</li>
<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" data-toggle="dropdown">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 class="navbar-search pull-left" action="">
- <input type="text" class="search-query span2" placeholder="Search">
- </form>
- <ul class="nav secondary-nav">
- <li class="vertical-divider"></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">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>
+ <li><a href="#">Library</a></li>
+ <li><a href="#">Applications</a></li>
+ <li class="nav-header">Another list header</li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Help</a></li>
</ul>
- </div>
- </div><!-- /navbar-inner -->
- </div><!-- /navbar -->
-
- <div class="row">
- <div class="span8">
- <h3>Navbar scaffolding</h3>
- <p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
-<pre class="prettyprint linenums">
-<div class="navbar navbar-static">
- <div class="navbar-inner">
- <div class="container" style="width: auto;">
- ...
- </div>
- </div>
-</div>
-</pre>
- <p>To make the navbar fixed, swamp the <code>.navbar-static</code> class for <code>.navbar-fixed</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
-<pre class="prettyprint linenums">
-<div class="navbar navbar-fixed">
- ...
-</div>
-</pre>
- <br>
- <h3>Brand name</h3>
- <p>A simple link to show your brand or project name only requires an anchor tag.</p>
-<pre class="prettyprint linenums">
-<a class="brand" href="#">
- Project name
-</a>
-</pre>
- <br>
- <h3>Search form</h3>
- <p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p>
-<pre class="prettyprint linenums">
-<form class="navbar-search">
- <input type="text" class="search-query pull-left" placeholder="Search">
-</form>
-</pre>
+ </div> <!-- /well -->
</div>
<div class="span4">
- <h3>Nav links</h3>
- <p>Nav items are simple to add via unordered lists.</p>
+ <h3>Simple markup</h3>
<pre class="prettyprint linenums">
-<ul class="nav">
+<ul class="nav list">
+ <li class="nav-header">
+ List header
+ </li>
<li class="active">
- <a href="#">Home</a>
+ <a href="#">Home</a>
</li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
-</ul>
-</pre>
- <p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdowns">our javascript plugin</a>.</p>
-<pre class="prettyprint linenums">
-<ul class="nav">
- <li class="dropdown">
- <a href="#"
- class="dropdown-toggle"
- data-toggle="dropdown">
- Account
- </a>
- <ul class="dropdown-menu">
- ...
- </ul>
+ <li>
+ <a href="#">Library</a>
</li>
+ ...
</ul>
</pre>
</div>
</div>
-</section>
-<!-- Tabs & Pills
-================================================== -->
-<section id="tabsAndPills">
- <div class="page-header">
- <h1>Tabs and pills <small></small></h1>
- </div>
- <div class="row">
- <div class="span3">
- <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p>
- <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
- </div>
- <div class="span9">
- <h3>Basic tabs example</h3>
- <p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p>
- <ul class="tabs">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <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" data-toggle="dropdown">Dropdown <span class="caret"></span></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">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- <li><a href="#">Settings</a></li>
- <li><a href="#">Contact</a></li>
-</ul>
-</pre>
+
+
+
+
+
<h3>Tabbable tabs</h3>
<p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p>
</ul>
</div>
-
- <p>In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.</p>
- <hr>
- <h3>Basic pills example</h3>
- <ul class="pills">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- <li><a href="#">Settings</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
+</section>
+
+
+
+<!-- Navbar
+================================================== -->
+<section id="navbar">
+ <div class="page-header">
+ <h1>Navbar</h1>
+ </div>
+ <h2>Static navbar example</h2>
+ <p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
+ <div class="navbar navbar-static">
+ <div class="navbar-inner">
+ <div class="container" style="width: auto;">
+ <a class="brand" href="#">Project name</a>
+ <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" data-toggle="dropdown">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 class="navbar-search pull-left" action="">
+ <input type="text" class="search-query span2" placeholder="Search">
+ </form>
+ <ul class="nav secondary-nav">
+ <li class="vertical-divider"></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">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>
+ </div>
+ </div><!-- /navbar-inner -->
+ </div><!-- /navbar -->
+
+ <div class="row">
+ <div class="span8">
+ <h3>Navbar scaffolding</h3>
+ <p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
+<pre class="prettyprint linenums">
+<div class="navbar navbar-static">
+ <div class="navbar-inner">
+ <div class="container" style="width: auto;">
+ ...
+ </div>
+ </div>
+</div>
+</pre>
+ <p>To make the navbar fixed, swamp the <code>.navbar-static</code> class for <code>.navbar-fixed</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
+<pre class="prettyprint linenums">
+<div class="navbar navbar-fixed">
+ ...
+</div>
+</pre>
+ <h3>Brand name</h3>
+ <p>A simple link to show your brand or project name only requires an anchor tag.</p>
+<pre class="prettyprint linenums">
+<a class="brand" href="#">
+ Project name
+</a>
+</pre>
+ <h3>Search form</h3>
+ <p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p>
+<pre class="prettyprint linenums">
+<form class="navbar-search">
+ <input type="text" class="search-query pull-left" placeholder="Search">
+</form>
+</pre>
+ </div>
+ <div class="span4">
+ <h3>Nav links</h3>
+ <p>Nav items are simple to add via unordered lists.</p>
<pre class="prettyprint linenums">
-<ul class="pills">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- <li><a href="#">Settings</a></li>
- <li><a href="#">Contact</a></li>
+<ul class="nav">
+ <li class="active">
+ <a href="#">Home</a>
+ </li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+</ul>
+</pre>
+ <p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdowns">our javascript plugin</a>.</p>
+<pre class="prettyprint linenums">
+<ul class="nav">
+ <li class="dropdown">
+ <a href="#"
+ class="dropdown-toggle"
+ data-toggle="dropdown">
+ Account
+ </a>
+ <ul class="dropdown-menu">
+ ...
+ </ul>
+ </li>
</ul>
</pre>
- <h3>Vertical pill nav</h3>
- <p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p>
- <ul class="pills pills-vertical span4">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- <li><a href="#">Settings</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
</div>
- </div><!-- /row -->
+ </div>
</section>
-<!-- Step nav
-==================================================
-
-COMMENTED OUT AND NOT SUPPORTED AT THIS TIME.
-
-<section id="stepNav">
- <div class="page-header">
- <h1>Step nav <small></small></h1>
- </div>
- <div class="row">
- <div class="span3">
- <p>Placeholder for now!</p>
- </div>
- <div class="span9">
- <br>
- <ul class="step-nav">
- <li class="prev"><a href="#">« Overview</a></li>
- <li class="active"><a class="dot" href="#">1</a></li>
- <li><a class="dot" href="#">2</a></li>
- <li><a class="dot" href="#">3</a></li>
- <li><a class="dot" href="#">4</a></li>
- <li><a class="dot" href="#">5</a></li>
- <li class="next"><a href="#">Base CSS »</a></li>
- </ul>
- <br>
- <br>
- </div>
- </div>
-</section>
--->
-
-
-
<!-- Pagination
================================================== -->
<section id="carousel">
+<!-- Media
+================================================== -->
+<section id="media">
+ <div class="page-header">
+ <h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1>
+ </div>
+
+ <div class="row">
+ <div class="span6">
+ <h2>Default thumbnails</h2>
+ <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
+ <ul class="thumbnails">
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ </ul>
+ </div>
+ <div class="span6">
+ <h2>Highly customizable</h2>
+ <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
+ <ul class="thumbnails">
+ <li class="span3">
+ <div class="thumbnail">
+ <img src="http://placehold.it/210x150" alt="">
+ <div class="caption">
+ <h5>Thumbnail label</h5>
+ <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
+ </div>
+ </div>
+ </li>
+ <li class="span3">
+ <div class="thumbnail">
+ <img src="http://placehold.it/210x150" alt="">
+ <div class="caption">
+ <h5>Thumbnail label</h5>
+ <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="span4">
+ <h3>Why use thumbnails</h3>
+ <p>Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.</p>
+ </div>
+ <div class="span4">
+ <h3>Simple, flexible markup</h3>
+ <p>Thumbnail markup is simple—a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.</p>
+ </div>
+ <div class="span4">
+ <h3>Uses grid column sizes</h3>
+ <p>Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.</p>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="span6">
+ <h2>The markup</h2>
+ <p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p>
+<pre class="prettyprint linenums">
+<ul class="thumbnails">
+ <li class="span3">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/210x150" alt="">
+ </a>
+ </li>
+ ...
+</ul>
+</pre>
+ <p>For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code><a></code> for a <code><div></code> like so:</p>
+<pre class="prettyprint linenums">
+<ul class="thumbnails">
+ <li class="span3">
+ <div class="thumbnail">
+ <img src="http://placehold.it/210x150" alt="">
+ <h5>Thumbnail label</h5>
+ <p>Thumbnail caption right here...</p>
+ </div>
+ </li>
+ ...
+</ul>
+</pre>
+ </div>
+ <div class="span6">
+ <h2>More examples</h2>
+ <p>Explore all your options with the various grid classes available to you. You can also mix and match different sizes.</p>
+ <ul class="thumbnails">
+ <li class="span4">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/290x230" alt="">
+ </a>
+ </li>
+ <li class="span2">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/130x100" alt="">
+ </a>
+ </li>
+ <li class="span2">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/130x100" alt="">
+ </a>
+ </li>
+ <li class="span2">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/130x100" alt="">
+ </a>
+ </li>
+ <li class="span2">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/130x100" alt="">
+ </a>
+ </li>
+ <li class="span2">
+ <a href="#" class="thumbnail">
+ <img src="http://placehold.it/130x100" alt="">
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+</section>
+
+
+
+<!-- Autocomplete
+================================================== -->
+<section id="autocomplete">
+ <div class="page-header">
+ <h1>Autocomplete <small></small></h1>
+ </div>
+
+</section>
+
+
+
+<!-- Carousel
+================================================== -->
+<section id="carousel">
+ <div class="page-header">
+ <h1>Carousel <small></small></h1>
+ </div>
+
+</section>
+
+
+
<!-- Alerts & Messages
================================================== -->
<section id="alerts">
<li>Now requires you to add a <code><span class="caret"></span></code> to show the dropdown arrow</li>
</ul>
</li>
+ <li>Navigation
+ <ul>
+ <li>Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code><ul></code></li>
+ <li>New nav list component added that uses the same base class, <code>.nav</code></li>
+ <li>Vertical tabs and pills have been added—just add <code>.stacked</code> to the <code><ul></code></li>
+ <li>Pills were restyled to be less rounded by default</li>
+ <li>Pills now have dropdown menu support (they share the same markup and styles as tabs)</li>
+ </ul>
+ </li>
</ul>
<!--
<li>
// Components: Nav
@import "navbar.less";
-@import "tabs-pills.less";
-@import "sidenav.less";
+@import "navs.less";
@import "breadcrumbs.less";
@import "pagination.less";
-// Dropdown Menus
+// 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;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
#gradient > .vertical(@blue, @blueDark);
+ #gradient > .vertical(@linkColor, darken(@linkColor, 5%));
@shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075);
.box-shadow(@shadow);
}
line-height: @baseLineHeight * 2;
color: @grayDark;
border-bottom: 1px solid #eee;
+ -webkit-margin-collapse: separate;
}
// Set font for forms
// Nav for navbar and topbar
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
-.nav {
+.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
}
a {
- display: block;
float: none;
padding: 10px 10px 11px;
line-height: 19px;
border: 0;
}
}
- // Dropdowns within the .nav
+/* // Dropdowns within the .nav
.dropdown-toggle:hover,
.dropdown.open .dropdown-toggle {
background: #444;
background-color: #222;
border-color: #444;
}
- }
+ }*/
}
--- /dev/null
+// NAVIGATIONS
+// -----------
+
+
+
+// BASE CLASS
+// ----------
+
+.nav {
+ margin-left: 0;
+ margin-bottom: @baseLineHeight;
+ list-style: none;
+}
+
+// Make links block level
+.nav > li > a {
+ display: block;
+}
+.nav > li > a:hover {
+ text-decoration: none;
+ background-color: #eee;
+}
+
+
+
+// NAV LIST
+// --------
+
+.nav.list {
+ padding-left: 14px;
+ padding-right: 14px;
+ margin-bottom: 0;
+}
+.nav.list > li > a,
+.nav.list .nav-header {
+ display: block;
+ padding: 3px 15px;
+ margin-left: -15px;
+ margin-right: -15px;
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
+}
+.nav.list .nav-header {
+ font-size: 11px;
+ font-weight: bold;
+ line-height: @baseLineHeight;
+ color: @grayLight;
+ text-transform: uppercase;
+}
+.nav.list > li + .nav-header {
+ margin-top: 9px;
+}
+.nav.list .active > a {
+ color: @white;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.2);
+ background-color: @linkColor;
+}
+
+
+
+// TABS AND PILLS
+// -------------
+
+// Common styles
+.tabs,
+.pills {
+ .clearfix();
+}
+.tabs > li,
+.pills > li {
+ float: left;
+}
+.tabs > li > a,
+.pills > li > a {
+ padding-right: 12px;
+ padding-left: 12px;
+ margin-right: 2px;
+ line-height: 14px; // keeps the overall height an even number
+}
+
+// TABS
+// ----
+
+// Give the tabs something to sit on
+.tabs {
+ border-bottom: 1px solid #ddd;
+}
+
+// Make the list-items overlay the bottom border
+.tabs > li {
+ margin-bottom: -1px;
+}
+
+// Actual tabs (as links)
+.tabs > li > a {
+ padding-top: 9px;
+ padding-bottom: 9px;
+ border: 1px solid transparent;
+ .border-radius(4px 4px 0 0);
+ &:hover {
+ border-color: #eee #eee #ddd;
+ }
+}
+// Active state, and it's :hover to override normal :hover
+.tabs .active > a,
+.tabs .active > a:hover {
+ color: @gray;
+ background-color: @white;
+ border: 1px solid #ddd;
+ border-bottom-color: transparent;
+ cursor: default;
+}
+
+// PILLS
+// -----
+
+// Links rendered as pills
+.pills > li > a {
+ padding-top: 8px;
+ padding-bottom: 8px;
+ margin-top: 2px;
+ margin-bottom: 2px;
+ .border-radius(5px);
+}
+
+// Active state
+.pills .active > a,
+.pills .active > a:hover {
+ color: @white;
+ background-color: @linkColor;
+}
+
+
+
+// STACKED NAV
+// -----------
+
+// Stacked tabs and pills
+.nav.stacked > li {
+ float: none;
+}
+.nav.stacked > li > a {
+ margin-right: 0; // no need for the gap between nav items
+}
+
+// Tabs
+.tabs.stacked {
+ border-bottom: 0;
+}
+.tabs.stacked > li > a {
+ border: 1px solid #ddd;
+ .border-radius(0);
+}
+.tabs.stacked > li:first-child > a {
+ .border-radius(4px 4px 0 0);
+}
+.tabs.stacked > li:last-child > a {
+ .border-radius(0 0 4px 4px);
+}
+.tabs.stacked > li > a:hover {
+ border-color: #ddd;
+ z-index: 2;
+}
+
+// Pills
+.pills.stacked > li > a {
+ margin-bottom: 3px;
+}
+.pills.stacked > li:last-child > a {
+ margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
+}
+
+
+
+// DROPDOWNS
+// ---------
+
+// Position the menu
+.tabs .dropdown-menu,
+.pills .dropdown-menu {
+ top: 33px;
+ border-width: 1px;
+}
+.pills .dropdown-menu {
+ .border-radius(4px);
+}
+.tabs .dropdown-toggle .caret,
+.pills .dropdown-toggle .caret {
+ margin-top: 6px;
+}
+.tabs .open .dropdown-toggle,
+.pills .open .dropdown-toggle {
+ background-color: #999;
+ border-color: #999;
+}
+.tabs .open .caret,
+.pills .open .caret {
+ border-top-color: #fff;
+ .opacity(100);
+}
+
+
+
+// TABBABLE
+// --------
+
+.tabbable {
+ margin-bottom: @baseLineHeight;
+
+ // Tabs on top
+ .tabs {
+ margin-bottom: 0;
+ border-bottom: 0;
+ }
+ .tab-content {
+ padding: 19px;
+ border: 1px solid #ddd;
+ }
+
+ // Tabs on bottom
+ &.tabs-bottom .tabs > li {
+ margin-top: -1px;
+ margin-bottom: 0;
+ }
+ &.tabs-bottom .tabs > li > a {
+ .border-radius(0 0 4px 4px);
+ &:hover {
+ border-bottom-color: transparent;
+ border-top-color: #ddd;
+ }
+ }
+ &.tabs-bottom .tabs > .active > a,
+ &.tabs-bottom .tabs > .active > a:hover {
+ border-color: transparent #ddd #ddd #ddd;
+ }
+
+ // Tabs on left and right
+ &.tabs-left,
+ &.tabs-right {
+ .clearfix();
+ .tabs {
+ // Give a fixed width to avoid floating .tab-con
+ width: 100px;
+ // Unfloat them so they stack
+ > li {
+ float: none;
+ margin-bottom: -1px;
+ > a {
+ margin-bottom: 2px;
+ &:hover {
+ border-color: transparent;
+ }
+ }
+ }
+ }
+ }
+
+ // Tabs on left
+ &.tabs-left {
+ .tab-content {
+ margin-left: 100px;
+ }
+ .tabs {
+ float: left;
+ > li {
+ margin-right: -1px;
+ > a {
+ margin-right: 0;
+ .border-radius(4px 0 0 4px);
+
+ &:hover {
+ border-right-color: #ddd;
+ }
+ }
+ }
+ // Active state
+ .active > a,
+ .active > a:hover {
+ border-color: #ddd;
+ border-right-color: transparent;
+ }
+ }
+ }
+
+ // Tabs on right
+ &.tabs-right {
+ .tab-content {
+ margin-right: 100px;
+ }
+ .tabs {
+ float: right;
+ > li {
+ margin-left: -1px;
+ > a {
+ margin-left: 0;
+ .border-radius(0 4px 4px 0);
+
+ &:hover {
+ border-left-color: #ddd;
+ }
+ }
+ }
+ // Active state
+ .active > a,
+ .active > a:hover {
+ border-color: #ddd;
+ border-left-color: transparent;
+ }
+ }
+ }
+}
+
+
+
+
+
+
+
+// Tabbable areas
+.tab-content > .tab-pane,
+.pill-content > .pill-pane {
+ display: none;
+}
+.tab-content > .active,
+.pill-content > .active {
+ display: block;
+}
+
+++ /dev/null
-// SIDE NAV
-// --------
-
-
-.side-nav {
- padding: @baseLineHeight / 2 0;
-}
-.side-nav .nav-label,
-.side-nav .nav-item {
- display: block;
- padding: 3px 15px;
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
-}
-.side-nav .nav-label {
- font-size: 11px;
- line-height: @baseLineHeight;
- color: @grayLight;
- text-transform: uppercase;
-}
-.side-nav .nav-group {
- margin: 0; // clear default ul margins
- list-style: none;
-}
-.side-nav .nav-group + .nav-label {
- margin-top: 9px;
-}
-
-.side-nav .nav-item {
- font-weight: bold;
-}
-.side-nav .nav-item i {
- vertical-align: -2px;
-}
-.side-nav .nav-item:hover {
- text-decoration: none;
-}
-.side-nav .active .nav-item {
- color: #fff;
- text-shadow: 0 -1px 0 rgba(0,0,0,.3);
- #gradient > .vertical(#ccc, #999);
- @shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05);
- .box-shadow(@shadow);
-}
\ No newline at end of file
+++ /dev/null
-// Tabs and Pills
-.tabs,
-.pills {
- padding: 0;
- margin: 0 0 20px;
- list-style: none;
- .clearfix();
- > li {
- float: left;
- > a {
- display: block;
- }
- }
-}
-
-// Tabs
-.tabs {
- border-color: #ddd;
- border-style: solid;
- border-width: 0 0 1px;
- > li {
- position: relative; // For the dropdowns mostly
- margin-bottom: -1px;
- > a {
- padding: 0 15px;
- margin-right: 2px;
- line-height: @baseLineHeight * 2;
- border: 1px solid transparent;
- .border-radius(4px 4px 0 0);
- &:hover {
- text-decoration: none;
- background-color: #eee;
- border-color: #eee #eee #ddd;
- }
- }
- }
- // Active state, and it's :hover to override normal :hover
- .active > a,
- .active > a:hover {
- color: @gray;
- background-color: @white;
- border: 1px solid #ddd;
- border-bottom-color: transparent;
- cursor: default;
- }
-}
-
-.tabbable {
- margin-bottom: @baseLineHeight;
-
- // Tabs on top
- .tabs {
- margin-bottom: 0;
- border-bottom: 0;
- }
- .tab-content {
- padding: 19px;
- border: 1px solid #ddd;
- }
-
- // Tabs on bottom
- &.tabs-bottom .tabs > li {
- margin-top: -1px;
- margin-bottom: 0;
- }
- &.tabs-bottom .tabs > li > a {
- .border-radius(0 0 4px 4px);
- &:hover {
- border-bottom-color: transparent;
- border-top-color: #ddd;
- }
- }
- &.tabs-bottom .tabs > .active > a,
- &.tabs-bottom .tabs > .active > a:hover {
- border-color: transparent #ddd #ddd #ddd;
- }
-
- // Tabs on left and right
- &.tabs-left,
- &.tabs-right {
- .clearfix();
- .tabs {
- // Give a fixed width to avoid floating .tab-con
- width: 100px;
- // Unfloat them so they stack
- > li {
- float: none;
- margin-bottom: -1px;
- > a {
- margin-bottom: 2px;
- &:hover {
- border-color: transparent;
- }
- }
- }
- }
- }
-
- // Tabs on left
- &.tabs-left {
- .tab-content {
- margin-left: 100px;
- }
- .tabs {
- float: left;
- > li {
- margin-right: -1px;
- > a {
- margin-right: 0;
- .border-radius(4px 0 0 4px);
-
- &:hover {
- border-right-color: #ddd;
- }
- }
- }
- // Active state
- .active > a,
- .active > a:hover {
- border-color: #ddd;
- border-right-color: transparent;
- }
- }
- }
-
- // Tabs on right
- &.tabs-right {
- .tab-content {
- margin-right: 100px;
- }
- .tabs {
- float: right;
- > li {
- margin-left: -1px;
- > a {
- margin-left: 0;
- .border-radius(0 4px 4px 0);
-
- &:hover {
- border-left-color: #ddd;
- }
- }
- }
- // Active state
- .active > a,
- .active > a:hover {
- border-color: #ddd;
- border-left-color: transparent;
- }
- }
- }
-}
-
-
-// Dropdowns in tabs
-.tabs {
- .dropdown-menu {
- top: 37px;
- border-width: 1px;
- }
- .dropdown-toggle .caret {
- margin-top: 15px;
- margin-left: 5px;
- }
- .open .dropdown-toggle {
- border-color: #999;
- }
- .open .dropdown-toggle .caret {
- border-top-color: #fff;
- .opacity(100);
- }
-}
-
-// Pills
-.pills {
- > li > a {
- padding: 0 15px;
- margin: 5px 3px 5px 0;
- line-height: 30px;
- text-shadow: 0 1px 1px @white;
- .border-radius(15px);
- &:hover {
- color: @white;
- text-decoration: none;
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
- background-color: @linkColorHover;
- }
- }
- .active > a {
- color: @white;
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
- background-color: @linkColor;
- }
-}
-
-// Stacked pills
-.pills-vertical > li {
- float: none;
-}
-
-// Tabbable areas
-.tab-content > .tab-pane,
-.pill-content > .pill-pane {
- display: none;
-}
-.tab-content > .active,
-.pill-content > .active {
- display: block;
-}
-
-
-// Step nav
-.step-nav {
- position: relative; // for prev/next links
- margin: 0 0 @baseLineHeight;
- list-style: none;
- line-height: 30px;
- text-align: center;
- background-color: #f5f5f5;
- .border-radius(15px);
- li {
- display: inline;
- color: @grayLight;
- }
- // prev/next links
- .prev,
- .next {
- position: absolute;
- top: 6px;
- }
- .prev {
- left: 15px;
- }
- .next {
- right: 15px;
- }
- // indicators for each step/page/item/etc
- .dot {
- display: inline-block;
- width: 10px;
- height: 10px;
- margin: 0 3px;
- text-indent: -999em;
- background-color: @grayLight;
- .border-radius(5px);
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.25));
- }
- .dot:hover,
- .active .dot {
- background-color: @grayDark;
- }
-}
-
-
-// Subnav
-// STILL A WIP
-.subnav {
- #gradient > .vertical(#f5f5f5, #eeeeee);
- @shadow: inset 0 1px 0 #fff, 0 0 5px rgba(0,0,0,.5);
- .box-shadow(@shadow);
- a {
- padding: 8px 10px;
- font-size: 12px;
- color: @linkColor;
- text-shadow: 0 1px 0 #fff;
- border-left: 1px solid #f9f9f9;
- border-right: 1px solid #e5e5e5;
- &:hover {
- color: @linkColorHover;
- background-color: #eee;
- }
- }
- li:first-child a {
- border-left: 0;
- .border-radius(6px 0 0 6px);
- }
- li:last-child a {
- border-right: 0;
- .border-radius(0 6px 6px 0);
- }
- ul .active > a {
- color: @grayDark;
- background-color: #eee;
- }
-}
\ No newline at end of file
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
- .border-radius(3px);
+ .border-radius(4px);
white-space: pre;
white-space: pre-wrap;
word-break: break-all;
projects / thirdparty / bootstrap.git / commitdiff
