viur-ignite-css/less/menu.less

Core of VIUR Ignite - a less framework

@charset "UTF-8";
/**
 * MENU PARTS
 */

@menuBackgroundColor: #f4f4f4;
@menuActiveColor: @mainColor;
@menuPrimaryColor: @complementColor;

.menu-list {
  list-style: none;
  .shd; // default shadow class.
  display: flex;
  flex-direction: column;
  margin: 1em 0;
}

.menu-item {
  &.is-accordion > a:after {
    content: '';
    float:right;
    height: 1em;
    width: 1em;
    margin: 4px -5px 0 0;
    vertical-align: text-top;
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-image: url(../icons/arrowhead-left.svg);
    transition: all .7s ease;
    transition-delay: 1s;
  }
  &.is-accordion:hover > a:after {
    transform: rotate(-90deg);
    transition-delay: 0s;
  }
  &.is-accordion > .menu-vSub > .menu-item {
    transition: all .7s ease;
    transition-delay: 2s;
    max-height:0;
  }
  &.is-accordion:hover > .menu-vSub > .menu-item {
    max-height:450px;
    transition-delay: 0s;
  }
}

.menu-vSub {
  box-shadow: none;
  margin: 0;
  overflow: hidden;
  a.menu-link {
    padding-left: 32px;
    color: contrast(darken(@menuBackgroundColor,5%), @textColor, @invTextColor);
    background-color: darken(@menuBackgroundColor,5%);
    border-bottom-style: dotted;
  }
  .menu-item:last-of-type a.menu-link {border-bottom-style: solid;}
  .menu-item:first-of-type a.menu-link {border-top: 0;}
  .is-accordion > & {max-height:0; min-height: 0; transition: all .3s ease; transition-delay: 2s;}
  .is-accordion:hover > & {max-height:450px; min-height:45px; transition-delay: 0s;}
}

.menu-vSub .menu-vSub {
  a.menu-link {
    padding-left: 44px;
    color: contrast(darken(@menuBackgroundColor,10%), @textColor, @invTextColor);
    background-color: darken(@menuBackgroundColor,10%);
    border-bottom-style: dotted;
  }
  .menu-item:last-of-type a.menu-link {border-bottom-style: solid;}
  .menu-item:first-of-type a.menu-link {border-top: 0;}
  a.menu-link:hover {
    color: contrast(darken(@menuBackgroundColor,15%), @textColor, @invTextColor);
    background-color: darken(@menuBackgroundColor,15%);
  }
}

a.menu-link {
  display: block;
  box-sizing: border-box;
  padding: 10px 20px;
  color: contrast(@menuBackgroundColor, @textColor, @invTextColor);
  background-color: @menuBackgroundColor;
  border: 1px solid darken(@menuBackgroundColor,15%);
  border-top-width: 0;
  transition: all .3s ease;
  width: 100%;
  height: 100%;

  .menu-item:first-of-type & {
    border-top-width: 1px;
  }
  &:hover {
    background-color: lighten(@menuBackgroundColor,5%);
  }
  &.is-primary {
    color: contrast(@menuPrimaryColor, @textColor, @invTextColor);
    background-color: @menuPrimaryColor;
  }
  &.is-active {
    color: contrast(@menuActiveColor, @textColor, @invTextColor);
    background-color: @menuActiveColor;
  }
  &.is-primary:hover,
  &.is-active:hover {
    background-color: lighten(@menuActiveColor,5%);
  }
  &.is-busy,
  &.is-loading,
  &[aria-busy=true] {
    cursor: progress;
    & .single-spinner {
      margin-top: 0;
    }
  }
  &.has-icon:before {
    content: '';
    position: relative;
    display: inline-block;
    height: 1em;
    width: 1em;
    vertical-align: text-top;
    margin: 4px 10px 0 -5px;
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
    background-color: inherit;
    background-blend-mode: multiply;
    //set background-image via icon.less
  }
  .icon {margin: 4px 7px 0 -5px;}
}

.menu-vFixed {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 25%;
  max-width: 250px;
}

.menu-vRow {
  flex-direction: row;
  .menu-item {
    a.menu-link {
      border-width: 1px;
    }
    &:not(:last-child) a.menu-link {
      border-right-width: 0;
    }
  }
}



// Hamburger Icon
.nav-trigger, label[for="nav-trigger"] {
  display: none;
}


// => Menu Media Queries

.media-mixin(@break) when (@break = @breakSmall) {
  .menuWrapper {
    width: 70%;
    position: absolute;
    top: 40px;
    right: -80%;
    z-index: 9999;
    padding: 0;
    transition: right 0.6s ease;
    box-shadow: 0 0 5px 0px #777777;

    .menu-list {
      margin: 0;
    }
  }

  // Hamburger Icon
  label[for="nav-trigger"] {
    display: block;
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 9999;
    width: 40px;
    height: 35px;
    cursor: pointer;
    background-color: @mainColor;
    background-size: contain;
    box-shadow: 0 0 3px 1px #777777;
    border-radius: 0 0 3px 3px;

    &:before {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect style='fill:#fff' width='30' height='6'/><rect style='fill:#fff' y='24' width='30' height='6'/><rect style='fill:#fff' y='12' width='30' height='6'/></svg>");
      background-size: contain;
      display: block;
      content: '';
      height: 27px;
      width: 32px;
      margin-top: 4px;
      margin-left: 4px;
    }
  }

  .nav-trigger&:checked ~ .menuWrapper {
    right: 0;
  }
}


.media-mixin(@break) when (@break = @breakMedium) {
}

.media-mixin(@break) when (@break = @breakLarge) {
}

.media-mixin(@break) when (@break = @break2x) {
}

.media-mixin(@break) when (@break = @breakPrint) {
}