_reboot.scss 11 KB

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