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