xref: /template/sprintdoc/css/base_mixins.less (revision f707d52f968441abec83addd48289c09318cd0d9) 
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: @color-nav;
151    font-size: @font-size-small;
152    padding: 0;
153    margin: 0 @very-small-spacing;
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: @color-nav-hover;
166        border-radius: 2px;
167        color: @color-nav-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    a {
177        &:hover,
178        &:active,
179        &:focus {
180            .num {
181                background-color: @color-nav-hover;
182                color: @color-nav-hover-bg;
183            }
184        }
185    }
186}
187
188.btn-prefix () {
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: .25rem;
197    }
198
199    @media @screen_max-xxlg {
200        margin-top: .3rem;
201    }
202
203    @media @screen_max-md {
204        margin-top: .25rem;
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
279/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
280/* positioning */
281
282.center-middle() {
283    position: absolute;
284    top: 50%;
285    left: 50%;
286    transform: translateX(-50%) translateY(-50%);
287    -ms-transform: translateX(-50%) translateY(-50%);
288    -webkit-transform: translateX(-50%) translateY(-50%);
289}
290
291
292/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
293/* Screenreader / Hide */
294/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
295
296.reset() {
297    background: transparent;
298    border: none 0; outline: 0; vertical-align: baseline;
299    font-style: normal;
300    margin: 0; padding: 0;
301}
302
303.elementsReset() {
304    div, span, object, iframe,
305    h1, h2, h3, h4, h5, h6, p, blockquote,
306    a, abbr, em,acronym, img, strong,
307    dl, dt, dd, ol, ul, li,
308    fieldset, form, label, legend,
309    table, caption, tbody, tfoot, thead, tr, th, td,
310    input, select, option, textarea, button {
311        .reset();
312    }
313}
314
315
316/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
317/* Col Grid */
318/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
319
320.make-grid(@class) {
321    .float-grid-columns(@class);
322    .loop-grid-columns(@grid-columns, @class, width);
323}
324
325.float-grid-columns(@class) {
326    .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 {
327        float: left;
328    }
329}
330
331.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
332    .calc-grid-column(@index, @class, @type);
333    // next iteration
334    .loop-grid-columns((@index - 1), @class, @type);
335}
336
337.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
338    .col-@{class}-@{index} {
339        width: percentage((@index / @grid-columns));
340    }
341}
342