rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

More subtle grid pattern, adding dropdown arrow, adding dropdown arrow styles to the topbar

Browse Source
This commit is contained in:
Mark Otto 2011-04-29 11:40:24 -07:00
parent d61317d7b5
commit bb8ebe2312
6 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/dropdown-arrow.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 B

BIN
img/grid-20px.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 324 B

After

Width:  |  Height:  |  Size: 324 B

12
index.html
View File

@ -1001,7 +1001,7 @@
<div class="container fixed">
<h3><a class="logo" href="">Project Name</a></h3>
<ul>
<li><a href="">Home</a></li>
<li class="active"><a href="">Home</a></li>
<li><a href="">Profile</a></li>
<li><a href="">Messages</a></li>
<li><a href="">Who to Follow</a></li>
@ -1024,11 +1024,17 @@
</div>
</div> <!-- topbar-wrapper -->
<div class="row">
<div class="span6 columns">
<div class="span5 columns">
<h4>What is it</h4>
<p>Our topbar is a fixed bar that houses a website's logo or name, primary navigation, and search form.</p>
</div>
<div class="span5 columns">
<h4>Customizable</h4>
<p>All elements within, and the entire topbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav&mdash;or any combination of that.</p>
</div>
<div class="span6 columns">
<p>All elements are optional in the topbar, as is the entire topbar. Contents are configurable in that you can have a logo, nav, search, and a secondary nav&mdash;or any combination of that.</p>
<h4>Dropdowns included</h4>
<p>As part of the main navigation, we've included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it's done.</p>
</div>
</div>

10
less/baseline.css
View File

