_reboot.scss — VK Blocks 0.16.2

vk-blocks / lib / bootstrap / scss / _reboot.scss

vk-blocks / lib / bootstrap / scss Last commit date

_reboot.scss

484 lines

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