/* Foundation Top Bar Requires: -jquery.foundation.topbar.js Notes: - <nav class="top-bar"> can have .fixed added to make it stick to the top of viewport. Can add .contain-to-grid to top-bar to make it full width but content on grid. - <li class="name"> creates a branding area that can be linked to homepage - Can include text, image or both inside this <li>. - <li class="divider"> creates a divider between nav items, add margins for space - <li class="search"> Needs to hold a <form> which can use .row.collapse and pre/postfix buttons or default type="search" */ /* <nav> */ .top-bar { background: $topBarBgColor; height: $topBarHeight; line-height: $topBarHeight; margin: 0 0 $topBarBtmMargin; padding: 0; width: 100%; /* Contain width to .row width */ &.contain-to-grid { margin: 0 auto; position: relative; width: $rowWidth; /* Get the black bar to extend all the way */ &:before, &:after { background: $topBarBgColor; content:""; display: block; height: $topBarHeight; position: absolute; width: 1000px; } &:before { left: -100%; } &:after { right: -100%; } /* Contained and fixed at the top */ &.fixed { left: 50%; margin-left: -($rowWidth / 2); position: fixed; } ul li.name h1 a { padding-left: $columnGutter / 2; } } /* First <ul> for branding, title, name, etc */ &>ul { .name { h1 { line-height: $topBarHeight; margin: 0; a { font-weight: $topBarTitleWeight; padding: 0 $topBarHeight / 2; font-size: $topBarTitleSize !important; } } img { margin-top: -5px; vertical-align: middle; } } } /* topbar global <ul> styles */ ul { display: inline; height: $topBarHeight; line-height: $topBarHeight; list-style: none; /* Main Navigation links style */ &>li { float: left; a:not(.button) { color: $topBarLinkColor; display: block; font-size: $topBarLinkSize; font-weight: $topBarLinkWeight; height: $topBarHeight; line-height: $topBarHeight; padding: 0 $topBarHeight / 3; } &:hover, &.active { background: darken($topBarBgColor, 20%); a { color: darken($topBarLinkColor, 15%); } } /* Dividers between navigation */ &.divider { background: darken($topBarBgColor, 20%); @include box-shadow(1px 0 0 rgba(255,255,255,0.10)); height: 100%; margin-right: 1px; width: 1px; } /* Put a button in an <li> but give is a class */ &.has-button { a.button { margin: 0 $topBarHeight / 4; } &:hover { background: $topBarBgColor; a { color: #fff; } } } /* Put a search bar or text input in the bar */ &.search { padding: 0 $topBarHeight / 3; form { display: inline-block; margin-bottom: 0; vertical-align: middle; width: $topBarSearchWidth; input[type=text] { @include border-right-radius(0); float: left; font-size: ms(0) - 1; margin-top: -1px; height: $topBarHeight / 2; //28px margin-bottom: 0; width: $topBarSearchWidth - 70px; &+.button { border-left: none; @include border-left-radius(0); float: left; font-size: ms(0) - 2; margin-top: -1px; padding: 5px 12px 4px; } } input[type=search] { font-size: 16px; margin-bottom: 0; } } &:hover { background: $topBarBgColor; } } /* Hide the triangle for breakpoint menu */ &.toggle-topbar { display: none; } /* li.has-dropdown */ &.has-dropdown { position: relative; &:hover { &>.dropdown { display: block; visibility: visible; } } a { padding-right: $topBarHeight * .75; &:after { @include cssTriangle($topBarDropToggleSize, #fff, top); margin-right: $topBarHeight / 3; margin-top: -$topBarDropToggleSize / 2; position: absolute; right: 0; top: 50%; } } .dropdown { background: $topBarBgColor; left: 0; margin: 0; padding: $topBarHeight / 5 0 0 0; position: absolute; visibility: hidden; z-index: 99; li { background: $topBarBgColor; line-height: 1; min-width: 100%; padding-bottom: 5px; a { font-weight: normal; height: 100%; line-height: 1; padding: 5px $topBarHeight / 3 + 2 5px $topBarHeight / 3; white-space: nowrap; &:after { border: none; } &:hover { background: lighten($topBarBgColor, 10%); } } label { color: lighten($topBarBgColor, 30%); font-size: ms(0) - 4; font-weight: $topBarLinkWeight; margin: 0; padding-left: $topBarHeight / 3; text-transform: uppercase; } &.divider { border-top: solid 1px darken($topBarBgColor, 20%); @include box-shadow(0 1px 0 rgba(255,255,255,.10) inset); height: 10px; padding: 0; width: 100%; } &:last-child { padding-bottom: 10px; } } } /* Dropdown Level 2+ */ .dropdown li.has-dropdown { &>a { padding-right: $navBarHeight * .75; &:after { border: none; content:"\00bb"; right: 5px; top: 6px; } } .dropdown { position: absolute; left: 100%; top: 0; } &:hover { &>.dropdown { display: block; } } } } } /* Left Side <ul> */ &.left { float: left; width: auto; } /* Right Side <ul> */ &.right { float: right; width: auto; /* Dropdown Right Side Alignment */ .has-dropdown .dropdown { left: auto; right: -1px; li.has-dropdown > .dropdown { right: 100%; left: auto; width: 100%; } } } } /* Style for when you add 'fixed' as a class to .top-bar */ &.fixed { left: 0; position: fixed; top: 0; z-index: 99; } .js-generated { display: none; } } /* Firefox Fixes */ @-moz-document url-prefix() { .top-bar ul li .button.small { padding-bottom: 6px; } .top-bar ul li.search form input[type=search] { font-size: 14px; height: 22px; padding: 3px; } } /* IE8 Fixes */ .lt-ie9 .top-bar ul li a { color: $topBarLinkColor; display: block; font-weight: $topBarLinkWeight; font-size: $topBarLinkSize; height: $topBarHeight; line-height: $topBarHeight; padding: 0 $topBarHeight / 3; &.button { height: auto; line-height: 30px; margin-top: 7px; } &:hover { color: darken($topBarLinkColor, 20%); } img { margin-top: -5px; vertical-align: middle; } &.active { background: darken($topBarBgColor, 5%); color: darken($topBarLinkColor, 15%); } } .lt-ie9 .top-bar ul li.has-dropdown { padding-right: $topBarHeight * .75; &>ul li { padding-right: 0; } } /* Mobile Styles */ @media only screen and (max-width: $topBarBreakPoint) { .top-bar { margin-bottom: 0; overflow: hidden; .js-generated { display: block; } /* Override contain to grid stuff for breakpoint */ &.contain-to-grid { margin: 0 auto; width: auto; &:before, &:after { display: none; } &.fixed { left: auto; margin-left: auto; position: static; } } &.fixed.expanded { height: auto; } /* Setting up the sliding area */ section { left: 0; position: relative; width: auto; @include single-transition(left, 300ms); } ul { width: 100%; min-height: 100%; height: 100%; margin-bottom: 0; display: block; li { float: none; &.active, &:hover { background: darken($topBarBgColor, 5%); } /* Branding and name */ &.name { background: darken($topBarBgColor, 20%); h1 { line-height: 1; } } /* Dropdown Toggle */ &.toggle-topbar { cursor: pointer; display: block; height: $topBarHeight; position: absolute; right: 0; top: 0; width: 50%; a { @include cssTriangle($topBarNavToggleSize, #fff, top); padding: 0; position: absolute; top: 50%; right: $topBarHeight / 2; margin-top: -($topBarNavToggleSize / 2); } @if $topBarBreakPoint == 9999px { a { right: ($topBarHeight / 2) + ($columnGutter / 2);} } &:hover {background: darken($topBarBgColor, 20%); } } &.toggle-topbar a { padding: 0 !important; } /* Divider for breakpoint */ &.divider { border-bottom: solid 1px rgba(255,255,255,0.2); border-top: solid 1px darken($topBarBgColor, 15%); clear: both; height: 1px !important; margin: 8px 0 !important; width: 100%; } /* Search Overrides for breakpoint size */ &.search { padding: 0 $topBarHeight / 2; form { width: 100%; input[type=text] { width: 75%; } .button { top: 0; width: 25%; } } } /* Dropdown Level 1 */ &.has-dropdown { a { padding-right: $topBarHeight * .75; &:after { @include cssTriangle($topBarDropToggleSize, rgba(255,255,255,0.5), left); margin-right: $topBarHeight / 3; margin-top: -($topBarDropToggleSize / 2) - 2; position: absolute; top: 50%; } } &:hover >.dropdown { display: block; visibility: hidden; } .dropdown { visibility: hidden; z-index: 0 !important; } &.moved { position: static; .dropdown { top: 0; visibility: visible; li { label { margin-bottom: 6px; padding-top: 6px !important; font-size: ms(0) - 3; } &:not(.title) { padding-bottom: 0; a { padding: 8px $topBarHeight / 2; font-size: ms(0); } } a, label { padding: 0 $topBarHeight / 2; } a:hover { background: transparent; display: block; } &.divider { border-bottom: solid 1px rgba(255,255,255,0.1); margin-top: 8px !important; margin-bottom: 8px !important; } } } .back.title { padding-bottom: 0; a:before { position: absolute; top: 50%; left: ($topBarHeight / 2) - $topBarDropToggleSize; margin-top: -$topBarDropToggleSize; width: 0; height: 0; @include cssTriangle($topBarDropToggleSize, #fff, right); } h5 { margin: 0; padding-left: $topBarDropToggleSize * 3; position: relative; a { padding-top: 8px; padding-bottom: 8px; font-size: ms(2); font-weight: $topBarTitleWeight; } } } } } /* Dropdown Level 2 */ &.has-dropdown .dropdown li { background: transparent; &.has-dropdown { .dropdown { left: 100% !important; top: 0; right: auto !important; } &>a { padding-right: $topBarHeight * .75; &:after { content: ""; margin-right: $topBarHeight / 3; @include cssTriangle($topBarDropToggleSize, rgba(255,255,255,0.5), left); position: absolute; top: 50%; margin-top: -($topBarDropToggleSize / 2) - 2; } } &.moved { position: static; .dropdown { top: 0; visibility: visible; } } &:hover { display: block; } } } } &.left, &.right { float: none; width: 100%; &>li { display: block; float: none; margin: 0 !important; &.has-dropdown { .dropdown { left: 100% !important; top: 0; right: auto !important; } } } } } section > ul li a:not(.button) { padding-left: $topBarHeight / 2 !important; } /* When the Small Nav is Showing */ &.expanded { height: 100%; ul li.toggle-topbar a { @include cssTriangle($topBarNavToggleSize, rgba(255,255,255,0.5), bottom); top: auto; bottom: 50%; margin-bottom: -($topBarNavToggleSize / 2); } } } .top-bar ul li.has-button { padding: 0 $navBarHeight / 2 5px; } .top-bar ul li .button.small { margin: 0 !important; display: inline-block; width: 100%; } }