xref: /template/sprintdoc/css/base_mixins.less (revision 2d623f4b2e20ce31c0d368a026d4d38885e0fb66) 
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 () {
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: .25rem;
204    }
205
206    @media @screen_max-xxlg {
207        margin-top: .3rem;
208    }
209
210    @media @screen_max-md {
211        margin-top: .25rem;
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
286/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
287/* positioning */
288
289.center-middle() {
290    position: absolute;
291    top: 50%;
292    left: 50%;
293    transform: translateX(-50%) translateY(-50%);
294    -ms-transform: translateX(-50%) translateY(-50%);
295    -webkit-transform: translateX(-50%) translateY(-50%);
296}
297
298
299/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
300/* Screenreader / Hide */
301/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
302
303.reset() {
304    background: transparent;
305    border: none 0; outline: 0; vertical-align: baseline;
306    font-style: normal;
307    margin: 0; padding: 0;
308}
309
310.elementsReset() {
311    div, span, object, iframe,
312    h1, h2, h3, h4, h5, h6, p, blockquote,
313    a, abbr, em,acronym, img, strong,
314    dl, dt, dd, ol, ul, li,
315    fieldset, form, label, legend,
316    table, caption, tbody, tfoot, thead, tr, th, td,
317    input, select, option, textarea, button {
318        .reset();
319    }
320}
321
322
323/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
324/* Col Grid */
325/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
326
327.make-grid(@class) {
328    .float-grid-columns(@class);
329    .loop-grid-columns(@grid-columns, @class, width);
330}
331
332.float-grid-columns(@class) {
333    .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 {
334        float: left;
335    }
336}
337
338.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
339    .calc-grid-column(@index, @class, @type);
340    // next iteration
341    .loop-grid-columns((@index - 1), @class, @type);
342}
343
344.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
345    .col-@{class}-@{index} {
346        width: percentage((@index / @grid-columns));
347    }
348}
349