_reboot.scss 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483
  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 {
  226. // Workaround for the SVG overflow bug in IE10/11 is still required.
  227. // See https://github.com/twbs/bootstrap/issues/26878
  228. overflow: hidden;
  229. vertical-align: middle;
  230. }
  231. //
  232. // Tables
  233. //
  234. table {
  235. border-collapse: collapse; // Prevent double borders
  236. }
  237. caption {
  238. padding-top: $table-cell-padding;
  239. padding-bottom: $table-cell-padding;
  240. color: $table-caption-color;
  241. text-align: left;
  242. caption-side: bottom;
  243. }
  244. th {
  245. // Matches default `<td>` alignment by inheriting from the `<body>`, or the
  246. // closest parent with a set `text-align`.
  247. text-align: inherit;
  248. }
  249. //
  250. // Forms
  251. //
  252. label {
  253. // Allow labels to use `margin` for spacing.
  254. display: inline-block;
  255. margin-bottom: $label-margin-bottom;
  256. }
  257. // Remove the default `border-radius` that macOS Chrome adds.
  258. //
  259. // Details at https://github.com/twbs/bootstrap/issues/24093
  260. button {
  261. border-radius: 0;
  262. }
  263. // Work around a Firefox/IE bug where the transparent `button` background
  264. // results in a loss of the default `button` focus styles.
  265. //
  266. // Credit: https://github.com/suitcss/base/
  267. button:focus {
  268. outline: 1px dotted;
  269. outline: 5px auto -webkit-focus-ring-color;
  270. }
  271. input,
  272. button,
  273. select,
  274. optgroup,
  275. textarea {
  276. margin: 0; // Remove the margin in Firefox and Safari
  277. font-family: inherit;
  278. font-size: inherit;
  279. line-height: inherit;
  280. }
  281. button,
  282. input {
  283. overflow: visible; // Show the overflow in Edge
  284. }
  285. button,
  286. select {
  287. text-transform: none; // Remove the inheritance of text transform in Firefox
  288. }
  289. // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
  290. // controls in Android 4.
  291. // 2. Correct the inability to style clickable types in iOS and Safari.
  292. button,
  293. html [type="button"], // 1
  294. [type="reset"],
  295. [type="submit"] {
  296. -webkit-appearance: button; // 2
  297. }
  298. // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
  299. button::-moz-focus-inner,
  300. [type="button"]::-moz-focus-inner,
  301. [type="reset"]::-moz-focus-inner,
  302. [type="submit"]::-moz-focus-inner {
  303. padding: 0;
  304. border-style: none;
  305. }
  306. input[type="radio"],
  307. input[type="checkbox"] {
  308. box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
  309. padding: 0; // 2. Remove the padding in IE 10-
  310. }
  311. input[type="date"],
  312. input[type="time"],
  313. input[type="datetime-local"],
  314. input[type="month"] {
  315. // Remove the default appearance of temporal inputs to avoid a Mobile Safari
  316. // bug where setting a custom line-height prevents text from being vertically
  317. // centered within the input.
  318. // See https://bugs.webkit.org/show_bug.cgi?id=139848
  319. // and https://github.com/twbs/bootstrap/issues/11266
  320. -webkit-appearance: listbox;
  321. }
  322. textarea {
  323. overflow: auto; // Remove the default vertical scrollbar in IE.
  324. // Textareas should really only resize vertically so they don't break their (horizontal) containers.
  325. resize: vertical;
  326. }
  327. fieldset {
  328. // Browsers set a default `min-width: min-content;` on fieldsets,
  329. // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
  330. // So we reset that to ensure fieldsets behave more like a standard block element.
  331. // See https://github.com/twbs/bootstrap/issues/12359
  332. // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
  333. min-width: 0;
  334. // Reset the default outline behavior of fieldsets so they don't affect page layout.
  335. padding: 0;
  336. margin: 0;
  337. border: 0;
  338. }
  339. // 1. Correct the text wrapping in Edge and IE.
  340. // 2. Correct the color inheritance from `fieldset` elements in IE.
  341. legend {
  342. display: block;
  343. width: 100%;
  344. max-width: 100%; // 1
  345. padding: 0;
  346. margin-bottom: .5rem;
  347. font-size: 1.5rem;
  348. line-height: inherit;
  349. color: inherit; // 2
  350. white-space: normal; // 1
  351. }
  352. progress {
  353. vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
  354. }
  355. // Correct the cursor style of increment and decrement buttons in Chrome.
  356. [type="number"]::-webkit-inner-spin-button,
  357. [type="number"]::-webkit-outer-spin-button {
  358. height: auto;
  359. }
  360. [type="search"] {
  361. // This overrides the extra rounded corners on search inputs in iOS so that our
  362. // `.form-control` class can properly style them. Note that this cannot simply
  363. // be added to `.form-control` as it's not specific enough. For details, see
  364. // https://github.com/twbs/bootstrap/issues/11586.
  365. outline-offset: -2px; // 2. Correct the outline style in Safari.
  366. -webkit-appearance: none;
  367. }
  368. //
  369. // Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
  370. //
  371. [type="search"]::-webkit-search-cancel-button,
  372. [type="search"]::-webkit-search-decoration {
  373. -webkit-appearance: none;
  374. }
  375. //
  376. // 1. Correct the inability to style clickable types in iOS and Safari.
  377. // 2. Change font properties to `inherit` in Safari.
  378. //
  379. ::-webkit-file-upload-button {
  380. font: inherit; // 2
  381. -webkit-appearance: button; // 1
  382. }
  383. //
  384. // Correct element displays
  385. //
  386. output {
  387. display: inline-block;
  388. }
  389. summary {
  390. display: list-item; // Add the correct display in all browsers
  391. cursor: pointer;
  392. }
  393. template {
  394. display: none; // Add the correct display in IE
  395. }
  396. // Always hide an element with the `hidden` HTML attribute (from PureCSS).
  397. // Needed for proper display in IE 10-.
  398. [hidden] {
  399. display: none !important;
  400. }