barecss-power/less/_navigation.less

A classless CSS framework (power) http://barecss.com

@import (reference) "config";


// config
@nav-back: @pri-back;
@nav-text: @pri-text;
@nav-font: 1.5rem;
@nav-height: 5rem;
@nav-padh: 2rem;

@logo-font: 1em;
@logo-marginr: 0.5em;
@title-font: 1.5em;

@menu-font: 1em;
@menu-padh: 1em;
@menu-htext: @sec-text;
@menu-hback: initial;
@menu-decoc: @sec-back;
@menu-decob: 0.4rem;
@menu-arrow: 1em;
@menu-arrow-padr: 1.5em;

@dd-font: 0.8em;
@dd-back: lighten(@nav-back, 20%);
@dd-line: 2em;
@dd-decoc: lighten(@def-text, 10%);
@dd-decol: 0.4rem;
@dd-htext: initial;
@dd-hback: darken(@def-back, 10%);
@dd-padh: 1.5em;
@dd-shadow: @box-shadow;

@snav-line: 4em;
@snav-padh: 3em;
@snav-back: @dd-back;
@snav-menu: initial;
@snav-borderc: darken(@def-back, 10%);
@snav-bordert: 0.1rem;
@snav-shadow: @box-shadow;

@smenu-borderc: @dd-decoc;
@smenu-bordert: 0.1rem;


// main nav
nav {
  z-index: 10;
  width: 100%;
  padding: 0 @nav-padh;
  background: @nav-back; // ?
  font-size: @nav-font;
  color: @nav-text; // ?
  
  // fixed
  &.fixed {
    position: fixed;
    top: 0;
    left: 0;
  }
  
  // container
  label {
    display: block;
    > input { display: none }
  }
  
  // menu
  ul {
    margin: 0;
    line-height: @nav-height;
    text-align: right;
        
    li {
      display: inline-block;
      font-size: @menu-font;
    }
    
    // menu -> dropdown open
    @media @mobilep {
      li:hover menu, menu:hover {
        pointer-events: auto;
        transform: translate3d(0,0,0);
        visibility: visible;
        opacity: 1;
      }
    }
    
    // menu item
    a {
      cursor: pointer;
      display: block;
      border-bottom: @menu-decob solid transparent;
      padding: 0 @menu-padh;
      font-weight: normal;
      text-decoration: none;
      text-transform: none;
      
      // menu with dropdown
      @media @mobilep {
        &:not(:only-child) {
          padding-right: @menu-arrow-padr;
          background-image: data-uri('../icons/chevron-down.svg');
          background-repeat: no-repeat;
          background-position: right center;
          background-size: @menu-arrow;
        }
      }
      
      // on menu hover
      &:hover {
        border-color: @menu-decoc;
        background-color: @menu-hback;
        color: @menu-htext;
      }
    }
  }
  
  // drop down
  menu {
    min-width: 100%;
    z-index: 2;
    margin: 0;
    padding: 0;
    background: @dd-back;
    white-space: nowrap;
    text-align: left;
    line-height: @dd-line;
    
    @media @mobilep {
      pointer-events: none;
      position: absolute;
      top: 100%;
      left: 0;
      transform: translate3d(0,-2em,0);
      visibility: hidden;
      opacity: 0;
      box-shadow: @dd-shadow;
    }
    
    // drop down item
    menuitem {
      display: block;
      border-left: @dd-decol solid transparent;
      
      &:hover {
        border-color: @dd-decoc;
        background-color: @dd-hback;
        color: @dd-htext;
        a { transform: translate3d(0.5em,0,0) }
      }
      
      a {
        border: none;
        padding: 0 @dd-padh;
        font-size: @dd-font;
      }
    }
  }
  
  header {
    // hamburger, close menu
    &::before, &::after {
      content: "";
      display: none;
      position: absolute;
      top: 0;
      right: @nav-padh;
      width: @nav-height;
      height: @nav-height;
      background-position: center;
      background-repeat: no-repeat;
      background-size: @snav-menu;
    }
    
    // hamburger
    &::before {
      background-image: data-uri('../icons/hamburger.svg');
    }
    
    // close
    &::after {
      transform: rotate(180deg);
      opacity: 0;
      background-image: data-uri('../icons/close.svg');
    }
    
    // title
    a {
      position: absolute;
      top: 0;
      left: 0;
      font-size: @title-font;
      line-height: @nav-height;
      text-decoration: none;
      padding-left: @nav-padh;
      
      // logo
      img {
        top: -2px;
        height: @logo-font;
        margin-right: @logo-marginr;
        vertical-align: middle;
      }
    }
  }
}

// mobile view
@media @mobilen {
  
  // page gap for nav
  body { padding-top: @nav-height; }
  
  // fixed nav
  nav {
    position: fixed;
    top: 0;
    left: 0;
    // padding: 0;
    
    header {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      &:before, &:after { display: block }
    }
    
    label {
      height: @nav-height;
      
      // hide nav off screen
      > ul {
        position: fixed;
        top: @nav-height;
        bottom: 0;
        right: 0;
        transform: translate3d(100%,0,0);
        box-shadow: @snav-shadow;
        border-top: @snav-bordert solid @snav-borderc;
        padding: 0;
        background: @snav-back;
        line-height: @snav-line;
        overflow-x: visible;
        overflow-y: auto;
        text-align: left;
        li {
          display: block;
          border-top: @smenu-bordert solid @smenu-borderc;
        }
        a {
          border: none;
          padding: 0 @snav-padh;
        }
      }
      
      input {
        &:checked {
          //show nav
          ~ ul { transform: none; }
          // hide hamburger
          ~ header {
            &::before {
              transform: rotate(-180deg);
              opacity: 0;
            }
            // hide close
            &::after {
              transform: none;
              opacity: 1;
            }
          }
        }
      }
      // dropdown
      menu menuitem a {
        padding: 0 @snav-padh + @dd-padh;
        border-color: @dd-decoc;
      }
    }
  }
}