beavyHQ/beavy

@import "main";

$main-navigation-padding: 1em !default;
$main-navigation-background: $dark-gray !default;
$main-navigation-border-color: darken($main-navigation-background, 10) !default;
$main-navigation-color: transparentize(white, 0.3) !default;
$main-navigation-color-hover: white !default;
$main-navigation-height: 60px !default;
$main-navigation-nav-button-background: $action-color !default;
$main-navigation-nav-button-background-hover: lighten($main-navigation-background, 10%) !default;
$main-navigation-nav-button-border: 1px solid lighten($main-navigation-nav-button-background, 20%) !default;
$main-navigation-search-background: lighten($main-navigation-background, 5) !default;
$main-navigation-search-border: 1px solid darken($main-navigation-background, 5) !default;
$main-navigation-active-link-color: transparentize(white, 0.5) !default;
$main-navigation-submenu-padding: 1em !default;
$main-navigation-submenu-width: 12em !default;
$main-navigation-horizontal-bar-mode: em(860) !default;


$main-navigation-search-bar-border-color: $base-border-color;
$main-navigation-search-bar-border: 1px solid $main-navigation-search-bar-border-color;
$main-navigation-search-bar-background: lighten($main-navigation-search-bar-border-color, 10%);


.navigation {
  background-color: $main-navigation-background;
  border-bottom: 1px solid $main-navigation-border-color;
  min-height: $main-navigation-height;
  width: 100%;
  z-index: 999;
}

.navigationWrapper {
  @include clearfix;
  @include outer-container;
  position: relative;
  z-index: 9999;
}

.logo {
  float: left;
  max-height: $main-navigation-height;
  padding-left: $main-navigation-padding;
  padding-right: 2em;

  img {
    max-height: $main-navigation-height;
    padding: 0.8em 0;
  }
}

// Mobile view

.navigationMenuButton {
  color: $main-navigation-color;
  display: block;
  float: right;
  line-height: $main-navigation-height;
  margin: 0;
  padding-right: 1em;
  text-decoration: none;
  text-transform: uppercase;

  @include media ($main-navigation-horizontal-bar-mode) {
    display: none;
  }

  &:focus,
  &:hover {
    color: $main-navigation-color-hover;
  }
}

// Nav menu

.navigationNav {
  float: none;
  min-height: $main-navigation-height;
  z-index: 9999999;

  @include media ($main-navigation-horizontal-bar-mode) {
    float: left;
  }
}

.navigationMenu {
  -webkit-transform-style: preserve-3d; // stop webkit flicker
  clear: both;
  display: none;
  margin: 0 auto;
  overflow: visible;
  padding: 0;
  width: 100%;
  z-index: 9999;

  &.show {
    display: block;
  }

  @include media ($main-navigation-horizontal-bar-mode) {
    display: inline;
    margin: 0;
    padding: 0;
  }
  > li {
    background: $main-navigation-background;
    display: block;
    line-height: $main-navigation-height;
    overflow: hidden;
    padding-right: 0.8em;
    text-align: right;
    width: 100%;
    z-index: 9999;

    @include media ($main-navigation-horizontal-bar-mode) {
      background: transparent;
      display: inline;
      line-height: $main-navigation-height;
      text-decoration: none;
      width: auto;
    }

    a {
      color: $main-navigation-color;
      display: inline-block;
      text-decoration: none;

      @include media ($main-navigation-horizontal-bar-mode) {
        padding-right: 1em;
      }

      &:focus,
      &:hover {
        color: $main-navigation-color-hover;
      }
    }
    &.more {
      padding-right: 0;

      @include media($main-navigation-horizontal-bar-mode) {
        padding-right: $main-navigation-submenu-padding;
      }

      > ul > li:first-child a  {
        padding-top: 1em;
      }

      a {
        margin-right: $main-navigation-submenu-padding;
      }

      > a {
        padding-right: 0.6em;
      }

      > a:after {
        @include position(absolute, auto -0.4em auto auto);
        content: '\25BE';
        color: $main-navigation-color;
      }
    }
  }
}

a.active {
  border-bottom: 1px solid $main-navigation-active-link-color;
  padding-bottom: 3px;
}

  // Sub menus

.more {
  overflow: visible;
  padding-right: 0;

  a {
    padding-right: 0.8em;
  }

  > a {
    padding-right: 1.6em;
    position: relative;

    @include media($main-navigation-horizontal-bar-mode) {
      margin-right: $main-navigation-submenu-padding;
    }

    &:after {
      content: '›';
      font-size: 1.2em;
      position: absolute;
      right: $main-navigation-submenu-padding / 2;
    }
  }

  &:focus > .submenu,
  &:hover > .submenu {
    display: block;
  }

  @include media($main-navigation-horizontal-bar-mode) {
    padding-right: 0.8em;
    position: relative;
  }
}

.submenu {
  display: none;
  padding-left: 0;

  @include media($main-navigation-horizontal-bar-mode) {
    left: -$main-navigation-submenu-padding;
    position: absolute;
    top: 1.5em;
  }

  .submenu {
    @include media($main-navigation-horizontal-bar-mode) {
      left: $main-navigation-submenu-width - 0.2em;
      top: 0;
    }
  }

  li {
    display: block;
    padding-right: 0;

    @include media($main-navigation-horizontal-bar-mode) {
      line-height: $main-navigation-height / 1.3;

      &:first-child > a {
        border-top-left-radius: $base-border-radius;
        border-top-right-radius: $base-border-radius;
      }

      &:last-child > a {
        border-bottom-left-radius: $base-border-radius;
        border-bottom-right-radius: $base-border-radius;
        padding-bottom: 0.7em;
      }
    }

    a {
      background-color: darken($main-navigation-background, 3%);
      display: inline-block;
      text-align: right;
      width: 100%;

      @include media($main-navigation-horizontal-bar-mode) {
        background-color: $main-navigation-background;
        padding-left: $main-navigation-submenu-padding;
        text-align: left;
        width: $main-navigation-submenu-width;
      }
    }
  }
}

  // Elements on the far right

.navigationTools {
  background: #505050;
  clear: both;
  display: block;
  height: $main-navigation-height;

  @include media($main-navigation-horizontal-bar-mode) {
    background: transparent;
    clear: none;
    float: right;
  }
}

  // Search bar

.searchBar {

  float: left;
  padding: 0.85em 0.85em 0.7em 0.6em;
  width: 60%;

  form {
    position: relative;

    input[type=search] {
      @include box-sizing(border-box);
      background: $main-navigation-search-background;
      border-radius: $base-border-radius * 2;
      border: $main-navigation-search-border;
      color: $main-navigation-color;
      font-size: 0.9em;
      font-style: italic;
      margin: 0;
      padding: 0.5em 0.8em;
      width: 100%;

      @include media($main-navigation-horizontal-bar-mode) {
        width: 100%;
      }
    }

    button[type=submit] {
      background: $main-navigation-search-background;
      border: none;
      bottom: 0.3em;
      left: auto;
      outline: none;
      padding: 0 9px;
      position: absolute;
      right: 0.3em;
      top: 0.3em;

      img {
        height: 12px;
        opacity: 0.7;
        padding: 1px;
      }
    }
  }

  @include media($main-navigation-horizontal-bar-mode) {
    display: inline-block;
    position: relative;
    width: 16em;

    input {
      @include box-sizing(border-box);
      display: block;
    }
  }
}