1/** 2 * This file provides less mixins for all other style modules 3 * 4 * @author Jana Deutschlaender <deutschlaender@cosmocode.de> 5 */ 6 7/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 8/* Fonts */ 9/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 10.setLocalFontFace(@fontFamily,@fontWeight,@localFontName,@localFontNameVar,@filename){ 11 @font-face { 12 font-family: @fontFamily; 13 font-style: normal; 14 font-weight: @fontWeight; 15 src: ~"local('@{localFontName}'), local("~"'@{localFontNameVar}'), url(fonts/"~"@{filename}.eot)"; 16 src: ~"url(fonts/"~"@{filename}.eot?#iefix) format('embedded-opentype'), url(fonts/"~"@{filename}.woff) format('woff')"; 17 } 18} 19 20.setIconFontFace(@fontFamily,@filename){ 21 @font-face { 22 font-family: @fontFamily; 23 src: ~"url('fonts/icons/"~"@{filename}.eot?6762325')"; 24 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')"; 25 font-weight: normal; 26 font-style: normal; 27 } 28} 29 30.fontello(){ 31 32 &::before{ 33 font-family: "fontello"; 34 font-style: normal; 35 font-weight: normal; 36 speak: none; 37 38 display: inline-block; 39 text-decoration: inherit; 40 width: 1em; 41 margin-right: .2em; 42 text-align: center; 43 44 /* For safety - reset parent styles, that can break glyph codes*/ 45 font-variant: normal; 46 text-transform: none; 47 48 /* fix buttons height, for twitter bootstrap */ 49 line-height: 1em; 50 51 /* Animation center compensation - margins should be symmetric */ 52 /* remove if not needed */ 53 margin-left: .2em; 54 55 /* you can be more comfortable with increased icons size */ 56 /* font-size: 120%; */ 57 58 /* Font smoothing. That was taken from TWBS */ 59 -webkit-font-smoothing: antialiased; 60 -moz-osx-font-smoothing: grayscale; 61 62 /* Uncomment for 3D effect */ 63 /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ 64 } 65 66} 67 68.fontello-double(){ 69 70 &::before, &::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 108/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 109/* Screenreader / Hide */ 110/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 111.sr-out() { 112 display: block; 113 width: 1px; 114 height: 1px; 115 overflow: hidden; 116 position: absolute; 117 top: -200000em; 118 left: -200000em; 119} 120 121.sr-only(){ 122 position: absolute; 123 width: 1px; 124 height: 1px; 125 margin: -1px; 126 padding: 0; 127 overflow: hidden; 128 clip: rect(0,0,0,0); 129 border: 0; 130} 131 132.sr-only-focusable() { 133 &:active, 134 &:focus { 135 position: static; 136 width: auto; 137 height: auto; 138 margin: 0; 139 overflow: visible; 140 clip: auto; 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 &::before{ 164 text-indent: 0; 165 float: left; 166 } 167 &::after{ 168 text-indent: 0; 169 float: left; 170 } 171} 172 173 174.hide-text-show-after(){ 175 display: inline-block; 176 overflow: hidden; 177 white-space: nowrap; 178 text-indent: -9999px; 179 &::before{ 180 text-indent: 0; 181 float: right; 182 } 183 &::after{ 184 text-indent: 0; 185 float: right; 186 } 187} 188 189/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 190/* Screenreader / Hide */ 191/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 192 193.reset(){ 194 background: transparent; 195 border: none 0; outline: 0; vertical-align: baseline; 196 font-style: normal; 197 margin: 0; padding: 0; 198} 199 200.elementsReset(){ 201 div, span, object, iframe, 202 h1, h2, h3, h4, h5, h6, p, blockquote, 203 a, abbr, em,acronym, img, strong, 204 dl, dt, dd, ol, ul, li, 205 fieldset, form, label, legend, 206 table, caption, tbody, tfoot, thead, tr, th, td, 207 input, select, option, textarea, button{ 208 .reset(); 209 } 210} 211 212 213/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 214/* Col Grid */ 215/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 216.make-grid(@class) { 217 .float-grid-columns(@class); 218 .loop-grid-columns(@grid-columns, @class, width); 219} 220 221.float-grid-columns(@class) { 222 .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 { 223 float: left; 224 } 225} 226 227.loop-grid-columns(@index, @class, @type) when (@index >= 0) { 228 .calc-grid-column(@index, @class, @type); 229 // next iteration 230 .loop-grid-columns((@index - 1), @class, @type); 231} 232 233.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { 234 .col-@{class}-@{index} { 235 width: percentage((@index / @grid-columns)); 236 } 237} 238 239 240 241