@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; } } }