bootstrap 5.0.0.beta1 → 5.0.0.beta2

data/assets/stylesheets/_bootstrap-grid.scss

@@ -1,7 +1,7 @@
 /*!
- * Bootstrap Grid v5.0.0-beta1 (https://getbootstrap.com/)
- * Copyright 2011-2020 The Bootstrap Authors
- * Copyright 2011-2020 Twitter, Inc.
+ * Bootstrap Grid v5.0.0-beta2 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 

data/assets/stylesheets/_bootstrap-reboot.scss

@@ -1,7 +1,7 @@
 /*!
- * Bootstrap Reboot v5.0.0-beta1 (https://getbootstrap.com/)
- * Copyright 2011-2020 The Bootstrap Authors
- * Copyright 2011-2020 Twitter, Inc.
+ * Bootstrap Reboot v5.0.0-beta2 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
  */

data/assets/stylesheets/_bootstrap.scss

@@ -1,7 +1,7 @@
 /*!
- * Bootstrap v5.0.0-beta1 (https://getbootstrap.com/)
- * Copyright 2011-2020 The Bootstrap Authors
- * Copyright 2011-2020 Twitter, Inc.
+ * Bootstrap v5.0.0-beta2 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 

data/assets/stylesheets/bootstrap/_accordion.scss

@@ -10,6 +10,7 @@
   padding: $accordion-button-padding-y $accordion-button-padding-x;
   @include font-size($font-size-base);
   color: $accordion-button-color;
+  text-align: left; // Reset button style
   background-color: $accordion-button-bg;
   border: $accordion-border-width solid $accordion-border-color;
   @include border-radius(0);

data/assets/stylesheets/bootstrap/_alert.scss

@@ -44,14 +44,14 @@
 // Generate contextual modifier classes for colorizing the alert.
 
 @each $state, $value in $theme-colors {
-  $background: shift-color($value, $alert-bg-scale);
-  $border: shift-color($value, $alert-border-scale);
-  $color: shift-color($value, $alert-color-scale);
-  @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
-    $color: mix($value, color-contrast($background), abs($alert-color-scale));
+  $alert-background: shift-color($value, $alert-bg-scale);
+  $alert-border: shift-color($value, $alert-border-scale);
+  $alert-color: shift-color($value, $alert-color-scale);
+  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
+    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
   }
   .alert-#{$state} {
-    @include alert-variant($background, $border, $color);
+    @include alert-variant($alert-background, $alert-border, $alert-color);
   }
 }
 // scss-docs-end alert-modifiers

data/assets/stylesheets/bootstrap/_carousel.scss

@@ -98,8 +98,11 @@
   align-items: center; // 2. vertically center contents
   justify-content: center; // 3. horizontally center contents
   width: $carousel-control-width;
+  padding: 0;
   color: $carousel-control-color;
   text-align: center;
+  background: none;
+  border: 0;
   opacity: $carousel-control-opacity;
   @include transition($carousel-control-transition);
 
@@ -147,10 +150,10 @@
   background-image: escape-svg($carousel-control-next-icon-bg);
 }
 
-// Optional indicator pips
+// Optional indicator pips/controls
 //
-// Add an ordered list with the following class and add a list item for each
-// slide your carousel holds.
+// Add a container (such as a list) with the following class and add an item (ideally a focusable control,
+// like a button) with data-bs-target for each slide your carousel holds.
 
 .carousel-indicators {
   position: absolute;
@@ -160,23 +163,26 @@
   z-index: 2;
   display: flex;
   justify-content: center;
-  padding-left: 0; // override <ol> default
+  padding: 0;
   // Use the .carousel-control's width as margin so we don't overlay those
   margin-right: $carousel-control-width;
+  margin-bottom: 1rem;
   margin-left: $carousel-control-width;
   list-style: none;
 
-  li {
+  [data-bs-target] {
     box-sizing: content-box;
     flex: 0 1 auto;
     width: $carousel-indicator-width;
     height: $carousel-indicator-height;
+    padding: 0;
     margin-right: $carousel-indicator-spacer;
     margin-left: $carousel-indicator-spacer;
     text-indent: -999px;
     cursor: pointer;
     background-color: $carousel-indicator-active-bg;
     background-clip: padding-box;
+    border: 0;
     // Use transparent borders to increase the hit area by 10px on top and bottom.
     border-top: $carousel-indicator-hit-area-height solid transparent;
     border-bottom: $carousel-indicator-hit-area-height solid transparent;
@@ -213,7 +219,7 @@
     filter: $carousel-dark-control-icon-filter;
   }
 
-  .carousel-indicators li {
+  .carousel-indicators [data-bs-target] {
     background-color: $carousel-dark-indicator-active-bg;
   }
 

data/assets/stylesheets/bootstrap/_close.scss

@@ -22,7 +22,7 @@
   }
 
   &:focus {
-    outline: none;
+    outline: 0;
     box-shadow: $btn-close-focus-shadow;
     opacity: $btn-close-focus-opacity;
   }

data/assets/stylesheets/bootstrap/_dropdown.scss

@@ -17,12 +17,11 @@
 .dropdown-menu {
   position: absolute;
   top: 100%;
-  left: 0;
   z-index: $zindex-dropdown;
   display: none; // none by default, but block on "open" of the menu
   min-width: $dropdown-min-width;
   padding: $dropdown-padding-y $dropdown-padding-x;
-  margin: $dropdown-spacer 0 0; // override default ul
+  margin: 0; // Override default margin of ul
   @include font-size($dropdown-font-size);
   color: $dropdown-color;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
@@ -33,9 +32,9 @@
   @include border-radius($dropdown-border-radius);
   @include box-shadow($dropdown-box-shadow);
 
-  // Reset positioning when positioned with Popper
-  &[style] {
-    right: auto !important; // stylelint-disable-line declaration-no-important
+  &[data-bs-popper] {
+    left: 0;
+    margin-top: $dropdown-spacer;
   }
 }
 
@@ -49,14 +48,20 @@
 
     .dropdown-menu#{$infix}-start {
       --bs-position: start;
-      right: auto #{"/* rtl:ignore */"};
-      left: 0 #{"/* rtl:ignore */"};
+
+      &[data-bs-popper] {
+        right: auto #{"/* rtl:ignore */"};
+        left: 0 #{"/* rtl:ignore */"};
+      }
     }
 
     .dropdown-menu#{$infix}-end {
       --bs-position: end;
