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 0 .1rem; 154} 155 156.btn-usertools-num () { 157 .num { 158 position: absolute; 159 right: -.4em; 160 top: -.4em; 161 background-color: @button_color; 162 border-radius: 2px; 163 color: #fff; 164 font-size: .6rem; 165 font-weight: 400; 166 text-align: center; 167 line-height: 100%; 168 padding: .2em .3em .1em; 169 transition: @transition color, @transition background-color; 170 } 171 172 a { 173 &:hover, 174 &:active, 175 &:focus { 176 .num { 177 background-color: @button_color; 178 color: @button_background; 179 } 180 } 181 } 182} 183 184 185.btn-default-size() { 186 height: 1rem; 187 width: 1rem; 188 min-height: 1.2em; 189 min-width: 1.4em; 190} 191 192.btn-default-height() { 193 height: 1rem; 194 min-height: 1.2em; 195 min-width: 1.4em; 196} 197 198.hide-text-show-before(){ 199 display: inline-block; 200 overflow: hidden; 201 white-space: nowrap; 202 text-indent: -9999px; 203 .btn-default-size(); 204 205 &::before{ 206 text-indent: 0; 207 float: left; 208 } 209 210 &::after{ 211 text-indent: 0; 212 float: left; 213 } 214} 215 216 217.hide-text-show-after() { 218 display: inline-block; 219 overflow: hidden; 220 white-space: nowrap; 221 text-indent: -9999px; 222 223 &::before{ 224 text-indent: 0; 225 float: right; 226 } 227 &::after{ 228 text-indent: 0; 229 float: right; 230 } 231} 232 233 234/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 235/* Screenreader / Hide */ 236/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 237 238.reset() { 239 background: transparent; 240 border: none 0; outline: 0; vertical-align: baseline; 241 font-style: normal; 242 margin: 0; padding: 0; 243} 244 245.elementsReset() { 246 div, span, object, iframe, 247 h1, h2, h3, h4, h5, h6, p, blockquote, 248 a, abbr, em,acronym, img, strong, 249 dl, dt, dd, ol, ul, li, 250 fieldset, form, label, legend, 251 table, caption, tbody, tfoot, thead, tr, th, td, 252 input, select, option, textarea, button { 253 .reset(); 254 } 255} 256 257 258/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 259/* Col Grid */ 260/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 261 262.make-grid(@class) { 263 .float-grid-columns(@class); 264 .loop-grid-columns(@grid-columns, @class, width); 265} 266 267.float-grid-columns(@class) { 268 .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 { 269 float: left; 270 } 271} 272 273.loop-grid-columns(@index, @class, @type) when (@index >= 0) { 274 .calc-grid-column(@index, @class, @type); 275 // next iteration 276 .loop-grid-columns((@index - 1), @class, @type); 277} 278 279.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { 280 .col-@{class}-@{index} { 281 width: percentage((@index / @grid-columns)); 282 } 283} 284