foundation/stylus/foundation/components/top-bar.styl

You may also want to checkout:

//
// Top Bar Variables
//
$include-html-top-bar-classes ?= $include-html-classes;

// Background color for the top bar
$topbar-bg ?= #111;

// Height and margin
$topbar-height ?= 45px;
$topbar-margin-bottom ?= emCalc(30px);

// Control Input height for top bar
$topbar-input-height ?= 2.45em;

// Controlling the styles for the title in the top bar
$topbar-title-weight ?= bold;
$topbar-title-font-size ?= emCalc(17px);

// Style the top bar dropdown elements
$topbar-dropdown-bg ?= #222;
$topbar-dropdown-link-color ?= #fff;
$topbar-dropdown-link-bg ?= lighten($topbar-bg, 5%);
$topbar-dropdown-toggle-size ?= 5px;
$topbar-dropdown-toggle-color ?= #fff;
$topbar-dropdown-toggle-alpha ?= 0.5;

// Set the link colors and styles for top-level nav
$topbar-link-color ?= #fff;
$topbar-link-color-hover ?= #fff;
$topbar-link-color-active ?= #fff;
$topbar-link-weight ?= bold;
$topbar-link-font-size ?= emCalc(13px);
$topbar-link-hover-lightness ?= -30%; // Darken by 30%
$topbar-link-bg-hover ?= darken($topbar-bg, 3%);
$topbar-link-bg-active ?= darken($topbar-bg, 3%);

$topbar-dropdown-label-color ?= #555;
$topbar-dropdown-label-text-transform ?= uppercase;
$topbar-dropdown-label-font-weight ?= bold;
$topbar-dropdown-label-font-size ?= emCalc(10px);

// Top menu icon styles
$topbar-menu-link-transform ?= uppercase;
$topbar-menu-link-font-size ?= emCalc(13px);
$topbar-menu-link-weight ?= bold;
$topbar-menu-link-color ?= #fff;
$topbar-menu-icon-color ?= #fff;
$topbar-menu-link-color-toggled ?= #888;
$topbar-menu-icon-color-toggled ?= #888;

// Transitions and breakpoint styles
$topbar-transition-speed ?= 300ms;
$topbar-breakpoint ?= emCalc(940px); // Change to 9999px for always mobile layout
$topbar-media-query ?= "only screen and (min-width:" + $topbar-breakpoint + ")";

// Divider Styles
$topbar-divider-border-bottom ?= solid 1px lighten($topbar-bg, 10%);
$topbar-divider-border-top ?= solid 1px darken($topbar-bg, 10%);

// Sticky Class
$topbar-sticky-class ?= ".sticky";

