xref: /template/sprintdoc/css/base.less (revision 98c19ec009dbb92fc86fbfb5e2488791a23c54a2) 
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
245    @media @screen_max-xs {
246        display: inline-block;
247    }
248}
249
250.mobile-hide {
251    display: inline-block;
252
253    @media @screen_max-xs {
254        display: none;
255    }
256}
257
258
259/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
260/* screen only */
261/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
262
263@media screen {
264    html {
265        -ms-text-size-adjust: 100%;
266        -webkit-text-size-adjust: 100%;
267    }
268
269    article, aside, details, figcaption, figure, footer, header,
270    main, menu, nav, section, summary {
271        display: block;
272    }
273
274    audio,
275    canvas,
276    progress,
277    video {
278        display: inline-block;
279        vertical-align: baseline;
280    }
281
282    audio:not([controls]) {
283        display: none;
284        height: 0;
285    }
286
287    [hidden],
288    template {
289        display: none;
290    }
291
292    a:active,
293    a:hover {
294        outline: 0;
295    }
296
297    abbr[title] {
298        border-bottom: 1px dotted;
299    }
300
301    small {
302        font-size: 80%;
303    }
304
305    sub,
306    sup {
307        font-size: 75%;
308        line-height: 0;
309        position: relative;
310        vertical-align: baseline;
311    }
312
313    sup {
314        top: -0.5em;
315    }
316
317    sub {
318        bottom: -0.25em;
319    }
320
321    svg:not(:root) {
322        overflow: hidden;
323    }
324
325    hr {
326        box-sizing: content-box;
327        height: 0;
328    }
329
330    pre {
331        overflow: auto;
332    }
333
334    code,
335    kbd,
336    pre,
337    samp {
338        font-family: monospace, monospace;
339        font-size: 1em;
340    }
341
342    button,
343    input,
344    optgroup,
345    select,
346    textarea {
347        color: inherit;
348        font: inherit;
349        margin: 0;
350    }
351
352    button,
353    select {
354        text-transform: none;
355    }
356
357    button {
358        overflow: visible;
359    }
360
361    input {
362        &[type="checkbox"],
363        &[type="radio"] {
364            box-sizing: border-box;
365            padding: 0;
366        }
367
368        &[type="number"] {
369            &::-webkit-inner-spin-button,
370            &::-webkit-outer-spin-button {
371                height: auto;
372            }
373        }
374
375        &[type="search"] {
376            -webkit-appearance: textfield;
377            box-sizing: content-box;
378
379            &::-webkit-search-cancel-button,
380            &::-webkit-search-decoration {
381                -webkit-appearance: none;
382            }
383        }
384    }
385
386    legend {
387        border: 0;
388        padding: 0;
389    }
390
391    textarea {
392        overflow: auto;
393    }
394
395    table {
396        border-collapse: collapse;
397        border-spacing: 0;
398    }
399
400    td,
401    th {
402        padding: 0;
403    }
404
405    html, body, div, span, applet, object, iframe,
406    h1, h2, h3, h4, h5, h6, p, blockquote,
407    a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp,
408    small, strike, strong, sub, sup, tt, var,
409    b, u, i, center,
410    dl, dt, dd, ol, ul, li,
411    fieldset, form, label, legend,
412    table, caption, tbody, tfoot, thead, tr, th, td,
413    article, aside, canvas, details, embed,
414    figure, figcaption, footer, header,
415    menu, nav, output, ruby, section, summary,
416    time, mark, audio, video {
417        font-family: @font_family_screen;
418        color: @ini_text;
419    }
420}
421
422
423/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
424/* print only */
425/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
426
427@media print {
428    body {
429        font-size: 12pt;
430    }
431}
432