* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Wed Nov 30 00:39:32 PST 2011
+ * Date: Wed Nov 30 00:54:47 PST 2011
*/
html, body {
margin: 0;
.step-nav .dot:hover, .step-nav .active .dot {
background-color: #404040;
}
+.subnav {
+ position: relative;
+ background-color: #eeeeee;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));
+ background-image: -moz-linear-gradient(top, #f5f5f5, #eeeeee);
+ background-image: -ms-linear-gradient(top, #f5f5f5, #eeeeee);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));
+ background-image: -webkit-linear-gradient(top, #f5f5f5, #eeeeee);
+ background-image: -o-linear-gradient(top, #f5f5f5, #eeeeee);
+ background-image: linear-gradient(top, #f5f5f5, #eeeeee);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+}
+.subnav a {
+ padding: 10px 15px;
+ color: #0069d6;
+ text-shadow: 0 1px 0 #fff;
+ border-left: 1px solid #f9f9f9;
+ border-right: 1px solid #e5e5e5;
+}
+.subnav a:hover {
+ color: #00438a;
+ background-color: #eee;
+}
+.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: #404040;
+ background-color: #eee;
+}
.breadcrumb {
padding: 7px 14px;
margin: 0 0 18px;
.step-nav .next{right:15px;}
.step-nav .dot{display:inline-block;width:10px;height:10px;margin:0 3px;text-indent:-999em;background-color:#bfbfbf;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);}
.step-nav .dot:hover,.step-nav .active .dot{background-color:#404040;}
+.subnav{position:relative;background-color:#eeeeee;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));background-image:-moz-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-ms-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));background-image:-webkit-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-o-linear-gradient(top, #f5f5f5, #eeeeee);background-image:linear-gradient(top, #f5f5f5, #eeeeee);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.subnav a{padding:10px 15px;color:#0069d6;text-shadow:0 1px 0 #fff;border-left:1px solid #f9f9f9;border-right:1px solid #e5e5e5;}.subnav a:hover{color:#00438a;background-color:#eee;}
+.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:#404040;background-color:#eee;}
.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:#bfbfbf;}
.breadcrumb .active a{color:#404040;}
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
</header>
+ <!-- Work in progress sub nav for docs -->
+ <div class="navbar subnav docked-top">
+ <ul class="nav">
+ <li class="active"><a href="#">Grid system</a></li>
+ <li><a href="#">Layouts</a></li>
+ <li><a href="#">Responsive</a></li>
+ </ul>
+ </div>
+
<!-- Grid system
background-color: @grayDark;
}
}
+
+
+// Subnav
+// STILL A WIP
+.subnav {
+ position: relative;
+ #gradient > .vertical(#f5f5f5, #eeeeee);
+ .border-radius(6px);
+ a {
+ padding: 10px 15px;
+ 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