1/**
2 * This file provides less mixins for all other style modules
3 */
4
5/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
6/* Fonts */
7/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
8.setLocalFontFace(@fontFamily,@fontWeight,@localFontName,@localFontNameVar,@filename) {
9    @font-face {
10        font-family: @fontFamily;
11        font-style: normal;
12        font-weight: @fontWeight;
13        src: ~"local('@{localFontName}'), local('@{localFontNameVar}'), url(fonts/@{filename}.eot)";
14        src: ~"url(fonts/@{filename}.eot?#iefix) format('embedded-opentype'), url(fonts/@{filename}.woff) format('woff')";
15    }
16}
17
18.setIconFontFace(@fontFamily,@filename) {
19    @font-face {
20        font-family: @fontFamily;
21        src: ~"url('fonts/icons/@{filename}.eot?6762325')";
22        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')";
23        font-weight: normal;
24        font-style: normal;
25    }
26}
27
28.fontello() {
29    &::before {
30        font-family: "fontello";
31        font-style: normal;
32        font-weight: normal;
33        speak: none;
34
35        display: inline-block;
36        text-decoration: inherit;
37        width: 1em;
38        margin-right: .2em;
39        text-align: center;
40
41        /* For safety - reset parent styles, that can break glyph codes*/
42        font-variant: normal;
43        text-transform: none;
44
45        /* fix buttons height, for twitter bootstrap */
46        line-height: 1em;
47
48        /* Animation center compensation - margins should be symmetric */
49        /* remove if not needed */
50        margin-left: .2em;
51
52        /* you can be more comfortable with increased icons size */
53        /* font-size: 120%; */
54
55        /* Font smoothing. That was taken from TWBS */
56        -webkit-font-smoothing: antialiased;
57        -moz-osx-font-smoothing: grayscale;
58
59        /* Uncomment for 3D effect */
60        /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
61    }
62}
63
64.fontello-double() {
65    &::before,
66    &::after {
67        font-family: "fontello";
68        font-style: normal;
69        font-weight: normal;
70        speak: none;
71
72        display: inline-block;
73        text-decoration: inherit;
74        width: 1em;
75        margin-right: .2em;
76        text-align: center;
77
78        /* For safety - reset parent styles, that can break glyph codes*/
79        font-variant: normal;
80        text-transform: none;
81
82        /* fix buttons height, for twitter bootstrap */
83        line-height: 1em;
84
85        /* Animation center compensation - margins should be symmetric */
86        /* remove if not needed */
87        margin-left: .2em;
88
89        /* you can be more comfortable with increased icons size */
90        /* font-size: 120%; */
91
92        /* Font smoothing. That was taken from TWBS */
93        -webkit-font-smoothing: antialiased;
94        -moz-osx-font-smoothing: grayscale;
95
96        /* Uncomment for 3D effect */
97        /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
98    }
99}
100
101/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
102/* Screenreader / Hide */
103/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
104.sr-out() {
105    display: block;
106    width: 1px;
107    height: 1px;
108    overflow: hidden;
109    position: absolute;
110    top: -200000em;
111    left: -200000em;
112}
113
114.sr-only() {
115    position: absolute;
116    width: 1px;
117    height: 1px;
118    margin: -1px;
119    padding: 0;
120    overflow: hidden;
121    clip: rect(0,0,0,0);
122    border: 0;
123}
124
125.sr-only-focusable() {
126    &:active,
127    &:focus {
128        position: static;
129        width: auto;
130        height: auto;
131        margin: 0;
132        overflow: visible;
133        clip: auto;
134    }
135}
136
137/* + + + + +  small icon-buttons (breadcrumb, page-header)  + + + + + */
138.btn-hover {
139    background-color: @ini_nav_menu_hover_bg;
140    color: @ini_nav_menu_hover_color;
141    transition: @transition color, @transition background-color, @transition border-color;
142
143    &:hover,
144    &:active,
145    &:focus {
146        background-color: @ini_nav_menu_hover_color;
147        border-color: @ini_nav_menu_hover_color;
148        color: @ini_nav_menu_hover_bg;
149
150        .prefix {
151            color: inherit;
152        }
153    }
154}
155
156.btn-usertools-wrapper(@elem:@toggle-size) {
157    display: inline-block;
158    min-height: @elem;
159    min-width: @elem;
160    box-sizing: border-box;
161    color: @ini_text_webframe;
162    font-size: @font-size-small;
163    padding: 0;
164    margin: 0 .25rem;
165
166    * {
167        font-size: @font-size-small;
168    }
169}
170
171.btn-usertools-num() {
172    .num {
173        position: absolute;
174        right: -.4rem;
175        top: -.5em;
176        background-color: @ini_nav_menu_hover_color;
177        border-radius: 2px;
178        color: @ini_nav_menu_hover_bg;
179        font-size: @font-size-very-small;
180        font-weight: 400;
181        text-align: center;
182        line-height: 1;
183        padding: .1em @very-small-spacing;
184        transition: @transition color, @transition background-color;
185    }
186}
187
188.btn-prefix(@margin-top:.3rem) {
189    .fontello();
190    .hide-text-show-before();
191
192    color: inherit;
193    font-size: @font-size-default;
194
195    @media @screen_min-xxlg {
196        margin-top: .22rem;
197    }
198
199    @media @screen_max-xxlg {
200        margin-top: @margin-top;
201    }
202
203    @media @screen_max-md {
204        margin-top: .2rem;
205    }
206}
207
208.hide-text-show-before() {
209    display: inline-block;
210    overflow: hidden;
211    white-space: nowrap;
212    text-indent: -9999px;
213
214    &::before {
215        float: left;
216        width: 100%;
217        text-indent: 0;
218        margin: 0;
219    }
220
221    &::after {
222        float: left;
223        text-indent: 0;
224    }
225}
226
227.hide-text-show-after() {
228    display: inline-block;
229    overflow: hidden;
230    white-space: nowrap;
231    text-indent: -9999px;
232
233    &::before {
234        float: right;
235        text-indent: 0;
236    }
237
238    &::after {
239        float: right;
240        text-indent: 0;
241    }
242}
243
244
245/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
246/* flex-box */
247
248.display-flex() {
249    display: flex;
250    display: -ms-flexbox;
251    display: -webkit-flex;
252}
253
254.flex-direction(@elem:column) {
255    flex-direction: @elem;
256    -ms-flex-direction: @elem;
257    -webkit-flex-direction: @elem;
258}
259
260.justify-content(@elem:center) {
261    justify-content: @elem;
262    -ms-justify-content: @elem;
263    -webkit-justify-content: @elem;
264}
265
266.align-items(@elem:center) {
267    align-items: @elem;
268    -ms-align-items: @elem;
269    -webkit-align-items: @elem;
270}
271
272.flex(@elem:1 0 auto) {
273    flex: @elem;
274    -ms-flex: @elem;
275    -webkit-flex: @elem;
276}
277
278.flex-wrap() {
279    flex-wrap: wrap;
280    -webkit-flex-wrap: wrap;
281    -ms-flex-wrap: wrap;
282}
283
284/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
285/* positioning */
286.center-middle() {
287    position: absolute;
288    top: 50%;
289    left: 50%;
290    transform: translateX(-50%) translateY(-50%);
291    -ms-transform: translateX(-50%) translateY(-50%);
292    -webkit-transform: translateX(-50%) translateY(-50%);
293}
294
295/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
296/* Screenreader / Hide */
297/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
298.reset() {
299    background: transparent;
300    border: none 0; outline: 0; vertical-align: baseline;
301    font-style: normal;
302    margin: 0; padding: 0;
303}
304
305.elementsReset() {
306    div, span, object, iframe,
307    h1, h2, h3, h4, h5, h6, p, blockquote,
308    a, abbr, em,acronym, img, strong,
309    dl, dt, dd, ol, ul, li,
310    fieldset, form, label, legend,
311    table, caption, tbody, tfoot, thead, tr, th, td,
312    input, select, option, textarea, button {
313        .reset();
314    }
315}
316
317
318/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
319/* Col Grid */
320/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
321.make-grid(@class) {
322    .float-grid-columns(@class);
323    .grid-columns(1, @class, width);
324    .grid-columns(2, @class, width);
325    .grid-columns(3, @class, width);
326    .grid-columns(4, @class, width);
327    .grid-columns(5, @class, width);
328    .grid-columns(6, @class, width);
329    .grid-columns(7, @class, width);
330    .grid-columns(8, @class, width);
331    .grid-columns(9, @class, width);
332    .grid-columns(10, @class, width);
333    .grid-columns(11, @class, width);
334    .grid-columns(12, @class, width);
335}
336
337.float-grid-columns(@class) {
338    .col-@{class}-1,
339    .col-@{class}-2,
340    .col-@{class}-3,
341    .col-@{class}-4,
342    .col-@{class}-5,
343    .col-@{class}-6,
344    .col-@{class}-7,
345    .col-@{class}-8,
346    .col-@{class}-9,
347    .col-@{class}-10,
348    .col-@{class}-11,
349    .col-@{class}-12 {
350        float: left;
351    }
352}
353
354// todo: no recusion - fix it !!!
355.grid-columns(@index, @class, @type) {
356    .calc-grid-column(@index, @class, @type);
357}
358
359.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
360    .col-@{class}-@{index} {
361        width: percentage((@index / @grid-columns));
362    }
363}
364