You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

625 lines
12 KiB

  1. // stylelint-disable 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. // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
  11. *,
  12. *::before,
  13. *::after {
  14. box-sizing: border-box;
  15. }
  16. // Root
  17. //
  18. // Ability to the value of the root font sizes, affecting the value of `rem`.
  19. // null by default, thus nothing is generated.
  20. :root {
  21. @if $font-size-root != null {
  22. font-size: var(--#{$variable-prefix}root-font-size);
  23. }
  24. @if $enable-smooth-scroll {
  25. @media (prefers-reduced-motion: no-preference) {
  26. scroll-behavior: smooth;
  27. }
  28. }
  29. }
  30. // Body
  31. //
  32. // 1. Remove the margin in all browsers.
  33. // 2. As a best practice, apply a default `background-color`.
  34. // 3. Prevent adjustments of font size after orientation changes in iOS.
  35. // 4. Change the default tap highlight to be completely transparent in iOS.
  36. // scss-docs-start reboot-body-rules
  37. body {
  38. margin: 0; // 1
  39. font-family: var(--#{$variable-prefix}body-font-family);
  40. @include font-size(var(--#{$variable-prefix}body-font-size));
  41. font-weight: var(--#{$variable-prefix}body-font-weight);
  42. line-height: var(--#{$variable-prefix}body-line-height);
  43. color: var(--#{$variable-prefix}body-color);
  44. text-align: var(--#{$variable-prefix}body-text-align);
  45. background-color: var(--#{$variable-prefix}body-bg); // 2
  46. -webkit-text-size-adjust: 100%; // 3
  47. -webkit-tap-highlight-color: rgba($black, 0); // 4
  48. }
  49. // scss-docs-end reboot-body-rules
  50. // Content grouping
  51. //
  52. // 1. Reset Firefox's gray color
  53. // 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
  54. hr {
  55. margin: $hr-margin-y 0;
  56. color: $hr-color; // 1
  57. background-color: currentColor;
  58. border: 0;
  59. opacity: $hr-opacity;
  60. }
  61. hr:not([size]) {
  62. height: $hr-height; // 2
  63. }
  64. // Typography
  65. //
  66. // 1. Remove top margins from headings
  67. // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
  68. // margin for easier control within type scales as it avoids margin collapsing.
  69. %heading {
  70. margin-top: 0; // 1
  71. margin-bottom: $headings-margin-bottom;
  72. font-family: $headings-font-family;
  73. font-style: $headings-font-style;
  74. font-weight: $headings-font-weight;
  75. line-height: $headings-line-height;
  76. color: $headings-color;
  77. }
  78. h1 {
  79. @extend %heading;
  80. @include font-size($h1-font-size);
  81. }
  82. h2 {
  83. @extend %heading;
  84. @include font-size($h2-font-size);
  85. }
  86. h3 {
  87. @extend %heading;
  88. @include font-size($h3-font-size);
  89. }
  90. h4 {
  91. @extend %heading;
  92. @include font-size($h4-font-size);
  93. }
  94. h5 {
  95. @extend %heading;
  96. @include font-size($h5-font-size);
  97. }
  98. h6 {
  99. @extend %heading;
  100. @include font-size($h6-font-size);
  101. }
  102. // Reset margins on paragraphs
  103. //
  104. // Similarly, the top margin on `<p>`s get reset. However, we also reset the
  105. // bottom margin to use `rem` units instead of `em`.
  106. p {
  107. margin-top: 0;
  108. margin-bottom: $paragraph-margin-bottom;
  109. }
  110. // Abbreviations
  111. //
  112. // 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
  113. // 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
  114. // 3. Add explicit cursor to indicate changed behavior.
  115. // 4. Prevent the text-decoration to be skipped.
  116. abbr[title],
  117. abbr[data-bs-original-title] { // 1
  118. text-decoration: underline dotted; // 2
  119. cursor: help; // 3
  120. text-decoration-skip-ink: none; // 4
  121. }
  122. // Address
  123. address {
  124. margin-bottom: 1rem;
  125. font-style: normal;
  126. line-height: inherit;
  127. }
  128. // Lists
  129. ol,
  130. ul {
  131. padding-left: 2rem;
  132. }
  133. ol,
  134. ul,
  135. dl {
  136. margin-top: 0;
  137. margin-bottom: 1rem;
  138. }
  139. ol ol,
  140. ul ul,
  141. ol ul,
  142. ul ol {
  143. margin-bottom: 0;
  144. }
  145. dt {
  146. font-weight: $dt-font-weight;
  147. }
  148. // 1. Undo browser default
  149. dd {
  150. margin-bottom: .5rem;
  151. margin-left: 0; // 1
  152. }
  153. // Blockquote
  154. blockquote {
  155. margin: 0 0 1rem;
  156. }
  157. // Strong
  158. //
  159. // Add the correct font weight in Chrome, Edge, and Safari
  160. b,
  161. strong {
  162. font-weight: $font-weight-bolder;
  163. }
  164. // Small
  165. //
  166. // Add the correct font size in all browsers
  167. small {
  168. @include font-size($small-font-size);
  169. }
  170. // Mark
  171. mark {
  172. padding: $mark-padding;
  173. background-color: $mark-bg;
  174. }
  175. // Sub and Sup
  176. //
  177. // Prevent `sub` and `sup` elements from affecting the line height in
  178. // all browsers.
  179. sub,
  180. sup {
  181. position: relative;
  182. @include font-size($sub-sup-font-size);
  183. line-height: 0;
  184. vertical-align: baseline;
  185. }
  186. sub { bottom: -.25em; }
  187. sup { top: -.5em; }
  188. // Links
  189. a {
  190. color: $link-color;
  191. text-decoration: $link-decoration;
  192. &:hover {
  193. color: $link-hover-color;
  194. text-decoration: $link-hover-decoration;
  195. }
  196. }
  197. // And undo these styles for placeholder links/named anchors (without href).
  198. // It would be more straightforward to just use a[href] in previous block, but that
  199. // causes specificity issues in many other styles that are too complex to fix.
  200. // See https://github.com/twbs/bootstrap/issues/19402
  201. a:not([href]):not([class]) {
  202. &,
  203. &:hover {
  204. color: inherit;
  205. text-decoration: none;
  206. }
  207. }
  208. // Code
  209. pre,
  210. code,
  211. kbd,
  212. samp {
  213. font-family: $font-family-code;
  214. @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
  215. direction: ltr #{"/* rtl:ignore */"};
  216. unicode-bidi: bidi-override;
  217. }
  218. // 1. Remove browser default top margin
  219. // 2. Reset browser default of `1em` to use `rem`s
  220. // 3. Don't allow content to break outside
  221. pre {
  222. display: block;
  223. margin-top: 0; // 1
  224. margin-bottom: 1rem; // 2
  225. overflow: auto; // 3
  226. @include font-size($code-font-size);
  227. color: $pre-color;
  228. // Account for some code outputs that place code tags in pre tags
  229. code {
  230. @include font-size(inherit);
  231. color: inherit;
  232. word-break: normal;
  233. }
  234. }
  235. code {
  236. @include font-size($code-font-size);
  237. color: $code-color;
  238. word-wrap: break-word;
  239. // Streamline the style when inside anchors to avoid broken underline and more
  240. a > & {
  241. color: inherit;
  242. }
  243. }
  244. kbd {
  245. padding: $kbd-padding-y $kbd-padding-x;
  246. @include font-size($kbd-font-size);
  247. color: $kbd-color;
  248. background-color: $kbd-bg;
  249. @include border-radius($border-radius-sm);
  250. kbd {
  251. padding: 0;
  252. @include font-size(1em);
  253. font-weight: $nested-kbd-font-weight;
  254. }
  255. }
  256. // Figures
  257. //
  258. // Apply a consistent margin strategy (matches our type styles).
  259. figure {
  260. margin: 0 0 1rem;
  261. }
  262. // Images and content
  263. img,
  264. svg {
  265. vertical-align: middle;
  266. }
  267. // Tables
  268. //
  269. // Prevent double borders
  270. table {
  271. caption-side: bottom;
  272. border-collapse: collapse;
  273. }
  274. caption {
  275. padding-top: $table-cell-padding-y;
  276. padding-bottom: $table-cell-padding-y;
  277. color: $table-caption-color;
  278. text-align: left;
  279. }
  280. // 1. Removes font-weight bold by inheriting
  281. // 2. Matches default `<td>` alignment by inheriting `text-align`.
  282. // 3. Fix alignment for Safari
  283. th {
  284. font-weight: $table-th-font-weight; // 1
  285. text-align: inherit; // 2
  286. text-align: -webkit-match-parent; // 3
  287. }
  288. thead,
  289. tbody,
  290. tfoot,
  291. tr,
  292. td,
  293. th {
  294. border-color: inherit;
  295. border-style: solid;
  296. border-width: 0;
  297. }
  298. // Forms
  299. //
  300. // 1. Allow labels to use `margin` for spacing.
  301. label {
  302. display: inline-block; // 1
  303. }
  304. // Remove the default `border-radius` that macOS Chrome adds.
  305. // See https://github.com/twbs/bootstrap/issues/24093
  306. button {
  307. // stylelint-disable-next-line property-disallowed-list
  308. border-radius: 0;
  309. }
  310. // Explicitly remove focus outline in Chromium when it shouldn't be
  311. // visible (e.g. as result of mouse click or touch tap). It already
  312. // should be doing this automatically, but seems to currently be
  313. // confused and applies its very visible two-tone outline anyway.
  314. button:focus:not(:focus-visible) {
  315. outline: 0;
  316. }
  317. // 1. Remove the margin in Firefox and Safari
  318. input,
  319. button,
  320. select,
  321. optgroup,
  322. textarea {
  323. margin: 0; // 1
  324. font-family: inherit;
  325. @include font-size(inherit);
  326. line-height: inherit;
  327. }
  328. // Remove the inheritance of text transform in Firefox
  329. button,
  330. select {
  331. text-transform: none;
  332. }
  333. // Set the cursor for non-`<button>` buttons
  334. //
  335. // Details at https://github.com/twbs/bootstrap/pull/30562
  336. [role="button"] {
  337. cursor: pointer;
  338. }
  339. select {
  340. // Remove the inheritance of word-wrap in Safari.
  341. // See https://github.com/twbs/bootstrap/issues/24990
  342. word-wrap: normal;
  343. // Undo the opacity change from Chrome
  344. &:disabled {
  345. opacity: 1;
  346. }
  347. }
  348. // Remove the dropdown arrow in Chrome from inputs built with datalists.
  349. // See https://stackoverflow.com/a/54997118
  350. [list]::-webkit-calendar-picker-indicator {
  351. display: none;
  352. }
  353. // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
  354. // controls in Android 4.
  355. // 2. Correct the inability to style clickable types in iOS and Safari.
  356. // 3. Opinionated: add "hand" cursor to non-disabled button elements.
  357. button,
  358. [type="button"], // 1
  359. [type="reset"],
  360. [type="submit"] {
  361. -webkit-appearance: button; // 2
  362. @if $enable-button-pointers {
  363. &:not(:disabled) {
  364. cursor: pointer; // 3
  365. }
  366. }
  367. }
  368. // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
  369. ::-moz-focus-inner {
  370. padding: 0;
  371. border-style: none;
  372. }
  373. // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
  374. textarea {
  375. resize: vertical; // 1
  376. }
  377. // 1. Browsers set a default `min-width: min-content;` on fieldsets,
  378. // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
  379. // So we reset that to ensure fieldsets behave more like a standard block element.
  380. // See https://github.com/twbs/bootstrap/issues/12359
  381. // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
  382. // 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
  383. fieldset {
  384. min-width: 0; // 1
  385. padding: 0; // 2
  386. margin: 0; // 2
  387. border: 0; // 2
  388. }
  389. // 1. By using `float: left`, the legend will behave like a block element.
  390. // This way the border of a fieldset wraps around the legend if present.
  391. // 2. Fix wrapping bug.
  392. // See https://github.com/twbs/bootstrap/issues/29712
  393. legend {
  394. float: left; // 1
  395. width: 100%;
  396. padding: 0;
  397. margin-bottom: $legend-margin-bottom;
  398. @include font-size($legend-font-size);
  399. font-weight: $legend-font-weight;
  400. line-height: inherit;
  401. + * {
  402. clear: left; // 2
  403. }
  404. }
  405. // Fix height of inputs with a type of datetime-local, date, month, week, or time
  406. // See https://github.com/twbs/bootstrap/issues/18842
  407. ::-webkit-datetime-edit-fields-wrapper,
  408. ::-webkit-datetime-edit-text,
  409. ::-webkit-datetime-edit-minute,
  410. ::-webkit-datetime-edit-hour-field,
  411. ::-webkit-datetime-edit-day-field,
  412. ::-webkit-datetime-edit-month-field,
  413. ::-webkit-datetime-edit-year-field {
  414. padding: 0;
  415. }
  416. ::-webkit-inner-spin-button {
  417. height: auto;
  418. }
  419. // 1. Correct the outline style in Safari.
  420. // 2. This overrides the extra rounded corners on search inputs in iOS so that our
  421. // `.form-control` class can properly style them. Note that this cannot simply
  422. // be added to `.form-control` as it's not specific enough. For details, see
  423. // https://github.com/twbs/bootstrap/issues/11586.
  424. [type="search"] {
  425. outline-offset: -2px; // 1
  426. -webkit-appearance: textfield; // 2
  427. }
  428. // 1. A few input types should stay LTR
  429. // See https://rtlstyling.com/posts/rtl-styling#form-inputs
  430. // 2. RTL only output
  431. // See https://rtlcss.com/learn/usage-guide/control-directives/#raw
  432. /* rtl:raw:
  433. [type="tel"],
  434. [type="url"],
  435. [type="email"],
  436. [type="number"] {
  437. direction: ltr;
  438. }
  439. */
  440. // Remove the inner padding in Chrome and Safari on macOS.
  441. ::-webkit-search-decoration {
  442. -webkit-appearance: none;
  443. }
  444. // Remove padding around color pickers in webkit browsers
  445. ::-webkit-color-swatch-wrapper {
  446. padding: 0;
  447. }
  448. // Inherit font family and line height for file input buttons
  449. ::file-selector-button {
  450. font: inherit;
  451. }
  452. // 1. Change font properties to `inherit`
  453. // 2. Correct the inability to style clickable types in iOS and Safari.
  454. ::-webkit-file-upload-button {
  455. font: inherit; // 1
  456. -webkit-appearance: button; // 2
  457. }
  458. // Correct element displays
  459. output {
  460. display: inline-block;
  461. }
  462. // Remove border from iframe
  463. iframe {
  464. border: 0;
  465. }
  466. // Summary
  467. //
  468. // 1. Add the correct display in all browsers
  469. summary {
  470. display: list-item; // 1
  471. cursor: pointer;
  472. }
  473. // Progress
  474. //
  475. // Add the correct vertical alignment in Chrome, Firefox, and Opera.
  476. progress {
  477. vertical-align: baseline;
  478. }
  479. // Hidden attribute
  480. //
  481. // Always hide an element with the `hidden` HTML attribute.
  482. [hidden] {
  483. display: none !important;
  484. }