]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | // scss-lint:disable QualifyingElement, DuplicateProperty |
2 | ||
3 | // Reboot | |
4 | // | |
5 | // Global resets to common HTML elements and more for easier usage by Bootstrap. | |
6 | // Adds additional rules on top of Normalize.css, including several overrides. | |
7 | ||
8 | ||
9 | // Reset the box-sizing | |
10 | // | |
11 | // Change from `box-sizing: content-box` to `border-box` so that when you add | |
12 | // `padding` or `border`s to an element, the overall declared `width` does not | |
13 | // change. For example, `width: 100px;` will always be `100px` despite the | |
14 | // `border: 10px solid red;` and `padding: 20px;`. | |
15 | // | |
16 | // Heads up! This reset may cause conflicts with some third-party widgets. For | |
17 | // recommendations on resolving such conflicts, see | |
18 | // https://getbootstrap.com/getting-started/#third-box-sizing. | |
19 | // | |
20 | // Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ | |
21 | ||
22 | html { | |
23 | box-sizing: border-box; | |
24 | } | |
25 | ||
26 | *, | |
27 | *::before, | |
28 | *::after { | |
29 | box-sizing: inherit; | |
30 | } | |
31 | ||
32 | ||
33 | // Make viewport responsive | |
34 | // | |
35 | // @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in | |
36 | // some cases. See https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/. | |
37 | // Eventually @viewport will replace <meta name="viewport">. | |
38 | // | |
39 | // However, `device-width` is broken on IE 10 on Windows (Phone) 8, | |
40 | // (see https://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497) | |
41 | // and the fix for that involves a snippet of JavaScript to sniff the user agent | |
42 | // and apply some conditional CSS. | |
43 | // | |
44 | // See https://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack. | |
45 | // | |
46 | // Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g., | |
47 | // `.class-name { @import "bootstrap"; }`). | |
48 | @at-root { | |
49 | @-ms-viewport { width: device-width; } | |
50 | } | |
51 | ||
52 | ||
53 | // | |
54 | // Reset HTML, body, and more | |
55 | // | |
56 | ||
57 | html { | |
58 | // We assume no initial pixel `font-size` for accessibility reasons. This | |
59 | // allows web visitors to customize their browser default font-size, making | |
60 | // your project more inclusive and accessible to everyone. | |
61 | ||
62 | // As a side-effect of setting the @viewport above, | |
63 | // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use. | |
64 | // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive, | |
65 | // thus making it hard to click on stuff near the right edge of the page. | |
66 | // So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar. | |
67 | // See https://github.com/twbs/bootstrap/issues/18543 | |
68 | // and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383/ | |
69 | -ms-overflow-style: scrollbar; | |
70 | ||
71 | // Changes the default tap highlight to be completely transparent in iOS. | |
72 | -webkit-tap-highlight-color: rgba(0,0,0,0); | |
73 | } | |
74 | ||
75 | body { | |
76 | font-family: $font-family-base; | |
77 | font-size: $font-size-base; | |
78 | font-weight: $font-weight-base; | |
79 | line-height: $line-height-base; | |
80 | // Go easy on the eyes and use something other than `#000` for text | |
81 | color: $body-color; | |
82 | // By default, `<body>` has no `background-color` so we set one as a best practice. | |
83 | background-color: $body-bg; | |
84 | } | |
85 | ||
86 | // Suppress the focus outline on elements that cannot be accessed via keyboard. | |
87 | // This prevents an unwanted focus outline from appearing around elements that | |
88 | // might still respond to pointer events. | |
89 | // | |
90 | // Credit: https://github.com/suitcss/base | |
91 | [tabindex="-1"]:focus { | |
92 | outline: none !important; | |
93 | } | |
94 | ||
95 | ||
96 | // | |
97 | // Typography | |
98 | // | |
99 | ||
100 | // Remove top margins from headings | |
101 | // | |
102 | // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top | |
103 | // margin for easier control within type scales as it avoids margin collapsing. | |
104 | h1, h2, h3, h4, h5, h6 { | |
105 | margin-top: 0; | |
106 | margin-bottom: .5rem; | |
107 | } | |
108 | ||
109 | // Reset margins on paragraphs | |
110 | // | |
111 | // Similarly, the top margin on `<p>`s get reset. However, we also reset the | |
112 | // bottom margin to use `rem` units instead of `em`. | |
113 | p { | |
114 | margin-top: 0; | |
115 | margin-bottom: 1rem; | |
116 | } | |
117 | ||
118 | // Abbreviations | |
119 | abbr[title], | |
120 | // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 | |
121 | abbr[data-original-title] { | |
122 | cursor: help; | |
123 | } | |
124 | ||
125 | address { | |
126 | margin-bottom: 1rem; | |
127 | font-style: normal; | |
128 | line-height: inherit; | |
129 | } | |
130 | ||
131 | ol, | |
132 | ul, | |
133 | dl { | |
134 | margin-top: 0; | |
135 | margin-bottom: 1rem; | |
136 | } | |
137 | ||
138 | ol ol, | |
139 | ul ul, | |
140 | ol ul, | |
141 | ul ol { | |
142 | margin-bottom: 0; | |
143 | } | |
144 | ||
145 | dt { | |
146 | font-weight: $dt-font-weight; | |
147 | } | |
148 | ||
149 | dd { | |
150 | margin-bottom: .5rem; | |
151 | margin-left: 0; // Undo browser default | |
152 | } | |
153 | ||
154 | blockquote { | |
155 | margin: 0 0 1rem; | |
156 | } | |
157 | ||
158 | ||
159 | // | |
160 | // Links | |
161 | // | |
162 | ||
163 | a { | |
164 | color: $link-color; | |
165 | text-decoration: $link-decoration; | |
166 | ||
167 | @include hover-focus { | |
168 | color: $link-hover-color; | |
169 | text-decoration: $link-hover-decoration; | |
170 | } | |
171 | } | |
172 | ||
173 | // And undo these styles for placeholder links/named anchors (without href) | |
174 | // which have not been made explicitly keyboard-focusable (without tabindex). | |
175 | // It would be more straightforward to just use a[href] in previous block, but that | |
176 | // causes specificity issues in many other styles that are too complex to fix. | |
177 | // See https://github.com/twbs/bootstrap/issues/19402 | |
178 | ||
179 | a:not([href]):not([tabindex]) { | |
180 | color: inherit; | |
181 | text-decoration: none; | |
182 | ||
183 | @include hover-focus { | |
184 | color: inherit; | |
185 | text-decoration: none; | |
186 | } | |
187 | ||
188 | &:focus { | |
189 | outline: 0; | |
190 | } | |
191 | } | |
192 | ||
193 | ||
194 | // | |
195 | // Code | |
196 | // | |
197 | ||
198 | pre { | |
199 | // Remove browser default top margin | |
200 | margin-top: 0; | |
201 | // Reset browser default of `1em` to use `rem`s | |
202 | margin-bottom: 1rem; | |
203 | // Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets | |
204 | overflow: auto; | |
205 | } | |
206 | ||
207 | ||
208 | // | |
209 | // Figures | |
210 | // | |
211 | ||
212 | figure { | |
213 | // Normalize adds `margin` to `figure`s as browsers apply it inconsistently. | |
214 | // We reset that to create a better flow in-page. | |
215 | margin: 0 0 1rem; | |
216 | } | |
217 | ||
218 | ||
219 | // | |
220 | // Images | |
221 | // | |
222 | ||
223 | img { | |
224 | // By default, `<img>`s are `inline-block`. This assumes that, and vertically | |
225 | // centers them. This won't apply should you reset them to `block` level. | |
226 | vertical-align: middle; | |
227 | // Note: `<img>`s are deliberately not made responsive by default. | |
228 | // For the rationale behind this, see the comments on the `.img-fluid` class. | |
229 | } | |
230 | ||
231 | ||
232 | // iOS "clickable elements" fix for role="button" | |
233 | // | |
234 | // Fixes "clickability" issue (and more generally, the firing of events such as focus as well) | |
235 | // for traditionally non-focusable elements with role="button" | |
236 | // see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile | |
237 | ||
238 | [role="button"] { | |
239 | cursor: pointer; | |
240 | } | |
241 | ||
242 | ||
243 | // Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. | |
244 | // | |
245 | // In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11 | |
246 | // DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present. | |
247 | // However, they DO support removing the click delay via `touch-action: manipulation`. | |
248 | // See: | |
249 | // * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch | |
250 | // * http://caniuse.com/#feat=css-touch-action | |
251 | // * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay | |
252 | ||
253 | a, | |
254 | area, | |
255 | button, | |
256 | [role="button"], | |
257 | input, | |
258 | label, | |
259 | select, | |
260 | summary, | |
261 | textarea { | |
262 | touch-action: manipulation; | |
263 | } | |
264 | ||
265 | ||
266 | // | |
267 | // Tables | |
268 | // | |
269 | ||
270 | table { | |
271 | // No longer part of Normalize since v4 | |
272 | border-collapse: collapse; | |
273 | // Reset for nesting within parents with `background-color`. | |
274 | background-color: $table-bg; | |
275 | } | |
276 | ||
277 | caption { | |
278 | padding-top: $table-cell-padding; | |
279 | padding-bottom: $table-cell-padding; | |
280 | color: $text-muted; | |
281 | text-align: left; | |
282 | caption-side: bottom; | |
283 | } | |
284 | ||
285 | th { | |
286 | // Centered by default, but left-align-ed to match the `td`s below. | |
287 | text-align: left; | |
288 | } | |
289 | ||
290 | ||
291 | // | |
292 | // Forms | |
293 | // | |
294 | ||
295 | label { | |
296 | // Allow labels to use `margin` for spacing. | |
297 | display: inline-block; | |
298 | margin-bottom: .5rem; | |
299 | } | |
300 | ||
301 | // Work around a Firefox/IE bug where the transparent `button` background | |
302 | // results in a loss of the default `button` focus styles. | |
303 | // | |
304 | // Credit: https://github.com/suitcss/base/ | |
305 | button:focus { | |
306 | outline: 1px dotted; | |
307 | outline: 5px auto -webkit-focus-ring-color; | |
308 | } | |
309 | ||
310 | input, | |
311 | button, | |
312 | select, | |
313 | textarea { | |
314 | // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are | |
315 | // properly inherited. However, `line-height` isn't inherited there. | |
316 | line-height: inherit; | |
317 | } | |
318 | ||
319 | input[type="radio"], | |
320 | input[type="checkbox"] { | |
321 | // Apply a disabled cursor for radios and checkboxes. | |
322 | // | |
323 | // Note: Neither radios nor checkboxes can be readonly. | |
324 | &:disabled { | |
325 | cursor: $cursor-disabled; | |
326 | } | |
327 | } | |
328 | ||
329 | ||
330 | input[type="date"], | |
331 | input[type="time"], | |
332 | input[type="datetime-local"], | |
333 | input[type="month"] { | |
334 | // Remove the default appearance of temporal inputs to avoid a Mobile Safari | |
335 | // bug where setting a custom line-height prevents text from being vertically | |
336 | // centered within the input. | |
337 | // See https://bugs.webkit.org/show_bug.cgi?id=139848 | |
338 | // and https://github.com/twbs/bootstrap/issues/11266 | |
339 | -webkit-appearance: listbox; | |
340 | } | |
341 | ||
342 | textarea { | |
343 | // Textareas should really only resize vertically so they don't break their (horizontal) containers. | |
344 | resize: vertical; | |
345 | } | |
346 | ||
347 | fieldset { | |
348 | // Browsers set a default `min-width: min-content;` on fieldsets, | |
349 | // unlike e.g. `<div>`s, which have `min-width: 0;` by default. | |
350 | // So we reset that to ensure fieldsets behave more like a standard block element. | |
351 | // See https://github.com/twbs/bootstrap/issues/12359 | |
352 | // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements | |
353 | min-width: 0; | |
354 | // Reset the default outline behavior of fieldsets so they don't affect page layout. | |
355 | padding: 0; | |
356 | margin: 0; | |
357 | border: 0; | |
358 | } | |
359 | ||
360 | legend { | |
361 | // Reset the entire legend element to match the `fieldset` | |
362 | display: block; | |
363 | width: 100%; | |
364 | padding: 0; | |
365 | margin-bottom: .5rem; | |
366 | font-size: 1.5rem; | |
367 | line-height: inherit; | |
368 | } | |
369 | ||
370 | input[type="search"] { | |
371 | // This overrides the extra rounded corners on search inputs in iOS so that our | |
372 | // `.form-control` class can properly style them. Note that this cannot simply | |
373 | // be added to `.form-control` as it's not specific enough. For details, see | |
374 | // https://github.com/twbs/bootstrap/issues/11586. | |
375 | -webkit-appearance: none; | |
376 | } | |
377 | ||
378 | // todo: needed? | |
379 | output { | |
380 | display: inline-block; | |
381 | // font-size: $font-size-base; | |
382 | // line-height: $line-height; | |
383 | // color: $input-color; | |
384 | } | |
385 | ||
386 | // Always hide an element with the `hidden` HTML attribute (from PureCSS). | |
387 | [hidden] { | |
388 | display: none !important; | |
389 | } |