xref: /template/sprintdoc/css/base.less (revision 0159f7fd96bf5b5716c2713136d13fa7cfcdbb16) 
1/**
2 * This file provides the basic vars and reset styles.
3 *
4 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
5 */
6
7
8/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
9/* converted vars */
10/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
11
12@height-context-bar: 50px;
13
14@border-radius:      __default_border_radius__;
15
16@font_family_screen: __font_family_screen__;
17
18@color-border:       __border__;
19@color-nav:          __nav_menu_color__;
20@color-nav-hover:    __nav_menu_hover_color__;
21@color-nav-hover-bg: __nav_menu_hover_bg__;
22
23@color-content-bg:   __background_content__;
24@color-site-bg:      __background_site__;
25
26@color-link:         __existing__;
27
28@margin-big:         2.5rem;
29
30
31/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
32/* global vars */
33/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
34
35
36/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
37/* fonts */
38
39@line-height-default: 125%;
40@line-height-big: 135%;
41@line-height-bigger: 140%;
42
43
44/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
45/* breakpoints */
46
47@break-min-xxs: 480;
48@break-max-xxs: (@break-min-xxs - 1);
49
50@break-min-xs: 768;
51@break-max-xs: (@break-min-xs - 1);
52
53@break-min-sm: 992;
54@break-max-sm: (@break-min-xs - 1);
55
56@break-min-md: 1024;
57@break-max-md: (@break-min-md - 1);
58
59@break-min-lg: 1200;
60@break-max-lg: (@break-min-lg - 1);
61
62@break-min-xlg: 1440;
63@break-max-xlg: (@break-min-xlg - 1);
64
65@break-min-xxlg: 1600;
66@break-max-xxlg: (@break-min-xlg - 1);
67
68
69/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
70/* media queries for breakpoints */
71
72@screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)";
73@screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)";
74
75@screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)";
76@screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)";
77
78@screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)";
79@screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)";
80
81@screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)";
82@screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)";
83@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";
84
85@screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
86@screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";
87
88@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
89@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";
90
91@screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)";
92@screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)";
93
94
95/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
96/* col width */
97
98@c12:               100%;
99@c11:               91.66666667%;
100@c10:               83.33333333%;
101@c9:                75%;
102@c8:                66.66666667%;
103@c7:                58.33333333%;
104@c6:                50%;
105@c5:                41.66666667%;
106@c4:                33.33333333%;
107@c3:                25%;
108@c2:                16.66666667%;
109@c1:                8.33333333%;
110
111@grid-columns:      12;
112
113
114/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
115/* all media */
116/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
117
118html,
119body {
120    .reset();
121
122    font-size: 100.1%;
123}
124
125header,
126.nav-direct{
127    .elementsReset();
128}
129
130div, span, object,
131h1, h2, h3, h4, h5, h6, p, blockquote,
132a, abbr, em,acronym, img, strong,
133dl, dt, dd, ol, ul, li,
134fieldset, form, label, legend,
135table, caption, tbody, tfoot, thead, tr, th, td,
136input, select, option, textarea, button {
137    font-size: 1rem;
138    line-height: 100%;
139}
140
141
142ol,
143ul {
144    list-style: none outside none;
145}
146
147blockquote,
148q {
149    quotes: none;
150}
151
152acronym {
153    cursor: help;
154    border-bottom: dotted 1px #333;
155}
156
157*:focus {
158    outline: 0;
159}
160
161table{
162    border-collapse: collapse;
163    border-spacing: 0;
164    empty-cells: show;
165    caption-side: top;
166}
167
168caption,
169th,
170td {
171    text-align: left;
172    vertical-align: top;
173}
174
175img {
176    display: block;
177    float: none;
178    border: none 0;
179    line-height: @line-height-default;
180}
181
182*,
183div,
184nav,
185header {
186    box-sizing: border-box;
187}
188
189header,
190footer,
191.container,
192.row, nav,
193nav > ul {
194    &::before,
195    &::after {
196        display: table;
197        content: "  ";
198        clear: both;
199    }
200}
201
202
203/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
204/* css behaviour */
205
206.sr-out {
207    .sr-out();
208}
209
210.sr-only {
211    .sr-only();
212}
213
214.structure,
215.none,
216.mobile-only {
217    display: none;
218}
219
220.mobile-only {
221    display: none;
222
223    @media @screen_max-xs {
224        display: inline-block;
225    }
226}
227
228.mobile-hide {
229    display: inline-block;
230
231    @media @screen_max-xs {
232        display: none;
233    }
234}
235
236
237/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
238/* screen only */
239/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
240
241@media screen {
242    html {
243        -ms-text-size-adjust: 100%;
244        -webkit-text-size-adjust: 100%;
245    }
246
247    article, aside, details, figcaption, figure, footer, header,
248    main, menu, nav, section, summary {
249        display: block;
250    }
251
252    audio,
253    canvas,
254    progress,
255    video {
256        display: inline-block;
257        vertical-align: baseline;
258    }
259
260    audio:not([controls]) {
261        display: none;
262        height: 0;
263    }
264
265    [hidden],
266    template {
267        display: none;
268    }
269
270    a:active,
271    a:hover {
272        outline: 0;
273    }
274
275    abbr[title] {
276        border-bottom: 1px dotted;
277    }
278
279    small {
280        font-size: 80%;
281    }
282
283    sub,
284    sup {
285        font-size: 75%;
286        line-height: 0;
287        position: relative;
288        vertical-align: baseline;
289    }
290
291    sup {
292        top: -0.5em;
293    }
294
295    sub {
296        bottom: -0.25em;
297    }
298
299    svg:not(:root) {
300        overflow: hidden;
301    }
302
303    hr {
304        box-sizing: content-box;
305        height: 0;
306    }
307
308    pre {
309        overflow: auto;
310    }
311
312    code,
313    kbd,
314    pre,
315    samp {
316        font-family: monospace, monospace;
317        font-size: 1em;
318    }
319
320    button,
321    input,
322    optgroup,
323    select,
324    textarea {
325        color: inherit;
326        font: inherit;
327        margin: 0;
328    }
329
330    button,
331    select {
332        text-transform: none;
333    }
334
335    button {
336        overflow: visible;
337    }
338
339    input {
340        &[type="checkbox"],
341        &[type="radio"] {
342            box-sizing: border-box;
343            padding: 0;
344        }
345
346        &[type="number"] {
347            &::-webkit-inner-spin-button,
348            &::-webkit-outer-spin-button {
349                height: auto;
350            }
351        }
352
353        &[type="search"] {
354            -webkit-appearance: textfield;
355            box-sizing: content-box;
356
357            &::-webkit-search-cancel-button,
358            &::-webkit-search-decoration {
359                -webkit-appearance: none;
360            }
361        }
362    }
363
364    legend {
365        border: 0;
366        padding: 0;
367    }
368
369    textarea {
370        overflow: auto;
371    }
372
373    table {
374        border-collapse: collapse;
375        border-spacing: 0;
376    }
377
378    td,
379    th {
380        padding: 0;
381    }
382
383    html, body, div, span, applet, object, iframe,
384    h1, h2, h3, h4, h5, h6, p, blockquote,
385    a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp,
386    small, strike, strong, sub, sup, tt, var,
387    b, u, i, center,
388    dl, dt, dd, ol, ul, li,
389    fieldset, form, label, legend,
390    table, caption, tbody, tfoot, thead, tr, th, td,
391    article, aside, canvas, details, embed,
392    figure, figcaption, footer, header,
393    menu, nav, output, ruby, section, summary,
394    time, mark, audio, video {
395        font-family: @font_family_screen;
396        color: @ini_text;
397    }
398}
399
400
401/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
402/* print only */
403/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
404
405@media print {
406    body {
407        font-size: 12pt;
408    }
409}
410