patterns.less

/* Patterns.less
 * Repeatable UI elements outside the base styles provided from the scaffolding
 * ---------------------------------------------------------------------------- */


// TOPBAR
// ------

// Topbar for Branding and Nav
.topbar {
  height: 40px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  overflow: visible;

  // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
  .fill {
    background:#222;
    #gradient > .vertical(#333, #222);
    @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
    .box-shadow(@shadow);
  }

  // Links get text shadow
  a {
    color: @grayLight;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  }

  // Hover and active states
  a:hover,
  ul li.active a {
    background-color: #333;
    background-color: rgba(255,255,255,.05);
    color: @white;
    text-decoration: none;
  }

  // Website name
  h3 {
    position:relative;
    a {
      float: left;
      display: block;
      padding: 8px 20px 12px;
      margin-left: -20px; // negative indent to left-align the text down the page
      color: @white;
      font-size: 20px;
      font-weight: 200;
      line-height: 1;
    }
  }

  // Search Form
  form {
    float: left;
    margin: 5px 0 0 0;
    position: relative;
    .opacity(100);
    input {
      background-color: #444;
      background-color: rgba(255,255,255,.3);
      #font > .sans-serif(13px, normal, 1);
      width: 220px;
      padding: 4px 9px;
      color: #fff;
      color: rgba(255,255,255,.75);