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 &:before{ 32 font-family: "topmeteo"; 33 font-style: normal; 34 font-weight: normal; 35 speak: none; 36 37 display: inline-block; 38 text-decoration: inherit; 39 width: 1em; 40 margin-right: .2em; 41 text-align: center; 42 43 /* For safety - reset parent styles, that can break glyph codes*/ 44 font-variant: normal; 45 text-transform: none; 46 47 /* fix buttons height, for twitter bootstrap */ 48 line-height: 1em; 49 50 /* Animation center compensation - margins should be symmetric */ 51 /* remove if not needed */ 52 margin-left: .2em; 53 54 /* you can be more comfortable with increased icons size */ 55 /* font-size: 120%; */ 56 57 /* Font smoothing. That was taken from TWBS */ 58 -webkit-font-smoothing: antialiased; 59 -moz-osx-font-smoothing: grayscale; 60 61 /* Uncomment for 3D effect */ 62 /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ 63 } 64 65} 66 67 68 69/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 70/* Screenreader / Hide */ 71/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 72.sr-out() { 73 display: block; 74 width: 1px; 75 height: 1px; 76 overflow: hidden; 77 position: absolute; 78 top: -200000em; 79 left: -200000em; 80} 81 82.sr-only(){ 83 position: absolute; 84 width: 1px; 85 height: 1px; 86 margin: -1px; 87 padding: 0; 88 overflow: hidden; 89 clip: rect(0,0,0,0); 90 border: 0; 91} 92 93.sr-only-focusable() { 94 &:active, 95 &:focus { 96 position: static; 97 width: auto; 98 height: auto; 99 margin: 0; 100 overflow: visible; 101 clip: auto; 102 } 103} 104 105/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 106/* Screenreader / Hide */ 107/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 108 109.reset(){ 110 background: transparent; 111 border: none 0; outline: 0; vertical-align: baseline; 112 font-style: normal; 113 margin: 0; padding: 0; 114} 115 116.elementsReset(){ 117 div, span, object, iframe, 118 h1, h2, h3, h4, h5, h6, p, blockquote, 119 a, abbr, em,acronym, img, strong, 120 dl, dt, dd, ol, ul, li, 121 fieldset, form, label, legend, 122 table, caption, tbody, tfoot, thead, tr, th, td, 123 input, select, option, textarea, button{ 124 .reset(); 125 } 126} 127 128 129/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 130/* Col Grid */ 131/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 132.make-grid(@class) { 133 .float-grid-columns(@class); 134 .loop-grid-columns(@grid-columns, @class, width); 135} 136 137.float-grid-columns(@class) { 138 .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 { 139 float: left; 140 } 141} 142 143.loop-grid-columns(@index, @class, @type) when (@index >= 0) { 144 .calc-grid-column(@index, @class, @type); 145 // next iteration 146 .loop-grid-columns((@index - 1), @class, @type); 147} 148 149.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { 150 .col-@{class}-@{index} { 151 width: percentage((@index / @grid-columns)); 152 } 153} 154 155 156 157