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