| @@ -1,198 +1,198 @@ | ||
| 1 | -@z-index : 9999; | |
| 2 | -@vertical-padding : 15px; | |
| 3 | -@toggle-height: 32; | |
| 4 | -@line-height-base: 1.45; | |
| 5 | -@default-height: 60px; | |
| 6 | - | |
| 7 | -.transform(@string){ | |
| 8 | - -webkit-transform: @string; | |
| 9 | - -moz-transform: @string; | |
| 10 | - -ms-transform: @string; | |
| 11 | - -o-transform: @string; | |
| 12 | -} | |
| 13 | - | |
| 14 | -.transition(@string){ | |
| 15 | - -webkit-transition: @string; | |
| 16 | - -moz-transition: @string; | |
| 17 | - -ms-transition: @string; | |
| 18 | - -o-transition: @string; | |
| 19 | - transition: @string; | |
| 20 | -} | |
| 21 | - | |
| 22 | -.transition-property(@string){ | |
| 23 | - -webkit-transition-property:@string; | |
| 24 | - -moz-transition-property: @string; | |
| 25 | - -ms-transition-property: @string; | |
| 26 | - -o-transition-property: @string; | |
| 27 | - transition-property: @string; | |
| 28 | -} | |
| 29 | - | |
| 30 | -.animation(@string){ | |
| 31 | - -webkit-animation: @string; | |
| 32 | - -moz-animation: @string; | |
| 33 | - -o-animation: @string; | |
| 34 | - animation: @string; | |
| 35 | -} | |
| 36 | - | |
| 37 | -.animation-delay(@string){ | |
| 38 | - -webkit-animation-delay: @string; | |
| 39 | - -moz-animation-delay: @string; | |
| 40 | - -o-animation-delay: @string; | |
| 41 | - animation-delay: @string; | |
| 42 | -} | |
| 43 | - | |
| 44 | - | |
| 45 | -// General | |
| 46 | -// ----------------------------------------------------------------------------- | |
| 47 | - | |
| 48 | -.clearfix() { | |
| 49 | - &:before, | |
| 50 | - &:after { | |
| 51 | - content: " "; | |
| 52 | - display: table; | |
| 53 | - } | |
| 54 | - &:after { | |
| 55 | - clear: both; | |
| 56 | - } | |
| 57 | -} | |
| 58 | - | |
| 59 | -// Icon | |
| 60 | -// ----------------------------------------------------------------------------- | |
| 61 | - | |
| 62 | -.icon() { | |
| 63 | - font-family: 'quadmenu' !important; | |
| 64 | - font-style: normal; | |
| 65 | - font-weight: normal; | |
| 66 | - font-variant: normal; | |
| 67 | - text-transform: none; | |
| 68 | - //line-height: 1; | |
| 69 | - /* Better Font Rendering =========== */ | |
| 70 | - -webkit-font-smoothing: antialiased; | |
| 71 | - -moz-osx-font-smoothing: grayscale; | |
| 72 | -} | |
| 73 | - | |
| 74 | -// Background | |
| 75 | -// ----------------------------------------------------------------------------- | |
| 76 | - | |
| 77 | -.background-color-diff(@bg,@per) when (lightness(@bg) >= 50%){ | |
| 78 | - background-color: darken(@bg, @per); | |
| 79 | -} | |
| 80 | - | |
| 81 | -.background-color-diff(@bg, @per) when (lightness(@bg) =< 50%){ | |
| 82 | - background-color: lighten(@bg, @per); | |
| 83 | -} | |
| 84 | - | |
| 85 | -.background-color-rgba(@color, @alpha) when (@alpha = 1){ | |
| 86 | - background-color: @color; | |
| 87 | -} | |
| 88 | - | |
| 89 | -.background-color-rgba(@color, @alpha) when (@alpha > 0) and (@alpha =< 1){ | |
| 90 | - @myred:red(@color); | |
| 91 | - @mygreen:green(@color); | |
| 92 | - @myblue:blue(@color); | |
| 93 | - background-color: @color; /* fallback */ | |
| 94 | - background-color: rgba(@myred, @mygreen, @myblue, @alpha); | |
| 95 | -} | |
| 96 | - | |
| 97 | -.background-color-rgba(@color, @alpha) when (@alpha = 0){ | |
| 98 | - background-color: transparent; | |
| 99 | -} | |
| 100 | - | |
| 101 | -.letter-spacing(@value) when not (isnumber(@value)) { | |
| 102 | - letter-spacing: inherit; | |
| 103 | -} | |
| 104 | - | |
| 105 | -.letter-spacing(@value) when (isnumber(@value)){ | |
| 106 | - letter-spacing: @value * 1px; | |
| 107 | -} | |
| 108 | - | |
| 109 | -// Height | |
| 110 | -// ----------------------------------------------------------------------------- | |
| 111 | - | |
| 112 | -.height(@height){ | |
| 113 | - | |
| 114 | - .quadmenu-navbar-header { | |
| 115 | - | |
| 116 | - .quadmenu-navbar-brand { | |
| 117 | - height: @height*1px; | |
| 118 | - line-height: @height*1px; | |
| 119 | - } | |
| 120 | - | |
| 121 | - } | |
| 122 | - | |
| 123 | - .quadmenu-navbar-nav { | |
| 124 | - //height: @height * 1px; | |
| 125 | - | |
| 126 | - > li { | |
| 127 | - &.quadmenu-item { | |
| 128 | - height: @height * 1px; | |
| 129 | - //line-height: @height * 1px; | |
| 130 | - } | |
| 131 | - } | |
| 132 | - | |
| 133 | - } | |
| 134 | - | |
| 135 | -} | |
| 136 | -// Navbar | |
| 137 | -// ----------------------------------------------------------------------------- | |
| 138 | - | |
| 139 | -.navbar-gradient(@color, @tocolor, @deg) { | |
| 140 | - background: -webkit-linear-gradient(@deg*1deg, @color 0, @tocolor 90%); /*Safari 5.1-6*/ | |
| 141 | - background: -o-linear-gradient(@deg*1deg, @color 0, @tocolor 90%); /*Opera 11.1-12*/ | |
| 142 | - background: -moz-linear-gradient(@deg*1deg, @color 0, @tocolor 90%); /*Fx 3.6-15*/ | |
| 143 | - background: linear-gradient(@deg*1deg, @color 0, @tocolor 90%); /*Standard*/ | |
| 144 | -} | |
| 145 | - | |
| 146 | -.navbar-logo-background(@color, @alpha) when not (@alpha = transparent) and (@alpha > 0){ | |
| 147 | - .background-color-rgba(@color, @alpha); | |
| 148 | - position: relative; | |
| 149 | - | |
| 150 | - &:after { | |
| 151 | - position: absolute; | |
| 152 | - top: 0; | |
| 153 | - bottom: 0; | |
| 154 | - right: auto; | |
| 155 | - left: -1000%; | |
| 156 | - content: " "; | |
| 157 | - width: 1000%; | |
| 158 | - background-color: inherit; | |
| 159 | - } | |
| 160 | - | |
| 161 | -} | |
| 162 | - | |
| 163 | -.navbar-sticky-background(@color, @alpha) when not (@alpha = transparent) and (@alpha > 0){ | |
| 164 | - background: none; | |
| 165 | - .background-color-rgba(@color, @alpha); | |
| 166 | -} | |
| 167 | - | |
| 168 | -// Links | |
| 169 | -// ----------------------------------------------------------------------------- | |
| 170 | - | |
| 171 | -.link-border(@width,@style,@color, @margin) when (@width > 0) and not (@style = none) and not (@color = transparent) and not (@color = 0){ | |
| 172 | - border-width: 0 0 @width*1px 0; | |
| 173 | - border-style: @style; | |
| 174 | - border-color: @color; | |
| 175 | - margin-bottom: @margin; | |
| 176 | -} | |
| 177 | - | |
| 178 | -// Dropdown | |
| 179 | -// ----------------------------------------------------------------------------- | |
| 180 | - | |
| 181 | -.dropdown-inner-radius(@top, @right, @left, @bottom) { | |
| 182 | - | |
| 183 | - > ul { | |
| 184 | - | |
| 185 | - > li:first-child, | |
| 186 | - > li:first-child > a { | |
| 187 | - border-radius: @top*1px @right*1px 0 0; | |
| 188 | - } | |
| 189 | - > li:last-child, | |
| 190 | - > li:last-child > a { | |
| 191 | - border-radius: 0 0 @left*1px @bottom*1px; | |
| 192 | - } | |
| 193 | - > li:only-child, | |
| 194 | - > li:only-child > a { | |
| 195 | - border-radius: @top*1px @right*1px @left*1px @bottom*1px; | |
| 196 | - } | |
| 197 | - } | |
| 1 | +@z-index : 9999; | |
| 2 | +@vertical-padding : 15px; | |
| 3 | +@toggle-height: 32; | |
| 4 | +@line-height-base: 1.45; | |
| 5 | +@default-height: 60px; | |
| 6 | + | |
| 7 | +.transform(@string){ | |
| 8 | + -webkit-transform: @string; | |
| 9 | + -moz-transform: @string; | |
| 10 | + -ms-transform: @string; | |
| 11 | + -o-transform: @string; | |
| 12 | +} | |
| 13 | + | |
| 14 | +.transition(@string){ | |
| 15 | + -webkit-transition: @string; | |
| 16 | + -moz-transition: @string; | |
| 17 | + -ms-transition: @string; | |
| 18 | + -o-transition: @string; | |
| 19 | + transition: @string; | |
| 20 | +} | |
| 21 | + | |
| 22 | +.transition-property(@string){ | |
| 23 | + -webkit-transition-property:@string; | |
| 24 | + -moz-transition-property: @string; | |
| 25 | + -ms-transition-property: @string; | |
| 26 | + -o-transition-property: @string; | |
| 27 | + transition-property: @string; | |
| 28 | +} | |
| 29 | + | |
| 30 | +.animation(@string){ | |
| 31 | + -webkit-animation: @string; | |
| 32 | + -moz-animation: @string; | |
| 33 | + -o-animation: @string; | |
| 34 | + animation: @string; | |
| 35 | +} | |
| 36 | + | |
| 37 | +.animation-delay(@string){ | |
| 38 | + -webkit-animation-delay: @string; | |
| 39 | + -moz-animation-delay: @string; | |
| 40 | + -o-animation-delay: @string; | |
| 41 | + animation-delay: @string; | |
| 42 | +} | |
| 43 | + | |
| 44 | + | |
| 45 | +// General | |
| 46 | +// ----------------------------------------------------------------------------- | |
| 47 | + | |
| 48 | +.clearfix() { | |
| 49 | + &:before, | |
| 50 | + &:after { | |
| 51 | + content: " "; | |
| 52 | + display: table; | |
| 53 | + } | |
| 54 | + &:after { | |
| 55 | + clear: both; | |
| 56 | + } | |
| 57 | +} | |
| 58 | + | |
| 59 | +// Icon | |
| 60 | +// ----------------------------------------------------------------------------- | |
| 61 | + | |
| 62 | +.icon() { | |
| 63 | + font-family: 'quadmenu' !important; | |
| 64 | + font-style: normal; | |
| 65 | + font-weight: normal; | |
| 66 | + font-variant: normal; | |
| 67 | + text-transform: none; | |
| 68 | + //line-height: 1; | |
| 69 | + /* Better Font Rendering =========== */ | |
| 70 | + -webkit-font-smoothing: antialiased; | |
| 71 | + -moz-osx-font-smoothing: grayscale; | |
| 72 | +} | |
| 73 | + | |
| 74 | +// Background | |
| 75 | +// ----------------------------------------------------------------------------- | |
| 76 | + | |
| 77 | +.background-color-diff(@bg,@per) when (lightness(@bg) >= 50%){ | |
| 78 | + background-color: darken(@bg, @per); | |
| 79 | +} | |
| 80 | + | |
| 81 | +.background-color-diff(@bg, @per) when (lightness(@bg) =< 50%){ | |
| 82 | + background-color: lighten(@bg, @per); | |
| 83 | +} | |
| 84 | + | |
| 85 | +.background-color-rgba(@color, @alpha) when (@alpha = 1){ | |
| 86 | + background-color: @color; | |
| 87 | +} | |
| 88 | + | |
| 89 | +.background-color-rgba(@color, @alpha) when (@alpha > 0) and (@alpha =< 1){ | |
| 90 | + @myred:red(@color); | |
| 91 | + @mygreen:green(@color); | |
| 92 | + @myblue:blue(@color); | |
| 93 | + background-color: @color; /* fallback */ | |
| 94 | + background-color: rgba(@myred, @mygreen, @myblue, @alpha); | |
| 95 | +} | |
| 96 | + | |
| 97 | +.background-color-rgba(@color, @alpha) when (@alpha = 0){ | |
| 98 | + background-color: transparent; | |
| 99 | +} | |
| 100 | + | |
| 101 | +.letter-spacing(@value) when not (isnumber(@value)) { | |
| 102 | + letter-spacing: inherit; | |
| 103 | +} | |
| 104 | + | |
| 105 | +.letter-spacing(@value) when (isnumber(@value)){ | |
| 106 | + letter-spacing: @value * 1px; | |
| 107 | +} | |
| 108 | + | |
| 109 | +// Height | |
| 110 | +// ----------------------------------------------------------------------------- | |
| 111 | + | |
| 112 | +.height(@height){ | |
| 113 | + | |
| 114 | + .quadmenu-navbar-header { | |
| 115 | + | |
| 116 | + .quadmenu-navbar-brand { | |
| 117 | + height: @height*1px; | |
| 118 | + line-height: @height*1px; | |
| 119 | + } | |
| 120 | + | |
| 121 | + } | |
| 122 | + | |
| 123 | + .quadmenu-navbar-nav { | |
| 124 | + //height: @height * 1px; | |
| 125 | + | |
| 126 | + > li { | |
| 127 | + &.quadmenu-item { | |
| 128 | + height: @height * 1px; | |
| 129 | + //line-height: @height * 1px; | |
| 130 | + } | |
| 131 | + } | |
| 132 | + | |
| 133 | + } | |
| 134 | + | |
| 135 | +} | |
| 136 | +// Navbar | |
| 137 | +// ----------------------------------------------------------------------------- | |
| 138 | + | |
| 139 | +.navbar-gradient(@color, @tocolor, @deg) { | |
| 140 | + background: -webkit-linear-gradient(@deg*1deg, @color 0, @tocolor 90%); /*Safari 5.1-6*/ | |
| 141 | + background: -o-linear-gradient(@deg*1deg, @color 0, @tocolor 90%); /*Opera 11.1-12*/ | |
| 142 | + background: -moz-linear-gradient(@deg*1deg, @color 0, @tocolor 90%); /*Fx 3.6-15*/ | |
| 143 | + background: linear-gradient(@deg*1deg, @color 0, @tocolor 90%); /*Standard*/ | |
| 144 | +} | |
| 145 | + | |
| 146 | +.navbar-logo-background(@color, @alpha) when not (@alpha = transparent) and (@alpha > 0){ | |
| 147 | + .background-color-rgba(@color, @alpha); | |
| 148 | + position: relative; | |
| 149 | + | |
| 150 | + &:after { | |
| 151 | + position: absolute; | |
| 152 | + top: 0; | |
| 153 | + bottom: 0; | |
| 154 | + right: auto; | |
| 155 | + left: -1000%; | |
| 156 | + content: " "; | |
| 157 | + width: 1000%; | |
| 158 | + background-color: inherit; | |
| 159 | + } | |
| 160 | + | |
| 161 | +} | |
| 162 | + | |
| 163 | +.navbar-sticky-background(@color, @alpha) when not (@alpha = transparent) and (@alpha > 0){ | |
| 164 | + background: none; | |
| 165 | + .background-color-rgba(@color, @alpha); | |
| 166 | +} | |
| 167 | + | |
| 168 | +// Links | |
| 169 | +// ----------------------------------------------------------------------------- | |
| 170 | + | |
| 171 | +.link-border(@width,@style,@color, @margin) when (@width > 0) and not (@style = none) and not (@color = transparent) and not (@color = 0){ | |
| 172 | + border-width: 0 0 @width*1px 0; | |
| 173 | + border-style: @style; | |
| 174 | + border-color: @color; | |
| 175 | + margin-bottom: @margin; | |
| 176 | +} | |
| 177 | + | |
| 178 | +// Dropdown | |
| 179 | +// ----------------------------------------------------------------------------- | |
| 180 | + | |
| 181 | +.dropdown-inner-radius(@top, @right, @left, @bottom) { | |
| 182 | + | |
| 183 | + > ul { | |
| 184 | + | |
| 185 | + > li:first-child, | |
| 186 | + > li:first-child > a { | |
| 187 | + border-radius: @top*1px @right*1px 0 0; | |
| 188 | + } | |
| 189 | + > li:last-child, | |
| 190 | + > li:last-child > a { | |
| 191 | + border-radius: 0 0 @left*1px @bottom*1px; | |
| 192 | + } | |
| 193 | + > li:only-child, | |
| 194 | + > li:only-child > a { | |
| 195 | + border-radius: @top*1px @right*1px @left*1px @bottom*1px; | |
| 196 | + } | |
| 197 | + } | |
| 198 | 198 | } |
