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