xref: /template/sprintdoc/css/base.less (revision 60176978c49539edeaa60966d50dc4b164402f17) 
1/**
2 * This file provides the basic/reset styles.
3 *
4 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
5 */
6
7/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
8/* all media */
9/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
10
11html,
12body {
13    .reset();
14    font-size: 100.1%;
15}
16
17header,
18.nav-direct{
19    .elementsReset();
20}
21
22ol,
23ul {
24    list-style: none outside none;
25}
26
27blockquote,
28q {
29    quotes: none;
30}
31
32acronym {
33    cursor: help;
34    border-bottom: dotted 1px @ini_text;
35}
36
37*:focus {
38    outline: 0;
39}
40
41table{
42    border-collapse: collapse;
43    border-spacing: 0;
44    empty-cells: show;
45    caption-side: top;
46}
47
48caption,
49th,
50td {
51    text-align: left;
52    vertical-align: top;
53}
54
55img {
56    display: block;
57    float: none;
58    border: none 0;
59    line-height: @line-height-default;
60}
61
62*,
63div,
64nav,
65header {
66    box-sizing: border-box;
67}
68
69header,
70footer,
71.container,
72.row, nav,
73nav > ul {
74    &::before,
75    &::after {
76        display: table;
77        content: ' ';
78        clear: both;
79    }
80}
81
82
83/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
84/* css behaviour */
85
86.sr-out {
87    .sr-out();
88}
89
90.sr-only {
91    .sr-only();
92}
93
94.clearer{
95    clear: both;
96}
97
98.structure,
99.none,
100.mobile-only {
101    display: none;
102}
103
104.mobile-only {
105    display: none;
106
107    @media @screen_max-md {
108        display: inline-block;
109    }
110}
111
112.mobile-hide {
113    display: inline-block;
114
115    @media @screen_max-md {
116        display: none;
117    }
118}
119
120.desktop-only {
121    display: none;
122    @media @screen_min-md {
123        display: inline-block;
124    }
125}
126
127
128/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
129/* screen only */
130/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
131
132@media screen {
133    html {
134        -ms-text-size-adjust: 100%;
135        -webkit-text-size-adjust: 100%;
136    }
137
138    article, aside, details, figcaption, figure, footer, header,
139    main, menu, nav, section, summary {
140        display: block;
141    }
142
143    audio,
144    canvas,
145    progress,
146    video {
147        display: inline-block;
148        vertical-align: baseline;
149    }
150
151    audio:not([controls]) {
152        display: none;
153        height: 0;
154    }
155
156    [hidden],
157    template {
158        display: none;
159    }
160
161    a:active,
162    a:hover {
163        outline: 0;
164    }
165
166    abbr[title] {
167        border-bottom: 1px dotted;
168    }
169
170    small {
171        font-size: 80%;
172    }
173
174    svg:not(:root) {
175        overflow: hidden;
176    }
177
178    hr {
179        box-sizing: content-box;
180        height: 0;
181    }
182
183    pre {
184        overflow: auto;
185    }
186
187    code,
188    kbd,
189    pre,
190    samp {
191        font-family: monospace, monospace;
192        font-size: 1em;
193    }
194
195    button,
196    input,
197    optgroup,
198    select,
199    textarea {
200        color: inherit;
201        font: inherit;
202        margin: 0;
203    }
204
205    button,
206    select {
207        text-transform: none;
208    }
209
210    button {
211        overflow: visible;
212    }
213
214    input {
215        &[type="checkbox"],
216        &[type="radio"] {
217            box-sizing: border-box;
218            padding: 0;
219        }
220
221        &[type="number"] {
222            &::-webkit-inner-spin-button,
223            &::-webkit-outer-spin-button {
224                height: auto;
225            }
226        }
227
228        &[type="search"] {
229            -webkit-appearance: textfield;
230            box-sizing: content-box;
231
232            &::-webkit-search-cancel-button,
233            &::-webkit-search-decoration {
234                -webkit-appearance: none;
235            }
236        }
237    }
238
239    legend {
240        border: 0;
241        padding: 0;
242    }
243
244    textarea {
245        overflow: auto;
246    }
247
248    table {
249        border-collapse: collapse;
250        border-spacing: 0;
251    }
252
253    td,
254    th {
255        padding: 0;
256    }
257
258    html, body {
259        font-family: @font_family_screen;
260        color: @ini_text;
261    }
262}
263
264
265/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
266/* print only */
267/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
268
269@media print {
270    body {
271        font-size: 12pt;
272    }
273}
274