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