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