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.

610 lines
12 KiB

3 years 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: $headings-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. background-color: var(--#{$prefix}highlight-bg);
  168. }
  169. // Sub and Sup
  170. //
  171. // Prevent `sub` and `sup` elements from affecting the line height in
  172. // all browsers.
  173. sub,
  174. sup {
  175. position: relative;
  176. @include font-size($sub-sup-font-size);
  177. line-height: 0;
  178. vertical-align: baseline;
  179. }
  180. sub { bottom: -.25em; }
  181. sup { top: -.5em; }
  182. // Links
  183. a {
  184. color: var(--#{$prefix}link-color);
  185. text-decoration: $link-decoration;
  186. &:hover {
  187. color: var(--#{$prefix}link-hover-color);
  188. text-decoration: $link-hover-decoration;
  189. }
  190. }
  191. // And undo these styles for placeholder links/named anchors (without href).
  192. // It would be more straightforward to just use a[href] in previous block, but that
  193. // causes specificity issues in many other styles that are too complex to fix.
  194. // See https://github.com/twbs/bootstrap/issues/19402
  195. a:not([href]):not([class]) {
  196. &,
  197. &:hover {
  198. color: inherit;
  199. text-decoration: none;
  200. }
  201. }
  202. // Code
  203. pre,
  204. code,
  205. kbd,
  206. samp {
  207. font-family: $font-family-code;
  208. @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
  209. }
  210. // 1. Remove browser default top margin
  211. // 2. Reset browser default of `1em` to use `rem`s
  212. // 3. Don't allow content to break outside
  213. pre {
  214. display: block;
  215. margin-top: 0; // 1
  216. margin-bottom: 1rem; // 2
  217. overflow: auto; // 3
  218. @include font-size($code-font-size);
  219. color: $pre-color;
  220. // Account for some code outputs that place code tags in pre tags
  221. code {
  222. @include font-size(inherit);
  223. color: inherit;
  224. word-break: normal;
  225. }
  226. }
  227. code {
  228. @include font-size($code-font-size);
  229. color: var(--#{$prefix}code-color);
  230. word-wrap: break-word;
  231. // Streamline the style when inside anchors to avoid broken underline and more
  232. a > & {
  233. color: inherit;
  234. }
  235. }
  236. kbd {
  237. padding: $kbd-padding-y $kbd-padding-x;
  238. @include font-size($kbd-font-size);
  239. color: $kbd-color;
  240. background-color: $kbd-bg;
  241. @include border-radius($border-radius-sm);
  242. kbd {
  243. padding: 0;
  244. @include font-size(1em);
  245. font-weight: $nested-kbd-font-weight;
  246. }
  247. }
  248. // Figures
  249. //
  250. // Apply a consistent margin strategy (matches our type styles).
  251. figure {
  252. margin: 0 0 1rem;
  253. }
  254. // Images and content
  255. img,
  256. svg {
  257. vertical-align: middle;
  258. }
  259. // Tables
  260. //
  261. // Prevent double borders
  262. table {
  263. caption-side: bottom;
  264. border-collapse: collapse;
  265. }
  266. caption {
  267. padding-top: $table-cell-padding-y;
  268. padding-bottom: $table-cell-padding-y;
  269. color: $table-caption-color;
  270. text-align: left;
  271. }
  272. // 1. Removes font-weight bold by inheriting
  273. // 2. Matches default `<td>` alignment by inheriting `text-align`.
  274. // 3. Fix alignment for Safari
  275. th {
  276. font-weight: $table-th-font-weight; // 1
  277. text-align: inherit; // 2
  278. text-align: -webkit-match-parent; // 3
  279. }
  280. thead,
  281. tbody,
  282. tfoot,
  283. tr,
  284. td,
  285. th {
  286. border-color: inherit;
  287. border-style: solid;
  288. border-width: 0;
  289. }
  290. // Forms
  291. //
  292. // 1. Allow labels to use `margin` for spacing.
  293. label {
  294. display: inline-block; // 1
  295. }
  296. // Remove the default `border-radius` that macOS Chrome adds.
  297. // See https://github.com/twbs/bootstrap/issues/24093
  298. button {
  299. // stylelint-disable-next-line property-disallowed-list
  300. border-radius: 0;
  301. }
  302. // Explicitly remove focus outline in Chromium when it shouldn't be
  303. // visible (e.g. as result of mouse click or touch tap). It already
  304. // should be doing this automatically, but seems to currently be
  305. // confused and applies its very visible two-tone outline anyway.
  306. button:focus:not(:focus-visible) {
  307. outline: 0;
  308. }
  309. // 1. Remove the margin in Firefox and Safari
  310. input,
  311. button,
  312. select,
  313. optgroup,
  314. textarea {
  315. margin: 0; // 1
  316. font-family: inherit;
  317. @include font-size(inherit);
  318. line-height: inherit;
  319. }
  320. // Remove the inheritance of text transform in Firefox
  321. button,
  322. select {
  323. text-transform: none;
  324. }
  325. // Set the cursor for non-`<button>` buttons
  326. //
  327. // Details at https://github.com/twbs/bootstrap/pull/30562
  328. [role="button"] {
  329. cursor: pointer;
  330. }
  331. select {
  332. // Remove the inheritance of word-wrap in Safari.
  333. // See https://github.com/twbs/bootstrap/issues/24990
  334. word-wrap: normal;
  335. // Undo the opacity change from Chrome
  336. &:disabled {
  337. opacity: 1;
  338. }
  339. }
  340. // Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
  341. // See https://stackoverflow.com/a/54997118
  342. [list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
  343. display: none !important;
  344. }
  345. // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
  346. // controls in Android 4.
  347. // 2. Correct the inability to style clickable types in iOS and Safari.
  348. // 3. Opinionated: add "hand" cursor to non-disabled button elements.
  349. button,
  350. [type="button"], // 1
  351. [type="reset"],
  352. [type="submit"] {
  353. -webkit-appearance: button; // 2
  354. @if $enable-button-pointers {
  355. &:not(:disabled) {
  356. cursor: pointer; // 3
  357. }
  358. }
  359. }
  360. // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
  361. ::-moz-focus-inner {
  362. padding: 0;
  363. border-style: none;
  364. }
  365. // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
  366. textarea {
  367. resize: vertical; // 1
  368. }
  369. // 1. Browsers set a default `min-width: min-content;` on fieldsets,
  370. // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
  371. // So we reset that to ensure fieldsets behave more like a standard block element.
  372. // See https://github.com/twbs/bootstrap/issues/12359
  373. // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
  374. // 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
  375. fieldset {
  376. min-width: 0; // 1
  377. padding: 0; // 2
  378. margin: 0; // 2
  379. border: 0; // 2
  380. }
  381. // 1. By using `float: left`, the legend will behave like a block element.
  382. // This way the border of a fieldset wraps around the legend if present.
  383. // 2. Fix wrapping bug.
  384. // See https://github.com/twbs/bootstrap/issues/29712
  385. legend {
  386. float: left; // 1
  387. width: 100%;
  388. padding: 0;
  389. margin-bottom: $legend-margin-bottom;
  390. @include font-size($legend-font-size);
  391. font-weight: $legend-font-weight;
  392. line-height: inherit;
  393. + * {
  394. clear: left; // 2
  395. }
  396. }
  397. // Fix height of inputs with a type of datetime-local, date, month, week, or time
  398. // See https://github.com/twbs/bootstrap/issues/18842
  399. ::-webkit-datetime-edit-fields-wrapper,
  400. ::-webkit-datetime-edit-text,
  401. ::-webkit-datetime-edit-minute,
  402. ::-webkit-datetime-edit-hour-field,
  403. ::-webkit-datetime-edit-day-field,
  404. ::-webkit-datetime-edit-month-field,
  405. ::-webkit-datetime-edit-year-field {
  406. padding: 0;
  407. }
  408. ::-webkit-inner-spin-button {
  409. height: auto;
  410. }
  411. // 1. Correct the outline style in Safari.
  412. // 2. 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. [type="search"] {
  417. outline-offset: -2px; // 1
  418. -webkit-appearance: textfield; // 2
  419. }
  420. // 1. A few input types should stay LTR
  421. // See https://rtlstyling.com/posts/rtl-styling#form-inputs
  422. // 2. RTL only output
  423. // See https://rtlcss.com/learn/usage-guide/control-directives/#raw
  424. /* rtl:raw:
  425. [type="tel"],
  426. [type="url"],
  427. [type="email"],
  428. [type="number"] {
  429. direction: ltr;
  430. }
  431. */
  432. // Remove the inner padding in Chrome and Safari on macOS.
  433. ::-webkit-search-decoration {
  434. -webkit-appearance: none;
  435. }
  436. // Remove padding around color pickers in webkit browsers
  437. ::-webkit-color-swatch-wrapper {
  438. padding: 0;
  439. }
  440. // 1. Inherit font family and line height for file input buttons
  441. // 2. Correct the inability to style clickable types in iOS and Safari.
  442. ::file-selector-button {
  443. font: inherit; // 1
  444. -webkit-appearance: button; // 2
  445. }
  446. // Correct element displays
  447. output {
  448. display: inline-block;
  449. }
  450. // Remove border from iframe
  451. iframe {
  452. border: 0;
  453. }
  454. // Summary
  455. //
  456. // 1. Add the correct display in all browsers
  457. summary {
  458. display: list-item; // 1
  459. cursor: pointer;
  460. }
  461. // Progress
  462. //
  463. // Add the correct vertical alignment in Chrome, Firefox, and Opera.
  464. progress {
  465. vertical-align: baseline;
  466. }
  467. // Hidden attribute
  468. //
  469. // Always hide an element with the `hidden` HTML attribute.
  470. [hidden] {
  471. display: none !important;
  472. }