bootstrap 4.6.2 → 5.0.0

data/assets/stylesheets/bootstrap/_root.scss

@@ -1,19 +1,16 @@
 :root {
   // Custom variable values only support SassScript inside `#{}`.
   @each $color, $value in $colors {
-    --#{$color}: #{$value};
+    --#{$variable-prefix}#{$color}: #{$value};
   }
 
   @each $color, $value in $theme-colors {
-    --#{$color}: #{$value};
-  }
-
-  @each $bp, $value in $grid-breakpoints {
-    --breakpoint-#{$bp}: #{$value};
+    --#{$variable-prefix}#{$color}: #{$value};
   }
 
   // Use `inspect` for lists so that quoted items keep the quotes.
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
-  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
-  --font-family-monospace: #{inspect($font-family-monospace)};
+  --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+  --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
+  --#{$variable-prefix}gradient: #{$gradient};
 }

data/assets/stylesheets/bootstrap/_spinners.scss

@@ -2,20 +2,22 @@
 // Rotating border
 //
 
+// scss-docs-start spinner-border-keyframes
 @keyframes spinner-border {
-  to { transform: rotate(360deg); }
+  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
 }
+// scss-docs-end spinner-border-keyframes
 
 .spinner-border {
   display: inline-block;
   width: $spinner-width;
   height: $spinner-height;
   vertical-align: $spinner-vertical-align;
-  border: $spinner-border-width solid currentcolor;
+  border: $spinner-border-width solid currentColor;
   border-right-color: transparent;
   // stylelint-disable-next-line property-disallowed-list
   border-radius: 50%;
-  animation: .75s linear infinite spinner-border;
+  animation: $spinner-animation-speed linear infinite spinner-border;
 }
 
 .spinner-border-sm {
@@ -28,6 +30,7 @@
 // Growing circle
 //
 
+// scss-docs-start spinner-grow-keyframes
 @keyframes spinner-grow {
   0% {
     transform: scale(0);
@@ -37,17 +40,18 @@
     transform: none;
   }
 }
+// scss-docs-end spinner-grow-keyframes
 
 .spinner-grow {
   display: inline-block;
   width: $spinner-width;
   height: $spinner-height;
   vertical-align: $spinner-vertical-align;
-  background-color: currentcolor;
+  background-color: currentColor;
   // stylelint-disable-next-line property-disallowed-list
   border-radius: 50%;
   opacity: 0;
-  animation: .75s linear infinite spinner-grow;
+  animation: $spinner-animation-speed linear infinite spinner-grow;
 }
 
 .spinner-grow-sm {
@@ -55,11 +59,11 @@
   height: $spinner-height-sm;
 }
 
-@if $enable-prefers-reduced-motion-media-query {
+@if $enable-reduced-motion {
   @media (prefers-reduced-motion: reduce) {
     .spinner-border,
     .spinner-grow {
-      animation-duration: 1.5s;
+      animation-duration: $spinner-animation-speed * 2;
     }
   }
 }

data/assets/stylesheets/bootstrap/_tables.scss

@@ -3,37 +3,64 @@
 //
 
 .table {
+  --#{$variable-prefix}table-bg: #{$table-bg};
+  --#{$variable-prefix}table-striped-color: #{$table-striped-color};
+  --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
+  --#{$variable-prefix}table-active-color: #{$table-active-color};
+  --#{$variable-prefix}table-active-bg: #{$table-active-bg};
+  --#{$variable-prefix}table-hover-color: #{$table-hover-color};
+  --#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
+
   width: 100%;
   margin-bottom: $spacer;
   color: $table-color;
-  background-color: $table-bg; // Reset for nesting within parents with `background-color`.
+  vertical-align: $table-cell-vertical-align;
+  border-color: $table-border-color;
+
+  // Target th & td
+  // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
+  // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
+  // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
+  // stylelint-disable-next-line selector-max-universal
+  > :not(caption) > * > * {
+    padding: $table-cell-padding-y $table-cell-padding-x;
+    background-color: var(--#{$variable-prefix}table-bg);
+    border-bottom-width: $table-border-width;
+    box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
+  }
 
-  th,
-  td {
-    padding: $table-cell-padding;
-    vertical-align: top;
-    border-top: $table-border-width solid $table-border-color;
+  > tbody {
+    vertical-align: inherit;
   }
 
-  thead th {
+  > thead {
     vertical-align: bottom;
-    border-bottom: (2 * $table-border-width) solid $table-border-color;
   }
 
-  tbody + tbody {
-    border-top: (2 * $table-border-width) solid $table-border-color;
+  // Highlight border color between thead, tbody and tfoot.
+  > :not(:last-child) > :last-child > * {
+    border-bottom-color: $table-group-separator-color;
   }
 }
 
 
+//
+// Change placement of captions with a class
+//
+
+.caption-top {
+  caption-side: top;
+}
+
+
 //
 // Condensed table w/ half padding
 //
 
 .table-sm {
-  th,
-  td {
-    padding: $table-cell-padding-sm;
+  // stylelint-disable-next-line selector-max-universal
+  > :not(caption) > * > * {
+    padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
   }
 }
 
@@ -41,29 +68,27 @@
 // Border versions
 //
 // Add or remove borders all around the table and between all the columns.
+//
+// When borders are added on all sides of the cells, the corners can render odd when
+// these borders do not have the same color or if they are semi-transparent.
+// Therefor we add top and border bottoms to the `tr`s and left and right borders
+// to the `td`s or `th`s
 
 .table-bordered {
-  border: $table-border-width solid $table-border-color;
+  > :not(caption) > * {
+    border-width: $table-border-width 0;
 
-  th,
-  td {
-    border: $table-border-width solid $table-border-color;
-  }
-
-  thead {
-    th,
-    td {
-      border-bottom-width: 2 * $table-border-width;
+    // stylelint-disable-next-line selector-max-universal
+    > * {
+      border-width: 0 $table-border-width;
     }
   }
 }
 
 .table-borderless {
-  th,
-  td,
-  thead th,
-  tbody + tbody {
-    border: 0;
+  // stylelint-disable-next-line selector-max-universal
+  > :not(caption) > * > * {
+    border-bottom-width: 0;
   }
 }
 
@@ -72,114 +97,54 @@
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
 
 .table-striped {
-  tbody tr:nth-of-type(#{$table-striped-order}) {
-    background-color: $table-accent-bg;
+  > tbody > tr:nth-of-type(#{$table-striped-order}) {
+    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
+    color: var(--#{$variable-prefix}table-striped-color);
   }
 }
 
+// Active table
+//
+// The `.table-active` class can be added to highlight rows or cells
+
+.table-active {
+  --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
+  color: var(--#{$variable-prefix}table-active-color);
+}
 
 // Hover effect
 //
 // Placed here since it has to come after the potential zebra striping
 
 .table-hover {
-  tbody tr {
-    @include hover() {
-      color: $table-hover-color;
-      background-color: $table-hover-bg;
-    }
+  > tbody > tr:hover {
+    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
+    color: var(--#{$variable-prefix}table-hover-color);
   }
 }
 
 
-// Table backgrounds
-//
-// Exact selectors below required to override `.table-striped` and prevent
-// inheritance to nested tables.
-
-@each $color, $value in $theme-colors {
-  @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
-}
-
-@include table-row-variant(active, $table-active-bg);
-
-
-// Dark styles
+// Table variants
 //
-// Same table markup, but inverted color scheme: dark background and light text.
-
-// stylelint-disable-next-line no-duplicate-selectors
-.table {
-  .thead-dark {
-    th {
-      color: $table-dark-color;
-      background-color: $table-dark-bg;
-      border-color: $table-dark-border-color;
-    }
-  }
+// Table variants set the table cell backgrounds, border colors
+// and the colors of the striped, hovered & active tables
 
-  .thead-light {
-    th {
-      color: $table-head-color;
-      background-color: $table-head-bg;
-      border-color: $table-border-color;
-    }
-  }
+@each $color, $value in $table-variants {
+  @include table-variant($color, $value);
 }
 
-.table-dark {
-  color: $table-dark-color;
-  background-color: $table-dark-bg;
-
-  th,
-  td,
-  thead th {
-    border-color: $table-dark-border-color;
-  }
-
-  &.table-bordered {
-    border: 0;
-  }
-
-  &.table-striped {
-    tbody tr:nth-of-type(#{$table-striped-order}) {
-      background-color: $table-dark-accent-bg;
-    }
-  }
-
-  &.table-hover {
-    tbody tr {
-      @include hover() {
-        color: $table-dark-hover-color;
-        background-color: $table-dark-hover-bg;
-      }
-    }
-  }
-}
-
-
 // Responsive tables
 //
 // Generate series of `.table-responsive-*` classes for configuring the screen
 // size of where your table will overflow.
 
-.table-responsive {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($next, $grid-breakpoints);
-
-    &#{$infix} {
-      @include media-breakpoint-down($breakpoint) {
-        display: block;
-        width: 100%;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-
-        // Prevent double border on horizontal scroll due to use of `display: block;`
-        > .table-bordered {
-          border: 0;
-        }
-      }
+@each $breakpoint in map-keys($grid-breakpoints) {
+  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+  @include media-breakpoint-down($breakpoint) {
+    .table-responsive#{$infix} {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
     }
   }
 }

data/assets/stylesheets/bootstrap/_toasts.scss

@@ -1,32 +1,31 @@
 .toast {
-  // Prevents from shrinking in IE11, when in a flex container
-  // See https://github.com/twbs/bootstrap/issues/28341
-  flex-basis: $toast-max-width;
-  max-width: $toast-max-width;
+  width: $toast-max-width;
+  max-width: 100%;
   @include font-size($toast-font-size);
   color: $toast-color;
+  pointer-events: auto;
   background-color: $toast-background-color;
   background-clip: padding-box;
   border: $toast-border-width solid $toast-border-color;
   box-shadow: $toast-box-shadow;
-  opacity: 0;
   @include border-radius($toast-border-radius);
 
-  &:not(:last-child) {
-    margin-bottom: $toast-padding-x;
+  &:not(.showing):not(.show) {
+    opacity: 0;
   }
 
-  &.showing {
-    opacity: 1;
+  &.hide {
+    display: none;
   }
+}
 
-  &.show {
-    display: block;
-    opacity: 1;
-  }
+.toast-container {
+  width: max-content;
+  max-width: 100%;
+  pointer-events: none;
 
-  &.hide {
-    display: none;
+  > :not(:last-child) {
+    margin-bottom: $toast-spacing;
   }
 }
 
@@ -39,8 +38,14 @@
   background-clip: padding-box;
   border-bottom: $toast-border-width solid $toast-header-border-color;
   @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
+
+  .btn-close {
+    margin-right: $toast-padding-x / -2;
+    margin-left: $toast-padding-x;
+  }
 }
 
 .toast-body {
   padding: $toast-padding-x; // apply to both vertical and horizontal
+  word-wrap: break-word;
 }

data/assets/stylesheets/bootstrap/_tooltip.scss

@@ -14,7 +14,7 @@
 
   &.show { opacity: $tooltip-opacity; }
 
-  .arrow {
+  .tooltip-arrow {
     position: absolute;
     display: block;
     width: $tooltip-arrow-width;
@@ -32,28 +32,28 @@
 .bs-tooltip-top {
   padding: $tooltip-arrow-height 0;
 
-  .arrow {
+  .tooltip-arrow {
     bottom: 0;
 
     &::before {
-      top: 0;
-      border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
+      top: -1px;
+      border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
       border-top-color: $tooltip-arrow-color;
     }
   }
 }
 
-.bs-tooltip-right {
+.bs-tooltip-end {
   padding: 0 $tooltip-arrow-height;
 
-  .arrow {
+  .tooltip-arrow {
     left: 0;
     width: $tooltip-arrow-height;
     height: $tooltip-arrow-width;
 
     &::before {
-      right: 0;
-      border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
+      right: -1px;
+      border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
       border-right-color: $tooltip-arrow-color;
     }
   }
@@ -62,45 +62,45 @@
 .bs-tooltip-bottom {
   padding: $tooltip-arrow-height 0;
 
-  .arrow {
+  .tooltip-arrow {
     top: 0;
 
     &::before {
-      bottom: 0;
-      border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
+      bottom: -1px;
+      border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
       border-bottom-color: $tooltip-arrow-color;
     }
   }
 }
 
-.bs-tooltip-left {
+.bs-tooltip-start {
   padding: 0 $tooltip-arrow-height;
 
-  .arrow {
+  .tooltip-arrow {
     right: 0;
     width: $tooltip-arrow-height;
     height: $tooltip-arrow-width;
 
     &::before {
-      left: 0;
-      border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
+      left: -1px;
+      border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
       border-left-color: $tooltip-arrow-color;
     }
   }
 }
 
 .bs-tooltip-auto {
-  &[x-placement^="top"] {
+  &[data-popper-placement^="top"] {
     @extend .bs-tooltip-top;
   }
-  &[x-placement^="right"] {
-    @extend .bs-tooltip-right;
+  &[data-popper-placement^="right"] {
+    @extend .bs-tooltip-end;
   }
-  &[x-placement^="bottom"] {
+  &[data-popper-placement^="bottom"] {
     @extend .bs-tooltip-bottom;
   }
-  &[x-placement^="left"] {
-    @extend .bs-tooltip-left;
+  &[data-popper-placement^="left"] {
+    @extend .bs-tooltip-start;
   }
 }
 

data/assets/stylesheets/bootstrap/_transitions.scss

@@ -6,6 +6,7 @@
   }
 }
 
+// scss-docs-start collapse-classes
 .collapse {
   &:not(.show) {
     display: none;
@@ -13,14 +14,8 @@
 }
 
 .collapsing {
-  position: relative;
   height: 0;
   overflow: hidden;
   @include transition($transition-collapse);
-
-  &.width {
-    width: 0;
-    height: auto;
-    @include transition($transition-collapse-width);
-  }
 }
+// scss-docs-end collapse-classes

data/assets/stylesheets/bootstrap/_type.scss

@@ -1,82 +1,56 @@
-// stylelint-disable selector-list-comma-newline-after
-
 //
 // Headings
 //
-
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6 {
-  margin-bottom: $headings-margin-bottom;
-  font-family: $headings-font-family;
-  font-weight: $headings-font-weight;
-  line-height: $headings-line-height;
-  color: $headings-color;
+.h1 {
+  @extend h1;
 }
 
-h1, .h1 { @include font-size($h1-font-size); }
-h2, .h2 { @include font-size($h2-font-size); }
-h3, .h3 { @include font-size($h3-font-size); }
-h4, .h4 { @include font-size($h4-font-size); }
-h5, .h5 { @include font-size($h5-font-size); }
-h6, .h6 { @include font-size($h6-font-size); }
-
-.lead {
-  @include font-size($lead-font-size);
-  font-weight: $lead-font-weight;
+.h2 {
+  @extend h2;
 }
 
-// Type display classes
-.display-1 {
-  @include font-size($display1-size);
-  font-weight: $display1-weight;
-  line-height: $display-line-height;
+.h3 {
+  @extend h3;
 }
-.display-2 {
-  @include font-size($display2-size);
-  font-weight: $display2-weight;
-  line-height: $display-line-height;
+
+.h4 {
+  @extend h4;
 }
-.display-3 {
-  @include font-size($display3-size);
-  font-weight: $display3-weight;
-  line-height: $display-line-height;
+
+.h5 {
+  @extend h5;
 }
-.display-4 {
-  @include font-size($display4-size);
-  font-weight: $display4-weight;
-  line-height: $display-line-height;
+
+.h6 {
+  @extend h6;
 }
 
 
-//
-// Horizontal rules
-//
-
-hr {
-  margin-top: $hr-margin-y;
-  margin-bottom: $hr-margin-y;
-  border: 0;
-  border-top: $hr-border-width solid $hr-border-color;
+.lead {
+  @include font-size($lead-font-size);
+  font-weight: $lead-font-weight;
 }
 
+// Type display classes
+@each $display, $font-size in $display-font-sizes {
+  .display-#{$display} {
+    @include font-size($font-size);
+    font-weight: $display-font-weight;
+    line-height: $display-line-height;
+  }
+}
 
 //
 // Emphasis
 //
-
-small,
 .small {
-  @include font-size($small-font-size);
-  font-weight: $font-weight-normal;
+  @extend small;
 }
 
-mark,
 .mark {
-  padding: $mark-padding;
-  background-color: $mark-bg;
+  @extend mark;
 }
 
-
 //
 // Lists
 //
@@ -104,20 +78,25 @@ mark,
 
 // Builds on `abbr`
 .initialism {
-  @include font-size(90%);
+  @include font-size($initialism-font-size);
   text-transform: uppercase;
 }
 
 // Blockquotes
 .blockquote {
-  margin-bottom: $spacer;
+  margin-bottom: $blockquote-margin-y;
   @include font-size($blockquote-font-size);
+
+  > :last-child {
+    margin-bottom: 0;
+  }
 }
 
 .blockquote-footer {
-  display: block;
-  @include font-size($blockquote-small-font-size);
-  color: $blockquote-small-color;
+  margin-top: -$blockquote-margin-y;
+  margin-bottom: $blockquote-margin-y;
+  @include font-size($blockquote-footer-font-size);
+  color: $blockquote-footer-color;
 
   &::before {
     content: "\2014\00A0"; // em dash, nbsp