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