0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00

adding temp idea for subnav to docs

This commit is contained in:
Mark Otto 2011-11-30 01:00:55 -08:00
parent f2c40ee24d
commit bc51c15709
4 changed files with 89 additions and 1 deletions

45
bootstrap.css vendored
View File

@ -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: Wed Nov 30 00:39:32 PST 2011
* Date: Wed Nov 30 00:54:47 PST 2011
*/
html, body {
margin: 0;
@ -2130,6 +2130,49 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
.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;

4
bootstrap.min.css vendored
View File

@ -285,6 +285,10 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.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;}

View File

@ -53,6 +53,15 @@
<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

View File

@ -259,3 +259,35 @@
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;
}
}