/* Requires globals.css */ .nav-bar { height: $navBarHeight; background: lighten($black, 30%); margin-top: $navBarHeight / 2; padding: 0; &>li { float: left; display: block; position: relative; padding: 0; margin: 0; border: 1px solid lighten($black, 20%); border-right: none; line-height: $navBarHeight - 2; @include box-shadow(1px 0 0 fade-out($shinyEdge, .3) inset); &:first-child { @include box-shadow(0 0 0); } &:last-child { border-right: solid 1px lighten($black, 20%); @include box-shadow(1px 0 0 fade-out($shinyEdge, .3) inset, 1px 0 0 fade-out($shinyEdge, .3)); } &.active { background: $mainColor; border-color: darken($mainColor, 10%); &>a { color: $white; cursor: default; } &:hover { background: $mainColor; cursor: default; } } &:hover { background: lighten($black, 20%); } &>a { color: darken($white, 10%); } ul { margin-bottom: 0; } .flyout { display: none; } &.has-flyout { &>a:first-child { padding-right: 36px; position: relative; &:after { @include cssTriangle(4px, darken($white, 10%), top); position: absolute; right: 20px; top: 17px; } } &>a.flyout-toggle { border-left: 0 !important; position: absolute; right: 0; top: 0; padding: 22px; z-index: 2; display: block; } &.is-touch { &>a:first-child { padding-right: 55px;} &>a.flyout-toggle { border-left: 1px dashed #666; } } } } &>li>a:first-child { position: relative; padding: 0 20px; display: block; text-decoration: none; font-size: ms(0); } &>li>input { margin: 0 10px; } &.vertical { height: auto; margin-top: 0; &>li { float: none; border-bottom: none; &.has-flyout>a:first-child:after { @include cssTriangle(4px, darken($white, 10%), left); } .flyout { left: 100%; top: -1px; &.right { left: auto; right: 100%; } } } } } .flyout { background: darken($white, 5%); padding: 20px; margin: 0; border: 1px solid darken($white, 15%); position: absolute; top: $navBarHeight - 1; left: -1px; width: $navFlyoutBaseWidth; z-index: 40; @include box-shadow(0 1px 5px rgba(#000, .1)); p { line-height: 1.2; font-size: ms(0) - 1; } *:first-child { margin-top: 0; } /* remove margin on any first-child element */ *:last-child { margin-bottom: 0; } /* remove margin on last element */ &.small { width: $navFlyoutBaseWidth / 1.5; } &.large { width: $navFlyoutBaseWidth * 1.75; } &.right { left: auto; right: -2px; } &.up { top: auto; bottom: $navBarHeight - 1; } } ul.flyout, .nav-bar li ul { padding: 0; list-style: none; li { border-left: solid 3px #CCC; a { background: darken($white, 5%); border: 1px solid darken($white, 10%); border-width: 1px 1px 0 0; color: #555; display: block; font-size: ms(0); height: auto; line-height: 1; padding: 15px 20px; @include box-shadow(0 1px 0 $shinyEdge inset); &:hover { background: darken($white, 8%); color: #333; } } &.active { margin-top: 0; border-top: 1px solid lighten($black, 30%); border-left: 4px solid lighten($black, 10%); a { background: lighten($black, 30%); border: none; color: #fff; height: auto; margin: 0; position: static; top: 0; @include box-shadow(0 0 0); } } } } /* Mobile Styles */ @media only screen and (max-device-width: 1280px) { .touch .nav-bar li.has-flyout>a { padding-right: 36px !important; } } @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) { .touch .nav-bar li a { @include font-size(13); } .touch .nav-bar li.has-flyout>a.flyout-toggle { padding: 20px !important; } .touch .nav-bar li.has-flyout>a { padding-right: 36px !important; } } @media only screen and (max-width: $screenSmall - 1) { .nav-bar { height: auto; &>li { float: none; display: block; border-right: none; } &>li>a.main { text-align: left; border-top: 1px solid #ddd; border-right: none; } &>li:first-child>a.main { border-top: none; } &>li.has-flyout>a.flyout-toggle { position: absolute; right: 0; top: 0; padding: 22px; z-index: 2; display: block; } &>li.has-flyout.is-touch>a.flyout-toggle span { content: ""; width: 0; height: 0; display: block; } &>li.has-flyout>a.flyout-toggle:hover span { border-top-color: #141414; } &.vertical>li.has-flyout>.flyout { left: 0; } } .flyout { position: relative; width: 100% !important; top: auto; margin-right: -2px; border-width: 1px 1px 0 1px; &.right { float: none; right: auto; left: -1px; } &.small, &.large { width: 100% !important; } p:last-child { margin-bottom: 18px; } } }