1/** 2 * This file provides less mixins for all other style modules 3 */ 4 5/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 6/* Fonts */ 7/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 8.setLocalFontFace(@fontFamily,@fontWeight,@localFontName,@localFontNameVar,@filename) { 9 @font-face { 10 font-family: @fontFamily; 11 font-style: normal; 12 font-weight: @fontWeight; 13 src: ~"local('@{localFontName}'), local('@{localFontNameVar}'), url(fonts/@{filename}.eot)"; 14 src: ~"url(fonts/@{filename}.eot?#iefix) format('embedded-opentype'), url(fonts/@{filename}.woff) format('woff')"; 15 } 16} 17 18.setIconFontFace(@fontFamily,@filename) { 19 @font-face { 20 font-family: @fontFamily; 21 src: ~"url('fonts/icons/@{filename}.eot?6762325')"; 22 src: ~"url('fonts/icons/@{filename}.eot?6762325#iefix') format('embedded-opentype'), url('fonts/icons/@{filename}.woff2?6762325') format('woff2'), url('fonts/icons/@{filename}.woff?6762325') format('woff'), url('fonts/icons/@{filename}.ttf?6762325') format('truetype'), url('fonts/icons/@{filename}.svg?6762325#fontello') format('svg')"; 23 font-weight: normal; 24 font-style: normal; 25 } 26} 27 28.fontello() { 29 &::before { 30 font-family: "fontello"; 31 font-style: normal; 32 font-weight: normal; 33 speak: none; 34 35 display: inline-block; 36 text-decoration: inherit; 37 width: 1em; 38 margin-right: .2em; 39 text-align: center; 40 41 /* For safety - reset parent styles, that can break glyph codes*/ 42 font-variant: normal; 43 text-transform: none; 44 45 /* fix buttons height, for twitter bootstrap */ 46 line-height: 1em; 47 48 /* Animation center compensation - margins should be symmetric */ 49 /* remove if not needed */ 50 margin-left: .2em; 51 52 /* you can be more comfortable with increased icons size */ 53 /* font-size: 120%; */ 54 55 /* Font smoothing. That was taken from TWBS */ 56 -webkit-font-smoothing: antialiased; 57 -moz-osx-font-smoothing: grayscale; 58 59 /* Uncomment for 3D effect */ 60 /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ 61 } 62} 63 64.fontello-double() { 65 &::before, 66 &::after { 67 font-family: "fontello"; 68 font-style: normal; 69 font-weight: normal; 70 speak: none; 71 72 display: inline-block; 73 text-decoration: inherit; 74 width: 1em; 75 margin-right: .2em; 76 text-align: center; 77 78 /* For safety - reset parent styles, that can break glyph codes*/ 79 font-variant: normal; 80 text-transform: none; 81 82 /* fix buttons height, for twitter bootstrap */ 83 line-height: 1em; 84 85 /* Animation center compensation - margins should be symmetric */ 86 /* remove if not needed */ 87 margin-left: .2em; 88 89 /* you can be more comfortable with increased icons size */ 90 /* font-size: 120%; */ 91 92 /* Font smoothing. That was taken from TWBS */ 93 -webkit-font-smoothing: antialiased; 94 -moz-osx-font-smoothing: grayscale; 95 96 /* Uncomment for 3D effect */ 97 /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ 98 } 99} 100 101/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 102/* Screenreader / Hide */ 103/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 104.sr-out() { 105 display: block; 106 width: 1px; 107 height: 1px; 108 overflow: hidden; 109 position: absolute; 110 top: -200000em; 111 left: -200000em; 112} 113 114.sr-only() { 115 position: absolute; 116 width: 1px; 117 height: 1px; 118 margin: -1px; 119 padding: 0; 120 overflow: hidden; 121 clip: rect(0,0,0,0); 122 border: 0; 123} 124 125.sr-only-focusable() { 126 &:active, 127 &:focus { 128 position: static; 129 width: auto; 130 height: auto; 131 margin: 0; 132 overflow: visible; 133 clip: auto; 134 } 135} 136 137/* + + + + + small icon-buttons (breadcrumb, page-header) + + + + + */ 138.btn-hover { 139 background-color: @ini_nav_menu_hover_bg; 140 color: @ini_nav_menu_hover_color; 141 transition: @transition color, @transition background-color, @transition border-color; 142 143 &:hover, 144 &:active, 145 &:focus { 146 background-color: @ini_nav_menu_hover_color; 147 border-color: @ini_nav_menu_hover_color; 148 color: @ini_nav_menu_hover_bg; 149 150 .prefix { 151 color: inherit; 152 } 153 } 154} 155 156.btn-usertools-wrapper(@elem:@toggle-size) { 157 display: inline-block; 158 min-height: @elem; 159 min-width: @elem; 160 box-sizing: border-box; 161 color: @ini_text_webframe; 162 font-size: @font-size-small; 163 padding: 0; 164 margin: 0 .25rem; 165 166 * { 167 font-size: @font-size-small; 168 } 169} 170 171.btn-usertools-num() { 172 .num { 173 position: absolute; 174 right: -.4rem; 175 top: -.5em; 176 background-color: @ini_nav_menu_hover_color; 177 border-radius: 2px; 178 color: @ini_nav_menu_hover_bg; 179 font-size: @font-size-very-small; 180 font-weight: 400; 181 text-align: center; 182 line-height: 1; 183 padding: .1em @very-small-spacing; 184 transition: @transition color, @transition background-color; 185 } 186} 187 188.btn-prefix(@margin-top:.3rem) { 189 .fontello(); 190 .hide-text-show-before(); 191 192 color: inherit; 193 font-size: @font-size-default; 194 195 @media @screen_min-xxlg { 196 margin-top: .22rem; 197 } 198 199 @media @screen_max-xxlg { 200 margin-top: @margin-top; 201 } 202 203 @media @screen_max-md { 204 margin-top: .2rem; 205 } 206} 207 208.hide-text-show-before() { 209 display: inline-block; 210 overflow: hidden; 211 white-space: nowrap; 212 text-indent: -9999px; 213 214 &::before { 215 float: left; 216 width: 100%; 217 text-indent: 0; 218 margin: 0; 219 } 220 221 &::after { 222 float: left; 223 text-indent: 0; 224 } 225} 226 227.hide-text-show-after() { 228 display: inline-block; 229 overflow: hidden; 230 white-space: nowrap; 231 text-indent: -9999px; 232 233 &::before { 234 float: right; 235 text-indent: 0; 236 } 237 238 &::after { 239 float: right; 240 text-indent: 0; 241 } 242} 243 244 245/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ 246/* flex-box */ 247 248.display-flex() { 249 display: flex; 250 display: -ms-flexbox; 251 display: -webkit-flex; 252} 253 254.flex-direction(@elem:column) { 255 flex-direction: @elem; 256 -ms-flex-direction: @elem; 257 -webkit-flex-direction: @elem; 258} 259 260.justify-content(@elem:center) { 261 justify-content: @elem; 262 -ms-justify-content: @elem; 263 -webkit-justify-content: @elem; 264} 265 266.align-items(@elem:center) { 267 align-items: @elem; 268 -ms-align-items: @elem; 269 -webkit-align-items: @elem; 270} 271 272.flex(@elem:1 0 auto) { 273 flex: @elem; 274 -ms-flex: @elem; 275 -webkit-flex: @elem; 276} 277 278.flex-wrap() { 279 flex-wrap: wrap; 280 -webkit-flex-wrap: wrap; 281 -ms-flex-wrap: wrap; 282} 283 284/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ 285/* positioning */ 286.center-middle() { 287 position: absolute; 288 top: 50%; 289 left: 50%; 290 transform: translateX(-50%) translateY(-50%); 291 -ms-transform: translateX(-50%) translateY(-50%); 292 -webkit-transform: translateX(-50%) translateY(-50%); 293} 294 295/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 296/* Screenreader / Hide */ 297/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 298.reset() { 299 background: transparent; 300 border: none 0; outline: 0; vertical-align: baseline; 301 font-style: normal; 302 margin: 0; padding: 0; 303} 304 305.elementsReset() { 306 div, span, object, iframe, 307 h1, h2, h3, h4, h5, h6, p, blockquote, 308 a, abbr, em,acronym, img, strong, 309 dl, dt, dd, ol, ul, li, 310 fieldset, form, label, legend, 311 table, caption, tbody, tfoot, thead, tr, th, td, 312 input, select, option, textarea, button { 313 .reset(); 314 } 315} 316 317 318/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 319/* Col Grid */ 320/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 321.make-grid(@class) { 322 .float-grid-columns(@class); 323 .grid-columns(1, @class, width); 324 .grid-columns(2, @class, width); 325 .grid-columns(3, @class, width); 326 .grid-columns(4, @class, width); 327 .grid-columns(5, @class, width); 328 .grid-columns(6, @class, width); 329 .grid-columns(7, @class, width); 330 .grid-columns(8, @class, width); 331 .grid-columns(9, @class, width); 332 .grid-columns(10, @class, width); 333 .grid-columns(11, @class, width); 334 .grid-columns(12, @class, width); 335} 336 337.float-grid-columns(@class) { 338 .col-@{class}-1, 339 .col-@{class}-2, 340 .col-@{class}-3, 341 .col-@{class}-4, 342 .col-@{class}-5, 343 .col-@{class}-6, 344 .col-@{class}-7, 345 .col-@{class}-8, 346 .col-@{class}-9, 347 .col-@{class}-10, 348 .col-@{class}-11, 349 .col-@{class}-12 { 350 float: left; 351 } 352} 353 354// todo: no recusion - fix it !!! 355.grid-columns(@index, @class, @type) { 356 .calc-grid-column(@index, @class, @type); 357} 358 359.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { 360 .col-@{class}-@{index} { 361 width: percentage((@index / @grid-columns)); 362 } 363} 364