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