@ -150,8 +150,8 @@ table.zebra-striped th.headerSortUp.purple,table.zebra-striped th.headerSortDown
div.topbar{background-color:#222222;background-repeat:no-repeat;background-image:-webkit-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-webkit-linear-gradient(#333333, #222222);background-image:-moz-linear-gradient(#333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#333333', EndColorStr='#222222', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#222222', GradientType=0))";height:40px;position:fixed;top:0;left:0;right:0;z-index:100;overflow:visible;-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);}div.topbar a{color:#777777;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);-webkit-transition:all linear 0.1s;-moz-transition:all linear 0.1s;transition:all linear 0.1s;}
div.topbar ul li a:hover,div.topbar ul li.active a,div.topbar a.logo:hover{background-color:#333;background-color:rgba(255, 255, 255, 0.15);color:#ffffff;text-decoration:none;}
div.topbar a.logo{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}div.topbar a.logo img{display:inline;float:left;margin-right:6px;}
div.topbar form{float:left;margin:4px 0 0 0;opacity:1;position:relative;}div.topbar form input{background-color:#777777;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;width:220px;padding:4px 9px;color:#fff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;transition:none;}div.topbar form input:-moz-placeholder{color:#fff;}
div.topbar form input::-webkit-input-placeholder{color:#fff;}
div.topbar form{float:left;margin:4px 0 0 0;opacity:1;position:relative;}div.topbar form input{background-color:#777777;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;width:220px;padding:4px 9px;color:#fff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;transition:none;}div.topbar form input:-moz-placeholder{color:#cccccc;}
div.topbar form input::-webkit-input-placeholder{color:#cccccc;}
div.topbar form input:hover{background-color:#444;background-color:rgba(255, 255, 255, 0.5);color:#fff;}
div.topbar form input:focus,div.topbar form input.focused{outline:none;background-color:#fff;color:#333333;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);}
div.topbar ul{display:block;float:left;margin:0 10px 0 0;}div.topbar ul.secondary-nav{float:right;margin-left:10px;margin-right:0;}
@ -160,8 +160,8 @@ div.topbar ul li.active a{background-color:#222;background-color:rgba(0, 0, 0, 0
div.topbar ul li.vr{border-left:1px solid #008db8;border-right:1px solid #00a0d1;height:26px;margin:6px 3px 1px 3px;}
div.topbar ul.primary-nav li ul{left:0;}
div.topbar ul.secondary-nav li ul{right:0;}
div.topbar ul li.menu{position:relative;}div.topbar ul li.menu a.menu span.menu-label:after{width:7px;height:7px;display:inline-block;background:transparent url(/images/sprite-icons.png) no-repeat scroll -79px -100px;content:"&darr;";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;opacity:.5;}
div.topbar ul li.menu.open a.menu,div.topbar ul li.menu.open a:hover{background-color:#00b4eb;background-color:rgba(255, 255, 255, 0.1);}
div.topbar ul li.menu{position:relative;}div.topbar ul li.menu a.menu:after{width:7px;height:7px;display:inline-block;background:transparent url(../img/dropdown-arrow.gif) no-repeat top center;content:"&darr;";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;opacity:.5;}
div.topbar ul li.menu.open a.menu,div.topbar ul li.menu.open a:hover{background-color:#00b4eb;background-color:rgba(255, 255, 255, 0.1);color:#fff;}
div.topbar ul li.menu.open ul{display:block;}div.topbar ul li.menu.open ul li a{background-color:transparent;font-weight:normal;}div.topbar ul li.menu.open ul li a:hover{background-color:rgba(255, 255, 255, 0.1);color:#fff;}
div.topbar ul li.menu.open ul li.active a{background-color:rgba(255, 255, 255, 0.1);font-weight:bold;}
div.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;-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);}div.topbar ul li ul li{float:none;clear:both;display:block;background:none;font-size:12px;}div.topbar ul li ul li a{display:block;padding:6px 15px;clear:both;font-weight:normal;line-height:19px;color:#bbb;}div.topbar ul li ul li a:hover{background-color:#333;background-color:rgba(255, 255, 255, 0.25);color:#fff;}
@ -196,7 +196,7 @@ div.well{background:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;bord
body{background-color:#ffffff;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), color-stop(0.15, #ffffff), to(#ffffff));background-image:-webkit-linear-gradient(#eeeeee, color-stop(0.15, #ffffff), #ffffff);background-image:-moz-linear-gradient(#eeeeee, color-stop(#ffffff, 0.15), #ffffff);background-attachment:fixed;background-position:0 40px;position:relative;}
header,section,footer,article,aside{display:block;}
section{padding-top:80px;margin-bottom:-40px;}
#masthead,#footer{background-color:#049cd9;background-repeat:no-repeat;background-image:-webkit-gradient(linear, left top, left bottom, from(#005cbd), to(#049cd9));background-image:-webkit-linear-gradient(#005cbd, #049cd9);background-image:-moz-linear-gradient(#005cbd, #049cd9);background-image:-o-linear-gradient(top, #005cbd, #049cd9);background-image:-khtml-gradient(linear, left top, left bottom, from(#005cbd), to(#049cd9));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#005cbd', EndColorStr='#049cd9', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#005cbd', EndColorStr='#049cd9', GradientType=0))";}#masthead div.inner,#footer div.inner{background:transparent url(../img/grid-20px.png) 0 -1px;padding:40px 0;-webkit-box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);}
#masthead,#footer{background-color:#049cd9;background-repeat:no-repeat;background-image:-webkit-gradient(linear, left top, left bottom, from(#0056b0), to(#049cd9));background-image:-webkit-linear-gradient(#0056b0, #049cd9);background-image:-moz-linear-gradient(#0056b0, #049cd9);background-image:-o-linear-gradient(top, #0056b0, #049cd9);background-image:-khtml-gradient(linear, left top, left bottom, from(#0056b0), to(#049cd9));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#0056b0', EndColorStr='#049cd9', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#0056b0', EndColorStr='#049cd9', GradientType=0))";}#masthead div.inner,#footer div.inner{background:transparent url(../img/grid-20px.png) 0 -1px;padding:40px 0;-webkit-box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);}
#masthead h1,#footer h1,#masthead p,#footer p,#masthead small,#footer small{color:#fff;text-shadow:0 2px 0 rgba(0, 0, 0, 0.25);}
#masthead{margin-top:40px;margin-bottom:-40px;}#masthead h1{margin-bottom:0;}
#masthead p.lead{font-size:20px;font-weight:300;line-height:30px;margin:5px 0;}

2
less/docs.less
View File

@ -33,7 +33,7 @@ section {
// Blueprint-style header and footer
#masthead,
#footer {
#gradient > .vertical(darken(@blue-dark, 5%), darken(@blue, 7.5%));
#gradient > .vertical(darken(@blue-dark, 7.5%), darken(@blue, 7.5%));
div.inner {
background: transparent url(../img/grid-20px.png) 0 -1px;
padding: 40px 0;

12
less/patterns.less
View File

@ -125,11 +125,12 @@ div.topbar {
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
.box-shadow(@shadow);
.transition(none);
// Placeholder text gets special styles; can't be bundled together though for some reason
&:-moz-placeholder {
color: #fff;
color: @gray-lighter;
}
&::-webkit-input-placeholder {
color: #fff;
color: @gray-lighter;
}
&:hover {
background-color: #444;
@ -196,12 +197,12 @@ div.topbar {
li.menu {
position: relative;
a.menu {
span.menu-label:after {
&:after {
width: 7px;
height: 7px;
display: inline-block;
background: transparent url(/images/sprite-icons.png) no-repeat scroll -79px -100px;
content:"&darr;";
background: transparent url(../img/dropdown-arrow.gif) no-repeat top center;
content: "&darr;";
text-indent: -99999px;
vertical-align: top;
margin-top: 8px;
@ -214,6 +215,7 @@ div.topbar {
a:hover {
background-color: lighten(#00a0d1,5);
background-color: rgba(255,255,255,.1);
color: #fff;
}
ul {
display: block;