WebCompDev / COMPONENTS

  nav {
    color: $navbar-font-color;
    @extend .z-depth-1;
    background-color: $primary-color;
    width: 100%;
    height: $navbar-height-mobile;
    line-height: $navbar-height-mobile;
  
    a { color: $navbar-font-color; }
  

    .nav-wrapper {
      position: relative;
      height: 100%;

  
      i {
        display: block;
        font-size: 2rem;
      }

    }
  
    @media #{$large-and-up} {
      a.button-collapse { display: none; }
    }
  
  
    // Collapse button
    .button-collapse {
      float: left;
      position: relative;
      z-index: 1;
      height: $navbar-height-mobile;
  
      i {
        font-size: 2.7rem;
        height: $navbar-height-mobile;
        line-height: $navbar-height-mobile;
      }
    }
  
  
    // Logo
    .brand-logo {
      position: absolute;
      color: $navbar-font-color;
      display: inline-block;
      font-size: $navbar-brand-font-size;
      padding: 0;
      white-space: nowrap;
  
      &.center {
        left: 50%;

        @include transform(translateX(-50%));

      }
  
      @media #{$medium-and-down} {
        left: 50%;

        @include transform(translateX(-50%));

  
        &.left, &.right {
          padding: 0;

          @include transform(none);

        }
  
        &.left { left: 0.5rem; }
        &.right {
          right: 0.5rem;
          left: auto;
        }
      }
  
      &.right {
        right: 0.5rem;
        padding: 0;
      }
    }
  
  
    // Navbar Links
    ul {
      margin: 0;
  
      li {

        @include transition(background-color .3s);

        float: left;
        padding: 0;
  

        &:hover, &.active {

          background-color: rgba(0,0,0,.1);
        }
      }
      a {

        font-size: 1rem;
        color: $navbar-font-color;
        display: block;
        padding: 0 15px;

      }
  
      &.left {
        float: left;
      }
    }
  
    // Navbar Search Form
    .input-field {
      margin: 0;
  
      input {
        height: 100%;
        font-size: 1.2rem;
        border: none;
        padding-left: 2rem;
  
        &:focus, &[type=text]:valid, &[type=password]:valid,
        &[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
          border: none;
          box-shadow: none;
        }
      }
      label {
        top: 0;
        left: 0;
  
        i {
          color: rgba(255,255,255,.7);

          @include transition(color .3s);

        }
        &.active i { color: $navbar-font-color; }
        &.active {

          @include transform(translateY(0));

        }
      }
  
    }
  
  }
  
  // Fixed Navbar
  .navbar-fixed {
    position: relative;
    height: $navbar-height-mobile;
    z-index: 998;
  
    nav {
      position: fixed;
    }
  }
  @media #{$medium-and-up} {
    nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
      height: $navbar-height;
      line-height: $navbar-height;
    }
    .navbar-fixed {
      height: $navbar-height;
    }
  }