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

bb8ebe23 · Mark Otto · d61317d7 · bb8ebe23 · d61317d7 · bb8ebe23
Commit bb8ebe23 authored Apr 29, 2011 by Mark Otto
6 changed files
--- a/img/dropdown-arrow.gif
+++ b/img/dropdown-arrow.gif
--- a/img/grid-20px.png
+++ b/img/grid-20px.png
--- a/index.html
+++ b/index.html
@@ -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>

--- a/less/baseline.css
+++ b/less/baseline.css
@@ -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{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:#fff;}
+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{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);}
+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;}

--- a/less/docs.less
+++ b/less/docs.less
@@ -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;

--- a/less/patterns.less
+++ b/less/patterns.less
@@ -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;
+          background: transparent url(../img/dropdown-arrow.gif) no-repeat top center;
-          content:"&darr;";
+          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;