-      right: 0 #{"/* rtl:ignore */"};
-      left: auto #{"/* rtl:ignore */"};
+
+      &[data-bs-popper] {
+        right: 0 #{"/* rtl:ignore */"};
+        left: auto #{"/* rtl:ignore */"};
+      }
     }
   }
 }
@@ -68,8 +73,11 @@
   .dropdown-menu {
     top: auto;
     bottom: 100%;
-    margin-top: 0;
-    margin-bottom: $dropdown-spacer;
+
+    &[data-bs-popper] {
+      margin-top: 0;
+      margin-bottom: $dropdown-spacer;
+    }
   }
 
   .dropdown-toggle {
@@ -82,8 +90,11 @@
     top: 0;
     right: auto;
     left: 100%;
-    margin-top: 0;
-    margin-left: $dropdown-spacer;
+
+    &[data-bs-popper] {
+      margin-top: 0;
+      margin-left: $dropdown-spacer;
+    }
   }
 
   .dropdown-toggle {
@@ -99,8 +110,11 @@
     top: 0;
     right: 100%;
     left: auto;
-    margin-top: 0;
-    margin-right: $dropdown-spacer;
+
+    &[data-bs-popper] {
+      margin-top: 0;
+      margin-right: $dropdown-spacer;
+    }
   }
 
   .dropdown-toggle {

data/assets/stylesheets/bootstrap/_list-group.scss

@@ -152,12 +152,12 @@
 // Organizationally, this must come after the `:hover` states.
 
 @each $state, $value in $theme-colors {
-  $background: shift-color($value, $list-group-item-bg-scale);
-  $color: shift-color($value, $list-group-item-color-scale);
-  @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
-    $color: mix($value, color-contrast($background), abs($alert-color-scale));
+  $list-group-background: shift-color($value, $list-group-item-bg-scale);
+  $list-group-color: shift-color($value, $list-group-item-color-scale);
+  @if (contrast-ratio($list-group-background, $list-group-color) < $min-contrast-ratio) {
+    $list-group-color: mix($value, color-contrast($list-group-background), abs($alert-color-scale));
   }
 
-  @include list-group-item-variant($state, $background, $color);
+  @include list-group-item-variant($state, $list-group-background, $list-group-color);
 }
 // scss-docs-end list-group-modifiers

data/assets/stylesheets/bootstrap/_nav.scss

@@ -43,12 +43,15 @@
 
   .nav-link {
     margin-bottom: -$nav-tabs-border-width;
+    background: none;
     border: $nav-tabs-border-width solid transparent;
     @include border-top-radius($nav-tabs-border-radius);
 
     &:hover,
     &:focus {
       border-color: $nav-tabs-link-hover-border-color;
+      // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
+      isolation: isolate;
     }
 
     &.disabled {
@@ -80,6 +83,8 @@
 
 .nav-pills {
   .nav-link {
+    background: none;
+    border: 0;
     @include border-radius($nav-pills-border-radius);
   }
 

data/assets/stylesheets/bootstrap/_navbar.scss

@@ -109,10 +109,11 @@
 // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
 // on the `.navbar` parent.
 .navbar-collapse {
+  flex-basis: 100%;
+  flex-grow: 1;
   // For always expanded or extra full navbars, ensure content aligns itself
   // properly vertically. Can be easily overridden with flex utilities.
   align-items: center;
-  width: 100%;
 }
 
 // Button for toggling the navbar when in its collapsed state
@@ -148,6 +149,11 @@
   background-size: 100%;
 }
 
+.navbar-nav-scroll {
+  max-height: var(--#{$variable-prefix}scroll-height, 75vh);
+  overflow-y: auto;
+}
+
 // Generate series of `.navbar-expand-*` responsive classes for configuring
 // where your navbar collapses.
 .navbar-expand {
@@ -174,8 +180,13 @@
           }
         }
 
+        .navbar-nav-scroll {
+          overflow: visible;
+        }
+
         .navbar-collapse {
           display: flex !important; // stylelint-disable-line declaration-no-important
+          flex-basis: auto;
         }
 
         .navbar-toggler {

data/assets/stylesheets/bootstrap/_pagination.scss

@@ -56,9 +56,9 @@
 @include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius);
 
 .pagination-lg {
-  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $border-radius-lg);
+  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
 }
 
 .pagination-sm {
-  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $border-radius-sm);
+  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
 }

data/assets/stylesheets/bootstrap/_popover.scss

@@ -22,7 +22,6 @@
     display: block;
     width: $popover-arrow-width;
     height: $popover-arrow-height;
-    margin: 0 $popover-border-radius;
 
     &::before,
     &::after {
@@ -36,9 +35,6 @@
 }
 
 .bs-popover-top {
-  // Overrule margin set by popper.js
-  margin-bottom: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
-
   > .popover-arrow {
     bottom: subtract(-$popover-arrow-height, $popover-border-width);
 
@@ -57,14 +53,10 @@
 }
 
 .bs-popover-end {
-  // Overrule margin set by popper.js
-  margin-left: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
-
   > .popover-arrow {
     left: subtract(-$popover-arrow-height, $popover-border-width);
     width: $popover-arrow-height;
     height: $popover-arrow-width;
-    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
 
     &::before {
       left: 0;
@@ -81,9 +73,6 @@
 }
 
 .bs-popover-bottom {
-  // Overrule margin set by popper.js
-  margin-top: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
-
   > .popover-arrow {
     top: subtract(-$popover-arrow-height, $popover-border-width);
 
@@ -114,14 +103,10 @@
 }
 
 .bs-popover-start {
-  // Overrule margin set by popper.js
-  margin-right: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
-
   > .popover-arrow {
     right: subtract(-$popover-arrow-height, $popover-border-width);
     width: $popover-arrow-height;
     height: $popover-arrow-width;
-    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
 
     &::before {
       right: 0;

data/assets/stylesheets/bootstrap/_reboot.scss

@@ -411,13 +411,13 @@ button {
   border-radius: 0;
 }
 
-// Work around a Firefox bug where the transparent `button` background
-// results in a loss of the default `button` focus styles.
-// Credit https://github.com/suitcss/base/
+// Explicitly remove focus outline in Chromium when it shouldn't be
+// visible (e.g. as result of mouse click or touch tap). It already
+// should be doing this automatically, but seems to currently be
+// confused and applies its very visible two-tone outline anyway.
 
-button:focus {
-  outline: dotted 1px;
-  outline: -webkit-focus-ring-color auto 5px;
+button:focus:not(:focus-visible) {
+  outline: 0;
 }
 
 // 1. Remove the margin in Firefox and Safari

data/assets/stylesheets/bootstrap/_tables.scss

@@ -25,8 +25,8 @@
   > :not(caption) > * > * {
     padding: $table-cell-padding-y $table-cell-padding-x;
     background-color: var(--#{$variable-prefix}table-bg);
-    background-image: linear-gradient(var(--#{$variable-prefix}table-accent-bg), var(--#{$variable-prefix}table-accent-bg));
     border-bottom-width: $table-border-width;
+    box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
   }
 
   > tbody {

data/assets/stylesheets/bootstrap/_toasts.scss

@@ -47,4 +47,5 @@
 
 .toast-body {
   padding: $toast-padding-x; // apply to both vertical and horizontal
+  word-wrap: break-word;
 }

data/assets/stylesheets/bootstrap/_utilities.scss

@@ -22,6 +22,7 @@ $utilities: map-merge(
       property: overflow,
       values: auto hidden visible scroll,
     ),
+    // scss-docs-start utils-display
     "display": (
       responsive: true,
       print: true,
@@ -29,6 +30,7 @@ $utilities: map-merge(
       class: d,
       values: inline inline-block block grid table table-row table-cell flex inline-flex none
     ),
+    // scss-docs-end utils-display
     "shadow": (
       property: box-shadow,
       class: shadow,
@@ -440,6 +442,7 @@ $utilities: map-merge(
         center: center,
       )
     ),
+    // scss-docs-start utils-color
     "color": (
       property: color,
       class: text,
@@ -455,6 +458,7 @@ $utilities: map-merge(
         )
       )
     ),
+    // scss-docs-end utils-color
     "line-height": (
       property: line-height,
       class: lh,
@@ -465,6 +469,7 @@ $utilities: map-merge(
         lg: $line-height-lg,
       )
     ),
+    // scss-docs-start utils-bg-color
     "background-color": (
       property: background-color,
       class: bg,
@@ -477,6 +482,7 @@ $utilities: map-merge(
         )
       )
     ),
+    // scss-docs-end utils-bg-color
     "gradient": (
       property: background-image,
       class: bg,