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: .8rem; 152 padding: 0; 153 margin: 0 .2rem; 154 155 * { 156 font-size: .8rem; 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: .6rem; 169 font-weight: 400; 170 text-align: center; 171 line-height: 1; 172 padding: .2em .2rem .1em; 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: 1rem; 194 margin-top: .2rem; 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/* Screenreader / Hide */ 249/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 250 251.reset() { 252 background: transparent; 253 border: none 0; outline: 0; vertical-align: baseline; 254 font-style: normal; 255 margin: 0; padding: 0; 256} 257 258.elementsReset() { 259 div, span, object, iframe, 260 h1, h2, h3, h4, h5, h6, p, blockquote, 261 a, abbr, em,acronym, img, strong, 262 dl, dt, dd, ol, ul, li, 263 fieldset, form, label, legend, 264 table, caption, tbody, tfoot, thead, tr, th, td, 265 input, select, option, textarea, button { 266 .reset(); 267 } 268} 269 270 271/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 272/* Col Grid */ 273/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 274 275.make-grid(@class) { 276 .float-grid-columns(@class); 277 .loop-grid-columns(@grid-columns, @class, width); 278} 279 280.float-grid-columns(@class) { 281 .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 { 282 float: left; 283 } 284} 285 286.loop-grid-columns(@index, @class, @type) when (@index >= 0) { 287 .calc-grid-column(@index, @class, @type); 288 // next iteration 289 .loop-grid-columns((@index - 1), @class, @type); 290} 291 292.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { 293 .col-@{class}-@{index} { 294 width: percentage((@index / @grid-columns)); 295 } 296} 297