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:@toggle-size) { 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: @color-nav-hover; 166 border-radius: 2px; 167 color: @color-nav-hover-bg; 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: @color-nav-hover; 182 color: @color-nav-hover-bg; 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.hide-text-show-before() { 198 display: inline-block; 199 overflow: hidden; 200 white-space: nowrap; 201 text-indent: -9999px; 202 203 &::before { 204 float: left; 205 width: 100%; 206 text-indent: 0; 207 margin: 0; 208 } 209 210 &::after { 211 float: left; 212 text-indent: 0; 213 } 214} 215 216.hide-text-show-after() { 217 display: inline-block; 218 overflow: hidden; 219 white-space: nowrap; 220 text-indent: -9999px; 221 222 &::before { 223 float: right; 224 text-indent: 0; 225 } 226 227 &::after { 228 float: right; 229 text-indent: 0; 230 } 231} 232 233 234/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ 235/* flex-box */ 236 237.display-flex() { 238 display: flex; 239 display: -ms-flexbox; 240 display: -webkit-flex; 241} 242 243.flex-direction(@elem:column) { 244 flex-direction: @elem; 245 -ms-flex-direction: @elem; 246 -webkit-flex-direction: @elem; 247} 248 249// default "center" 250.justify-content(@elem:center) { 251 justify-content: @elem; 252 -ms-justify-content: @elem; 253 -webkit-justify-content: @elem; 254} 255 256 257/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 258/* Screenreader / Hide */ 259/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 260 261.reset() { 262 background: transparent; 263 border: none 0; outline: 0; vertical-align: baseline; 264 font-style: normal; 265 margin: 0; padding: 0; 266} 267 268.elementsReset() { 269 div, span, object, iframe, 270 h1, h2, h3, h4, h5, h6, p, blockquote, 271 a, abbr, em,acronym, img, strong, 272 dl, dt, dd, ol, ul, li, 273 fieldset, form, label, legend, 274 table, caption, tbody, tfoot, thead, tr, th, td, 275 input, select, option, textarea, button { 276 .reset(); 277 } 278} 279 280 281/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 282/* Col Grid */ 283/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 284 285.make-grid(@class) { 286 .float-grid-columns(@class); 287 .loop-grid-columns(@grid-columns, @class, width); 288} 289 290.float-grid-columns(@class) { 291 .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 { 292 float: left; 293 } 294} 295 296.loop-grid-columns(@index, @class, @type) when (@index >= 0) { 297 .calc-grid-column(@index, @class, @type); 298 // next iteration 299 .loop-grid-columns((@index - 1), @class, @type); 300} 301 302.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { 303 .col-@{class}-@{index} { 304 width: percentage((@index / @grid-columns)); 305 } 306} 307