xref: /template/sprintdoc/css/base_mixins.less (revision be2c0e95525a70befe9fc41ac759ba32bb052231) 
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:@toggle-size) {
146    display: inline-block;
147    min-height: @elem;
148    min-width: @elem;
149    box-sizing: border-box;
150    color: @ini_nav_menu_color;
151    font-size: @font-size-small;
152    padding: 0;
153    margin: 0 .25rem;
154
155    * {
156        font-size: @font-size-small;
157    }
158}
159
160.btn-usertools-num () {
161    .num {
162        position: absolute;
163        right: -.4rem;
164        top: -.4em;
165        background-color: @ini_nav_menu_hover_color;
166        border-radius: 2px;
167        color: @ini_nav_menu_hover_bg;
168        font-size: @font-size-very-small;
169        font-weight: 400;
170        text-align: center;
171        line-height: 1;
172        padding: .1em @very-small-spacing;
173        transition: @transition color, @transition background-color;
174    }
175}
176
177.btn-prefix () {
178    .fontello();
179    .hide-text-show-before();
180
181    color: inherit;
182    font-size: @font-size-default;
183
184    @media @screen_min-xxlg {
185        margin-top: .25rem;
186    }
187
188    @media @screen_max-xxlg {
189        margin-top: .3rem;
190    }
191
192    @media @screen_max-md {
193        margin-top: .25rem;
194    }
195}
196
197.hide-text-show-before() {
198    display: inline-block;
199    overflow: hidden;
200    white-space: nowrap;
201    text-indent: -9999px;
202
203    &::before {
204        float: left;
205        width: 100%;
206        text-indent: 0;
207        margin: 0;
208    }
209
210    &::after {
211        float: left;
212        text-indent: 0;
213    }
214}
215
216.hide-text-show-after() {
217    display: inline-block;
218    overflow: hidden;
219    white-space: nowrap;
220    text-indent: -9999px;
221
222    &::before {
223        float: right;
224        text-indent: 0;
225    }
226
227    &::after {
228        float: right;
229        text-indent: 0;
230    }
231}
232
233
234/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
235/* flex-box */
236
237.display-flex() {
238    display: flex;
239    display: -ms-flexbox;
240    display: -webkit-flex;
241}
242
243.flex-direction(@elem:column) {
244    flex-direction: @elem;
245    -ms-flex-direction: @elem;
246    -webkit-flex-direction: @elem;
247}
248
249.justify-content(@elem:center) {
250    justify-content: @elem;
251    -ms-justify-content: @elem;
252    -webkit-justify-content: @elem;
253}
254
255.align-items(@elem:center) {
256    align-items: @elem;
257    -ms-align-items: @elem;
258    -webkit-align-items: @elem;
259}
260
261.flex(@elem:1 0 auto) {
262    flex: @elem;
263    -ms-flex: @elem;
264    -webkit-flex: @elem;
265}
266
267
268/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
269/* positioning */
270
271.center-middle() {
272    position: absolute;
273    top: 50%;
274    left: 50%;
275    transform: translateX(-50%) translateY(-50%);
276    -ms-transform: translateX(-50%) translateY(-50%);
277    -webkit-transform: translateX(-50%) translateY(-50%);
278}
279
280
281/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
282/* Screenreader / Hide */
283/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
284
285.reset() {
286    background: transparent;
287    border: none 0; outline: 0; vertical-align: baseline;
288    font-style: normal;
289    margin: 0; padding: 0;
290}
291
292.elementsReset() {
293    div, span, object, iframe,
294    h1, h2, h3, h4, h5, h6, p, blockquote,
295    a, abbr, em,acronym, img, strong,
296    dl, dt, dd, ol, ul, li,
297    fieldset, form, label, legend,
298    table, caption, tbody, tfoot, thead, tr, th, td,
299    input, select, option, textarea, button {
300        .reset();
301    }
302}
303
304
305/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
306/* Col Grid */
307/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
308
309.make-grid(@class) {
310    .float-grid-columns(@class);
311    .loop-grid-columns(@grid-columns, @class, width);
312}
313
314.float-grid-columns(@class) {
315    .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 {
316        float: left;
317    }
318}
319
320.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
321    .calc-grid-column(@index, @class, @type);
322    // next iteration
323    .loop-grid-columns((@index - 1), @class, @type);
324}
325
326.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
327    .col-@{class}-@{index} {
328        width: percentage((@index / @grid-columns));
329    }
330}
331