[Summary view] [Print] [Text view]

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