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.

611 lines
12 KiB

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