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.btn-default-size() { 145 height: 1rem; 146 width: 1rem; 147 min-height: 1.2em; 148 min-width: 1.4em; 149} 150 151.btn-default-height() { 152 height: 1rem; 153 min-height: 1.2em; 154 min-width: 1.4em; 155} 156 157.hide-text-show-before(){ 158 display: inline-block; 159 overflow: hidden; 160 white-space: nowrap; 161 text-indent: -9999px; 162 .btn-default-size(); 163 164 &::before{ 165 text-indent: 0; 166 float: left; 167 } 168 169 &::after{ 170 text-indent: 0; 171 float: left; 172 } 173} 174 175 176.hide-text-show-after() { 177 display: inline-block; 178 overflow: hidden; 179 white-space: nowrap; 180 text-indent: -9999px; 181 &::before{ 182 text-indent: 0; 183 float: right; 184 } 185 &::after{ 186 text-indent: 0; 187 float: right; 188 } 189} 190 191 192/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 193/* Screenreader / Hide */ 194/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 195 196.reset() { 197 background: transparent; 198 border: none 0; outline: 0; vertical-align: baseline; 199 font-style: normal; 200 margin: 0; padding: 0; 201} 202 203.elementsReset() { 204 div, span, object, iframe, 205 h1, h2, h3, h4, h5, h6, p, blockquote, 206 a, abbr, em,acronym, img, strong, 207 dl, dt, dd, ol, ul, li, 208 fieldset, form, label, legend, 209 table, caption, tbody, tfoot, thead, tr, th, td, 210 input, select, option, textarea, button { 211 .reset(); 212 } 213} 214 215 216/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 217/* Col Grid */ 218/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 219 220.make-grid(@class) { 221 .float-grid-columns(@class); 222 .loop-grid-columns(@grid-columns, @class, width); 223} 224 225.float-grid-columns(@class) { 226 .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 { 227 float: left; 228 } 229} 230 231.loop-grid-columns(@index, @class, @type) when (@index >= 0) { 232 .calc-grid-column(@index, @class, @type); 233 // next iteration 234 .loop-grid-columns((@index - 1), @class, @type); 235} 236 237.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { 238 .col-@{class}-@{index} { 239 width: percentage((@index / @grid-columns)); 240 } 241} 242