_reboot.less 11 KB

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