_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. 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, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  30. display: block;
  31. }
  32. // Body
  33. //
  34. // 1. Remove the margin in all browsers.
  35. // 2. As a best practice, apply a default `background-color`.
  36. // 3. Set an explicit initial text-align value so that we can later use
  37. // the `inherit` value on things like `<th>` elements.
  38. body {
  39. margin: 0; // 1
  40. font-family: $font-family-base;
  41. @include font-size($font-size-base);
  42. font-weight: $font-weight-base;
  43. line-height: $line-height-base;
  44. color: $body-color;
  45. text-align: left; // 3
  46. background-color: $body-bg; // 2
  47. }
  48. // Suppress the focus outline on elements that cannot be accessed via keyboard.
  49. // This prevents an unwanted focus outline from appearing around elements that
  50. // might still respond to pointer events.
  51. //
  52. // Credit: https://github.com/suitcss/base
  53. [tabindex="-1"]:focus {
  54. outline: 0 !important;
  55. }
  56. // Content grouping
  57. //
  58. // 1. Add the correct box sizing in Firefox.
  59. // 2. Show the overflow in Edge and IE.
  60. hr {
  61. box-sizing: content-box; // 1
  62. height: 0; // 1
  63. overflow: visible; // 2
  64. }
  65. //
  66. // Typography
  67. //
  68. // Remove top margins from headings
  69. //
  70. // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
  71. // margin for easier control within type scales as it avoids margin collapsing.
  72. // stylelint-disable-next-line selector-list-comma-newline-after
  73. h1, h2, h3, h4, h5, h6 {
  74. margin-top: 0;
  75. margin-bottom: $headings-margin-bottom;
  76. }
  77. // Reset margins on paragraphs
  78. //
  79. // Similarly, the top margin on `<p>`s get reset. However, we also reset the
  80. // bottom margin to use `rem` units instead of `em`.
  81. p {
  82. margin-top: 0;
  83. margin-bottom: $paragraph-margin-bottom;
  84. }
  85. // Abbreviations
  86. //
  87. // 1. Duplicate behavior to the data-* attribute for our tooltip plugin
  88. // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  89. // 3. Add explicit cursor to indicate changed behavior.
  90. // 4. Remove the bottom border in Firefox 39-.
  91. // 5. Prevent the text-decoration to be skipped.
  92. abbr[title],
  93. abbr[data-original-title] { // 1
  94. text-decoration: underline; // 2
  95. text-decoration: underline dotted; // 2
  96. cursor: help; // 3
  97. border-bottom: 0; // 4
  98. text-decoration-skip-ink: none; // 5
  99. }
  100. address {
  101. margin-bottom: 1rem;
  102. font-style: normal;
  103. line-height: inherit;
  104. }
  105. ol,
  106. ul,
  107. dl {
  108. margin-top: 0;
  109. margin-bottom: 1rem;
  110. }
  111. ol ol,
  112. ul ul,
  113. ol ul,
  114. ul ol {
  115. margin-bottom: 0;
  116. }
  117. dt {
  118. font-weight: $dt-font-weight;
  119. }
  120. dd {
  121. margin-bottom: .5rem;
  122. margin-left: 0; // Undo browser default
  123. }
  124. blockquote {
  125. margin: 0 0 1rem;
  126. }
  127. b,
  128. strong {
  129. font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari
  130. }
  131. small {
  132. @include font-size(80%); // Add the correct font size in all browsers
  133. }
  134. //
  135. // Prevent `sub` and `sup` elements from affecting the line height in
  136. // all browsers.
  137. //
  138. sub,
  139. sup {
  140. position: relative;
  141. @include font-size(75%);
  142. line-height: 0;
  143. vertical-align: baseline;
  144. }
  145. sub { bottom: -.25em; }
  146. sup { top: -.5em; }
  147. //
  148. // Links
  149. //
  150. a {
  151. color: $link-color;
  152. text-decoration: $link-decoration;
  153. background-color: transparent; // Remove the gray background on active links in IE 10.
  154. @include hover {
  155. color: $link-hover-color;
  156. text-decoration: $link-hover-decoration;
  157. }
  158. }
  159. // And undo these styles for placeholder links/named anchors (without href)
  160. // which have not been made explicitly keyboard-focusable (without tabindex).
  161. // It would be more straightforward to just use a[href] in previous block, but that
  162. // causes specificity issues in many other styles that are too complex to fix.
  163. // See https://github.com/twbs/bootstrap/issues/19402
  164. a:not([href]):not([tabindex]) {
  165. color: inherit;
  166. text-decoration: none;
  167. @include hover-focus {
  168. color: inherit;
  169. text-decoration: none;
  170. }
  171. &:focus {
  172. outline: 0;
  173. }
  174. }
  175. //
  176. // Code
  177. //
  178. pre,
  179. code,
  180. kbd,
  181. samp {
  182. font-family: $font-family-monospace;
  183. @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
  184. }
  185. pre {
  186. // Remove browser default top margin
  187. margin-top: 0;
  188. // Reset browser default of `1em` to use `rem`s
  189. margin-bottom: 1rem;
  190. // Don't allow content to break outside
  191. overflow: auto;
  192. }
  193. //
  194. // Figures
  195. //
  196. figure {
  197. // Apply a consistent margin strategy (matches our type styles).
  198. margin: 0 0 1rem;
  199. }
  200. //
  201. // Images and content
  202. //
  203. img {
  204. vertical-align: middle;
  205. border-style: none; // Remove the border on images inside links in IE 10-.
  206. }
  207. svg {
  208. // Workaround for the SVG overflow bug in IE10/11 is still required.
  209. // See https://github.com/twbs/bootstrap/issues/26878
  210. overflow: hidden;
  211. vertical-align: middle;
  212. }
  213. //
  214. // Tables
  215. //
  216. table {
  217. border-collapse: collapse; // Prevent double borders
  218. }
  219. caption {
  220. padding-top: $table-cell-padding;
  221. padding-bottom: $table-cell-padding;
  222. color: $table-caption-color;
  223. text-align: left;
  224. caption-side: bottom;
  225. }
  226. th {
  227. // Matches default `<td>` alignment by inheriting from the `<body>`, or the
  228. // closest parent with a set `text-align`.
  229. text-align: inherit;
  230. }
  231. //
  232. // Forms
  233. //
  234. label {
  235. // Allow labels to use `margin` for spacing.
  236. display: inline-block;
  237. margin-bottom: $label-margin-bottom;
  238. }
  239. // Remove the default `border-radius` that macOS Chrome adds.
  240. //
  241. // Details at https://github.com/twbs/bootstrap/issues/24093
  242. button {
  243. // stylelint-disable-next-line property-blacklist
  244. border-radius: 0;
  245. }
  246. // Work around a Firefox/IE bug where the transparent `button` background
  247. // results in a loss of the default `button` focus styles.
  248. //
  249. // Credit: https://github.com/suitcss/base/
  250. button:focus {
  251. outline: 1px dotted;
  252. outline: 5px auto -webkit-focus-ring-color;
  253. }
  254. input,
  255. button,
  256. select,
  257. optgroup,
  258. textarea {
  259. margin: 0; // Remove the margin in Firefox and Safari
  260. font-family: inherit;
  261. @include font-size(inherit);
  262. line-height: inherit;
  263. }
  264. button,
  265. input {
  266. overflow: visible; // Show the overflow in Edge
  267. }
  268. button,
  269. select {
  270. text-transform: none; // Remove the inheritance of text transform in Firefox
  271. }
  272. // Remove the inheritance of word-wrap in Safari.
  273. //
  274. // Details at https://github.com/twbs/bootstrap/issues/24990
  275. select {
  276. word-wrap: normal;
  277. }
  278. // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
  279. // controls in Android 4.
  280. // 2. Correct the inability to style clickable types in iOS and Safari.
  281. button,
  282. [type="button"], // 1
  283. [type="reset"],
  284. [type="submit"] {
  285. -webkit-appearance: button; // 2
  286. }
  287. // Opinionated: add "hand" cursor to non-disabled button elements.
  288. @if $enable-pointer-cursor-for-buttons {
  289. button,
  290. [type="button"],
  291. [type="reset"],
  292. [type="submit"] {
  293. &:not(:disabled) {
  294. cursor: pointer;
  295. }
  296. }
  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. @include 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 in Chrome and Safari on macOS.
  370. //
  371. [type="search"]::-webkit-search-decoration {
  372. -webkit-appearance: none;
  373. }
  374. //
  375. // 1. Correct the inability to style clickable types in iOS and Safari.
  376. // 2. Change font properties to `inherit` in Safari.
  377. //
  378. ::-webkit-file-upload-button {
  379. font: inherit; // 2
  380. -webkit-appearance: button; // 1
  381. }
  382. //
  383. // Correct element displays
  384. //
  385. output {
  386. display: inline-block;
  387. }
  388. summary {
  389. display: list-item; // Add the correct display in all browsers
  390. cursor: pointer;
  391. }
  392. template {
  393. display: none; // Add the correct display in IE
  394. }
  395. // Always hide an element with the `hidden` HTML attribute (from PureCSS).
  396. // Needed for proper display in IE 10-.
  397. [hidden] {
  398. display: none !important;
  399. }