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