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