quadmenu/assets/frontend/less/mixins.less

@z-index : 9999;
@vertical-padding : 15px;
@toggle-height: 32;
@line-height-base: 1.45;
@default-height: 60px;

.transform(@string){
  -webkit-transform: @string;
  -moz-transform: 	 @string;
  -ms-transform: 		 @string;
  -o-transform: 		 @string;
}

.transition(@string){
  -webkit-transition:	@string;
  -moz-transition:	@string;
  -ms-transition:	@string;    
  -o-transition:	@string;
  transition:		@string;
}

.transition-property(@string){
  -webkit-transition-property:@string;
  -moz-transition-property:	@string;
  -ms-transition-property:	@string;    
  -o-transition-property:	@string;
  transition-property:	@string;
}

.animation(@string){
  -webkit-animation:	@string;
  -moz-animation:	@string;
  -o-animation:	@string;
  animation:		@string;
}

.animation-delay(@string){
  -webkit-animation-delay:	@string;
  -moz-animation-delay:	@string;
  -o-animation-delay:		@string;
  animation-delay:		@string;
}


// General
// -----------------------------------------------------------------------------

.clearfix() {
  &:before,
    &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Icon
// -----------------------------------------------------------------------------

.icon() {
  font-family: 'quadmenu' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  //line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Background
// -----------------------------------------------------------------------------

.background-color-diff(@bg,@per) when (lightness(@bg) >= 50%){
  background-color: darken(@bg, @per);
}

.background-color-diff(@bg, @per) when (lightness(@bg) =< 50%){
  background-color: lighten(@bg, @per);
}

.background-color-rgba(@color, @alpha) when (@alpha = 1){
  background-color: @color;
}

.background-color-rgba(@color, @alpha) when (@alpha > 0) and (@alpha =< 1){
  @myred:red(@color);
  @mygreen:green(@color);
  @myblue:blue(@color);
  background-color: @color; /* fallback */
  background-color: rgba(@myred, @mygreen, @myblue, @alpha);
}

.background-color-rgba(@color, @alpha) when (@alpha = 0){
  background-color: transparent;
}

.letter-spacing(@value) when not (isnumber(@value)) {
  letter-spacing: inherit;
}

.letter-spacing(@value) when (isnumber(@value)){
  letter-spacing: @value * 1px;
}

// Height
// -----------------------------------------------------------------------------

.height(@height){

  .quadmenu-navbar-header {

    .quadmenu-navbar-brand {
      height: @height*1px;
      line-height: @height*1px;
    }

  }

  .quadmenu-navbar-nav {
    //height: @height * 1px;

    > li {
      &.quadmenu-item {
        height: @height * 1px;
        //line-height: @height * 1px;
      }
    }

  }

}
// Navbar
// -----------------------------------------------------------------------------

.navbar-gradient(@color, @tocolor, @deg) {
  background: -webkit-linear-gradient(@deg*1deg, @color 0, @tocolor 90%); /*Safari 5.1-6*/
  background: -o-linear-gradient(@deg*1deg, @color 0, @tocolor 90%); /*Opera 11.1-12*/
  background: -moz-linear-gradient(@deg*1deg, @color 0, @tocolor 90%); /*Fx 3.6-15*/
  background: linear-gradient(@deg*1deg, @color 0, @tocolor 90%); /*Standard*/
}

.navbar-logo-background(@color, @alpha) when not (@alpha = transparent) and (@alpha > 0){
  .background-color-rgba(@color, @alpha);
  position: relative;

  &:after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: auto;
    left: -1000%;
    content: " ";
    width: 1000%;
    background-color: inherit;
  }

}

.navbar-sticky-background(@color, @alpha) when not (@alpha = transparent) and (@alpha > 0){
  background: none;
  .background-color-rgba(@color, @alpha);
}

// Links
// -----------------------------------------------------------------------------

.link-border(@width,@style,@color, @margin) when (@width > 0) and not (@style = none) and not (@color = transparent) and not (@color = 0){
  border-width: 0 0 @width*1px 0;
  border-style: @style;
  border-color: @color;
  margin-bottom: @margin;
}

// Dropdown 
// -----------------------------------------------------------------------------

.dropdown-inner-radius(@top, @right, @left, @bottom) {

  > ul {

    > li:first-child,
      > li:first-child > a {
      border-radius: @top*1px @right*1px 0 0;
    }
    > li:last-child,
      > li:last-child > a {
      border-radius: 0 0 @left*1px @bottom*1px;
    }
    > li:only-child,
      > li:only-child > a {
      border-radius: @top*1px @right*1px @left*1px @bottom*1px;
    } 
  }
}