_reboot.scss 11 KB

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