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