Merge "InvalidRoleException-junits"
[portal.git] / portal-FE-common / src / styles / bootstrap / _reboot.scss
1 // stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
2
3 // Reboot
4 //
5 // Normalization of HTML elements, manually forked from Normalize.css to remove
6 // styles targeting irrelevant browsers while applying new styles.
7 //
8 // Normalize is licensed MIT. https://github.com/necolas/normalize.css
9
10
11 // Document
12 //
13 // 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
14 // 2. Change the default font family in all browsers.
15 // 3. Correct the line height in all browsers.
16 // 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
17 // 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
18 //    we force a non-overlapping, non-auto-hiding scrollbar to counteract.
19 // 6. Change the default tap highlight to be completely transparent in iOS.
20
21 *,
22 *::before,
23 *::after {
24   box-sizing: border-box; // 1
25 }
26
27 html {
28   font-family: sans-serif; // 2
29   line-height: 1.15; // 3
30   -webkit-text-size-adjust: 100%; // 4
31   -ms-text-size-adjust: 100%; // 4
32   -ms-overflow-style: scrollbar; // 5
33   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
34 }
35
36 // IE10+ doesn't honor `<meta name="viewport">` in some cases.
37 @at-root {
38   @-ms-viewport {
39     width: device-width;
40   }
41 }
42
43 // stylelint-disable selector-list-comma-newline-after
44 // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
45 article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
46   display: block;
47 }
48 // stylelint-enable selector-list-comma-newline-after
49
50 // Body
51 //
52 // 1. Remove the margin in all browsers.
53 // 2. As a best practice, apply a default `background-color`.
54 // 3. Set an explicit initial text-align value so that we can later use the
55 //    the `inherit` value on things like `<th>` elements.
56
57 body {
58   margin: 0; // 1
59   font-family: $font-family-base;
60   font-size: $font-size-base;
61   font-weight: $font-weight-base;
62   line-height: $line-height-base;
63   color: $body-color;
64   text-align: left; // 3
65   background-color: $body-bg; // 2
66 }
67
68 // Suppress the focus outline on elements that cannot be accessed via keyboard.
69 // This prevents an unwanted focus outline from appearing around elements that
70 // might still respond to pointer events.
71 //
72 // Credit: https://github.com/suitcss/base
73 [tabindex="-1"]:focus {
74   outline: 0 !important;
75 }
76
77
78 // Content grouping
79 //
80 // 1. Add the correct box sizing in Firefox.
81 // 2. Show the overflow in Edge and IE.
82
83 hr {
84   box-sizing: content-box; // 1
85   height: 0; // 1
86   overflow: visible; // 2
87 }
88
89
90 //
91 // Typography
92 //
93
94 // Remove top margins from headings
95 //
96 // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
97 // margin for easier control within type scales as it avoids margin collapsing.
98 // stylelint-disable selector-list-comma-newline-after
99 h1, h2, h3, h4, h5, h6 {
100   margin-top: 0;
101   margin-bottom: $headings-margin-bottom;
102 }
103 // stylelint-enable selector-list-comma-newline-after
104
105 // Reset margins on paragraphs
106 //
107 // Similarly, the top margin on `<p>`s get reset. However, we also reset the
108 // bottom margin to use `rem` units instead of `em`.
109 p {
110   margin-top: 0;
111   margin-bottom: $paragraph-margin-bottom;
112 }
113
114 // Abbreviations
115 //
116 // 1. Remove the bottom border in Firefox 39-.
117 // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
118 // 3. Add explicit cursor to indicate changed behavior.
119 // 4. Duplicate behavior to the data-* attribute for our tooltip plugin
120
121 abbr[title],
122 abbr[data-original-title] { // 4
123   text-decoration: underline; // 2
124   text-decoration: underline dotted; // 2
125   cursor: help; // 3
126   border-bottom: 0; // 1
127 }
128
129 address {
130   margin-bottom: 1rem;
131   font-style: normal;
132   line-height: inherit;
133 }
134
135 ol,
136 ul,
137 dl {
138   margin-top: 0;
139   margin-bottom: 1rem;
140 }
141
142 ol ol,
143 ul ul,
144 ol ul,
145 ul ol {
146   margin-bottom: 0;
147 }
148
149 dt {
150   font-weight: $dt-font-weight;
151 }
152
153 dd {
154   margin-bottom: .5rem;
155   margin-left: 0; // Undo browser default
156 }
157
158 blockquote {
159   margin: 0 0 1rem;
160 }
161
162 dfn {
163   font-style: italic; // Add the correct font style in Android 4.3-
164 }
165
166 // stylelint-disable font-weight-notation
167 b,
168 strong {
169   font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
170 }
171 // stylelint-enable font-weight-notation
172
173 small {
174   font-size: 80%; // Add the correct font size in all browsers
175 }
176
177 //
178 // Prevent `sub` and `sup` elements from affecting the line height in
179 // all browsers.
180 //
181
182 sub,
183 sup {
184   position: relative;
185   font-size: 75%;
186   line-height: 0;
187   vertical-align: baseline;
188 }
189
190 sub { bottom: -.25em; }
191 sup { top: -.5em; }
192
193
194 //
195 // Links
196 //
197
198 a {
199   color: $link-color;
200   text-decoration: $link-decoration;
201   background-color: transparent; // Remove the gray background on active links in IE 10.
202   -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.
203
204   @include hover {
205     color: $link-hover-color;
206     text-decoration: $link-hover-decoration;
207   }
208 }
209
210 // And undo these styles for placeholder links/named anchors (without href)
211 // which have not been made explicitly keyboard-focusable (without tabindex).
212 // It would be more straightforward to just use a[href] in previous block, but that
213 // causes specificity issues in many other styles that are too complex to fix.
214 // See https://github.com/twbs/bootstrap/issues/19402
215
216 a:not([href]):not([tabindex]) {
217   color: inherit;
218   text-decoration: none;
219
220   @include hover-focus {
221     color: inherit;
222     text-decoration: none;
223   }
224
225   &:focus {
226     outline: 0;
227   }
228 }
229
230
231 //
232 // Code
233 //
234
235 // stylelint-disable font-family-no-duplicate-names
236 pre,
237 code,
238 kbd,
239 samp {
240   font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers.
241   font-size: 1em; // Correct the odd `em` font sizing in all browsers.
242 }
243 // stylelint-enable font-family-no-duplicate-names
244
245 pre {
246   // Remove browser default top margin
247   margin-top: 0;
248   // Reset browser default of `1em` to use `rem`s
249   margin-bottom: 1rem;
250   // Don't allow content to break outside
251   overflow: auto;
252   // We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so
253   // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
254   -ms-overflow-style: scrollbar;
255 }
256
257
258 //
259 // Figures
260 //
261
262 figure {
263   // Apply a consistent margin strategy (matches our type styles).
264   margin: 0 0 1rem;
265 }
266
267
268 //
269 // Images and content
270 //
271
272 img {
273   vertical-align: middle;
274   border-style: none; // Remove the border on images inside links in IE 10-.
275 }
276
277 svg:not(:root) {
278   overflow: hidden; // Hide the overflow in IE
279 }
280
281
282 // Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
283 //
284 // In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
285 // DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
286 // However, they DO support removing the click delay via `touch-action: manipulation`.
287 // See:
288 // * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
289 // * https://caniuse.com/#feat=css-touch-action
290 // * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
291
292 a,
293 area,
294 button,
295 [role="button"],
296 input:not([type="range"]),
297 label,
298 select,
299 summary,
300 textarea {
301   touch-action: manipulation;
302 }
303
304
305 //
306 // Tables
307 //
308
309 table {
310   border-collapse: collapse; // Prevent double borders
311 }
312
313 caption {
314   padding-top: $table-cell-padding;
315   padding-bottom: $table-cell-padding;
316   color: $text-muted;
317   text-align: left;
318   caption-side: bottom;
319 }
320
321 th {
322   // Matches default `<td>` alignment by inheriting from the `<body>`, or the
323   // closest parent with a set `text-align`.
324   text-align: inherit;
325 }
326
327
328 //
329 // Forms
330 //
331
332 label {
333   // Allow labels to use `margin` for spacing.
334   display: inline-block;
335   margin-bottom: .5rem;
336 }
337
338 // Remove the default `border-radius` that macOS Chrome adds.
339 //
340 // Details at https://github.com/twbs/bootstrap/issues/24093
341 button {
342   border-radius: 0;
343 }
344
345 // Work around a Firefox/IE bug where the transparent `button` background
346 // results in a loss of the default `button` focus styles.
347 //
348 // Credit: https://github.com/suitcss/base/
349 button:focus {
350   outline: 1px dotted;
351   outline: 5px auto -webkit-focus-ring-color;
352 }
353
354 input,
355 button,
356 select,
357 optgroup,
358 textarea {
359   margin: 0; // Remove the margin in Firefox and Safari
360   font-family: inherit;
361   font-size: inherit;
362   line-height: inherit;
363 }
364
365 button,
366 input {
367   overflow: visible; // Show the overflow in Edge
368 }
369
370 button,
371 select {
372   text-transform: none; // Remove the inheritance of text transform in Firefox
373 }
374
375 // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
376 //    controls in Android 4.
377 // 2. Correct the inability to style clickable types in iOS and Safari.
378 button,
379 html [type="button"], // 1
380 [type="reset"],
381 [type="submit"] {
382   -webkit-appearance: button; // 2
383 }
384
385 // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
386 button::-moz-focus-inner,
387 [type="button"]::-moz-focus-inner,
388 [type="reset"]::-moz-focus-inner,
389 [type="submit"]::-moz-focus-inner {
390   padding: 0;
391   border-style: none;
392 }
393
394 input[type="radio"],
395 input[type="checkbox"] {
396   box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
397   padding: 0; // 2. Remove the padding in IE 10-
398 }
399
400
401 input[type="date"],
402 input[type="time"],
403 input[type="datetime-local"],
404 input[type="month"] {
405   // Remove the default appearance of temporal inputs to avoid a Mobile Safari
406   // bug where setting a custom line-height prevents text from being vertically
407   // centered within the input.
408   // See https://bugs.webkit.org/show_bug.cgi?id=139848
409   // and https://github.com/twbs/bootstrap/issues/11266
410   -webkit-appearance: listbox;
411 }
412
413 textarea {
414   overflow: auto; // Remove the default vertical scrollbar in IE.
415   // Textareas should really only resize vertically so they don't break their (horizontal) containers.
416   resize: vertical;
417 }
418
419 fieldset {
420   // Browsers set a default `min-width: min-content;` on fieldsets,
421   // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
422   // So we reset that to ensure fieldsets behave more like a standard block element.
423   // See https://github.com/twbs/bootstrap/issues/12359
424   // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
425   min-width: 0;
426   // Reset the default outline behavior of fieldsets so they don't affect page layout.
427   padding: 0;
428   margin: 0;
429   border: 0;
430 }
431
432 // 1. Correct the text wrapping in Edge and IE.
433 // 2. Correct the color inheritance from `fieldset` elements in IE.
434 legend {
435   display: block;
436   width: 100%;
437   max-width: 100%; // 1
438   padding: 0;
439   margin-bottom: .5rem;
440   font-size: 1.5rem;
441   line-height: inherit;
442   color: inherit; // 2
443   white-space: normal; // 1
444 }
445
446 progress {
447   vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
448 }
449
450 // Correct the cursor style of increment and decrement buttons in Chrome.
451 [type="number"]::-webkit-inner-spin-button,
452 [type="number"]::-webkit-outer-spin-button {
453   height: auto;
454 }
455
456 [type="search"] {
457   // This overrides the extra rounded corners on search inputs in iOS so that our
458   // `.form-control` class can properly style them. Note that this cannot simply
459   // be added to `.form-control` as it's not specific enough. For details, see
460   // https://github.com/twbs/bootstrap/issues/11586.
461   outline-offset: -2px; // 2. Correct the outline style in Safari.
462   -webkit-appearance: none;
463 }
464
465 //
466 // Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
467 //
468
469 [type="search"]::-webkit-search-cancel-button,
470 [type="search"]::-webkit-search-decoration {
471   -webkit-appearance: none;
472 }
473
474 //
475 // 1. Correct the inability to style clickable types in iOS and Safari.
476 // 2. Change font properties to `inherit` in Safari.
477 //
478
479 ::-webkit-file-upload-button {
480   font: inherit; // 2
481   -webkit-appearance: button; // 1
482 }
483
484 //
485 // Correct element displays
486 //
487
488 output {
489   display: inline-block;
490 }
491
492 summary {
493   display: list-item; // Add the correct display in all browsers
494   cursor: pointer;
495 }
496
497 template {
498   display: none; // Add the correct display in IE
499 }
500
501 // Always hide an element with the `hidden` HTML attribute (from PureCSS).
502 // Needed for proper display in IE 10-.
503 [hidden] {
504   display: none !important;
505 }