githaven/public/ng/less/ui/menu.less

@import "var";

// lined menu

ul.menu {
  > li {
    list-style: none;
    > a {
      padding: .8em 1.2em;
      &:hover {
        background-color: @lineMenuHoverBgColor;
        color: @lineMenuHoverFontColor;
      }
      &.active {
		  background-color: #4183c4;
		  color: #FFF;
	  }
    }
    &.current > a,
    &.hover > a {
      color: @lineMenuHoverFontColor;
    }
  }
  > li.head {
    font-weight: bold;
    padding: .8em 1.2em;
  }
  > li.down:hover {
    > ul.menu-down {
      display: block;
    }
  }
  > li.border-bottom {
    border-bottom: 1px solid @menuBorderColor;
    height: 0;
    margin: .5em 0;
  }
}

ul.menu-line {
  > li,
  > li > a {
    display: inline-block;
  }
  > li.down {
    position: relative;
    > a:after {
      content: "\25BE";
      margin-left: .4em;
    }
    > ul.menu-down {
      top: 2.1em;
      width: 150%;
    }
  }
  > li.hover {
    position: relative;
    > a:after {
      position: absolute;
      content: "\25B4";
      left: 50%;
      bottom: -1.1em;
      margin-left: -4px;
    }
  }
}

ul.menu-vertical,
ul.menu-down {
  > li > a,
  > li.head {
    display: block;
    padding: .4em 1.2em;
  }
  > li.down {
    position: relative;
    > a:after {
      content: "\25B8";
      position: absolute;
      right: .6em;
    }
  }
  > li.hover {
    position: relative;
    > a:after {
      content: "\25B8";
      position: absolute;
      left: .5em;
    }
  }
}

ul.menu-border,
ul.menu-down {
  border: 1px solid @menuBorderColor;
  > li.head {
    border-bottom: 1px solid @menuBorderColor;
  }
}

ul {
    &.menu-down {
        position: absolute;
        display: none;
        z-index: 99;
        box-shadow: 0 0 2px @menuShadowColor;
        background-color: @menuDownBgColor;
    }
    &.menu-down-show {
        position: absolute;
        z-index: 99;
        box-shadow: 0 0 2px @menuShadowColor;
        background-color: @menuDownBgColor;
    }
}

ul.menu-radius {
  border-radius: .3em;
  > li {
    &:first-child {
      border-top-left-radius: .3em;
      border-top-right-radius: .3em;
      > a {
        border-top-left-radius: .2em;
        border-top-right-radius: .2em;
      }
    }
    &:last-child {
      border-bottom-left-radius: .3em;
      border-bottom-right-radius: .3em;
      > a {
        border-bottom-left-radius: .2em;
        border-bottom-right-radius: .2em;
      }
    }
  }
}

.drop {
  position: relative;
  &:hover {
    > .drop-down {
      position: absolute;
      top: 0;
      left: 0;
      width: 200%;
      display: block;
    }
  }
  > .drop-down {
    display: none;
    border: 1px solid @dropBorderColor;
    box-shadow: 0 0 3px @menuShadowColor;
    background-color: @dropDownBgColor;
  }
}

.drop-bottom {
  &:after {
    content: "\25BE";
    margin-left: .4em;
  }
}

.drop-top {
  &:after {
    content: "\25B4";
    margin-left: .4em;
  }
}