if $include-html-top-bar-classes != false {

  /* Wrapped around .top-bar to contain to grid width */
  .contain-to-grid {
    width: 100%;
    background: $topbar-bg;

    .top-bar { margin-bottom: 0; }
  }

  // Wrapped around .top-bar to make it stick to the top
  .fixed {
    width: 100%;
    {$default-float}: 0;
    position: fixed;
    top: 0;
    z-index: 99;
  }

  .top-bar {
    overflow: hidden;
    height: $topbar-height;
    line-height: $topbar-height;
    position: relative;
    background: $topbar-bg;
    margin-bottom: $topbar-margin-bottom;

    // Topbar Global list Styles
    ul {
      margin-bottom: 0;
      list-style: none;
    }

    .row { max-width: none; }

    form,
    input { margin-bottom: 0; }

    input { height: $topbar-input-height; }

    .button { padding-top: .5em; padding-bottom: .5em; margin-bottom: 0; }

    // Title Area
    .title-area {
      position: relative;
      margin: 0;
    }

    .name {
      height: $topbar-height;
      margin: 0;
      font-size: $em-base;

      h1 {
        line-height: $topbar-height;
        font-size: $topbar-title-font-size;
        margin: 0;
        a {
          font-weight: $topbar-title-weight;
          color: $topbar-link-color;
          width: 50%;
          display: block;
          padding: 0 ($topbar-height / 3);
        }
      }
    }

    // Menu toggle button on small devices
    .toggle-topbar {
      position: absolute;
      {$opposite-direction}: 0;
      top: 0;

      a {
        color: $topbar-link-color;
        text-transform: $topbar-menu-link-transform;
        font-size: $topbar-menu-link-font-size;
        font-weight: $topbar-menu-link-weight;
        position: relative;
        display: block;
        padding: 0 ($topbar-height / 3);
        height: $topbar-height;
        line-height: $topbar-height;
      }

      // Adding the class "menu-icon" will add the 3-line icon people love and adore.
      &.menu-icon {
        {$opposite-direction}: ($topbar-height / 3);
        top: 50%;
        margin-top: -16px;
        padding-{$default-float}: 40px;

        a {
          text-indent: -48px;
          width: 34px;
          height: 34px;
          line-height: 33px;
          padding: 0;
          color: $topbar-menu-link-color;

          span {
            position: absolute;
            {$opposite-direction}: 0;
            display: block;
            width: 16px;
            height: 0;
            // Shh, don't tell, but box-shadows create the menu icon :)
            if $experimental {
              -webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color, 0 16px 0 1px $topbar-menu-icon-color, 0 22px 0 1px $topbar-menu-icon-color;
            }
            box-shadow: 0 10px 0 1px $topbar-menu-icon-color, 0 16px 0 1px $topbar-menu-icon-color, 0 22px 0 1px $topbar-menu-icon-color;
          }
        }
      }
    }

    // Change things up when the top-bar is expanded
    &.expanded {
      height: auto;
      background: transparent;

      .title-area { background: $topbar-bg; }

      .toggle-topbar {
        a {
          color: $topbar-menu-link-color-toggled;
          span {
            // Shh, don't tell, but box-shadows create the menu icon :)
            if $experimental {
              -webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled, 0 16px 0 1px $topbar-menu-icon-color-toggled, 0 22px 0 1px $topbar-menu-icon-color-toggled;
            }
            box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled, 0 16px 0 1px $topbar-menu-icon-color-toggled, 0 22px 0 1px $topbar-menu-icon-color-toggled;
          }
        }
      }
    }

  }

  // Right and Left Navigation that stacked by default
  .top-bar-section {
    {$default-float}: 0;
    position: relative;
    width: auto;
    single-transition($default-float, $topbar-transition-speed);

    ul {
      width: 100%;
      height: auto;
      display: block;
      background: $topbar-dropdown-bg;
      font-size: $em-base;
      margin: 0;
    }

    .divider,
    [role="separator"] {
      border-bottom: $topbar-divider-border-bottom;
      border-top: $topbar-divider-border-top;
      clear: both;
      height: 1px;
      width: 100%;
    }

    ul li {
      & > a {
        display: block;
        width: 100%;
        color: $topbar-link-color;
        padding: 12px 0 12px 0;
        padding-{$default-float}: ($topbar-height / 3);
        font-size: $topbar-link-font-size;
        font-weight: $topbar-link-weight;
        background: $topbar-dropdown-bg;

        &:hover {
          background: $topbar-link-bg-hover;
          color: $topbar-link-color-hover;
        }


        &.button {
          background: $primary-color;
          font-size: $topbar-link-font-size;
          &:hover {
            background: darken($primary-color, 10%);
          }
        }
        &.button.secondary {
          background: $secondary-color;
          &:hover {
            background: darken($secondary-color, 10%);
          }
        }
        &.button.success {
          background: $success-color;
          &:hover {
            background: darken($success-color, 10%);
          }
        }
        &.button.alert {
          background: $alert-color;
          &:hover {
            background: darken($alert-color, 10%);
          }
        }

      }

      // Apply the active link color when it has that class
      &.active > a {
        background: $topbar-link-bg-active;
        color: $topbar-link-color-active;
      }
    }

    // Add some extra padding for list items contains buttons
    .has-form { padding: ($topbar-height / 3); }

    // Styling for list items that have a dropdown within them.
    .has-dropdown {
      position: relative;

      & > a {
        &:after {
          css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
          margin-{$opposite-direction}: ($topbar-height / 3);
          margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
          position: absolute;
          top: 50%;
          {$opposite-direction}: 0;
        }
      }

      &.moved { position: static;
        & > .dropdown {
          visibility: visible;
        }
      }
    }

    // Styling elements inside of dropdowns
    .dropdown {
      position: absolute;
      {$default-float}: 100%;
      top: 0;
      visibility: hidden;
      z-index: 99;

      li {
        width: 100%;
        height: auto;
        
        a {
          font-weight: normal;
          padding: 8px ($topbar-height / 3);
        }

        &.title h5 { margin-bottom: 0;
          a {
            color: $topbar-link-color;
            line-height: ($topbar-height / 2);
            display: block;
          }
        }
      }

      label {
        padding: 8px ($topbar-height / 3) 2px;
        margin-bottom: 0;
        text-transform: $topbar-dropdown-label-text-transform;
        color: $topbar-dropdown-label-color;
        font-weight: $topbar-dropdown-label-font-weight;
        font-size: $topbar-dropdown-label-font-size;
      }
    }
  }

  // Element that controls breakpoint, no need to change this ever
  .top-bar-js-breakpoint {
    width: $topbar-breakpoint !important;
    visibility: hidden;
  }
  .js-generated { display: block; }


  // Top Bar styles intended for screen sizes above the breakpoint.
  @media $topbar-media-query {
    .top-bar {
      background: $topbar-bg;
      clearfix();
      overflow: visible;

      .toggle-topbar { display: none; }

      .title-area { float: $default-float; }
      .name h1 a { width: auto; }

      input,
      .button {
        line-height: 2em;
        font-size: emCalc(14px);
        height: 2em;
        padding: 0 10px;
        position: relative;
        top: 8px;
      }

      &.expanded { background: $topbar-bg; }
    }

    .contain-to-grid .top-bar {
      max-width: $row-width;
      margin: 0 auto;
    }

    .top-bar-section {
      single-transition(none,0,0);
      {$default-float}: 0 !important;

      ul {
        width: auto;
        height: auto !important;
        display: inline;

        li {
          float: $default-float;
          .js-generated { display: none; }
        }
      }

      li {
        a:not(.button) {
          padding: 0 ($topbar-height / 3);
          line-height: $topbar-height;
          background: $topbar-bg;
          &:hover { background: lighten($topbar-dropdown-bg, $topbar-link-hover-lightness); }
        }
      }

      .has-dropdown {
        & > a {
          padding-{$opposite-direction}: ($topbar-height / 3) + 20 !important;

          &:after {
            css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
            margin-top: -($topbar-dropdown-toggle-size / 2);
            top: ($topbar-height / 2);
          }
        }

        &.moved { position: relative;
          & > .dropdown { visibility: hidden; }
        }

        &.hover,
        &:active {
          & > .dropdown {
            visibility: visible;
          }
        }

        .dropdown li.has-dropdown {
          & > a {
            &:after {
              border: none;
              content: "\00bb";
              margin-top: -16px;
              {$opposite-direction}: 5px;
            }
          }
        }

      }

      .dropdown {
        {$default-float}: 0;
        top: auto;
        background: transparent;
        min-width: 100%;

        li {
          a {
            color: $topbar-dropdown-link-color;
            line-height: 1;
            white-space: nowrap;
            padding: 7px ($topbar-height / 3);
            background: $topbar-dropdown-link-bg;
          }

          label {
            white-space: nowrap;
            background: lighten($topbar-bg, 5%);
          }

          // Second Level Dropdowns
          .dropdown {
            {$default-float}: 100%;
            top: 0;
          }
        }
      }

      & > ul > .divider,
      & > ul > [role="separator"] {
        border-bottom: none;
        border-top: none;
        border-{$opposite-direction}: $topbar-divider-border-bottom;
        border-{$default-float}: $topbar-divider-border-top;
        clear: none;
        height: $topbar-height;
        width: 0px;
      }

      .has-form {
        background: $topbar-bg;
        padding: 0 ($topbar-height / 3);
        height: $topbar-height;
      }

      // Position overrides for ul.right
      ul.right {
        li .dropdown {
          left: auto;
          right: 0;

          li .dropdown { right: 100%; }
        }
      }

    }

  }

}