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