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