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