bootstrap 5.0.0.beta2 → 5.0.2

data/assets/stylesheets/bootstrap/_modal.scss

@@ -4,16 +4,6 @@
 // .modal-content   - actual modal w/ bg and corners and stuff
 
 
-.modal-open {
-  // Kill the scroll on the body
-  overflow: hidden;
-
-  .modal {
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-}
-
 // Container that the modal scrolls within
 .modal {
   position: fixed;
@@ -23,7 +13,8 @@
   display: none;
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   // Prevent Chrome on Windows from adding a focus outline. For details, see
   // https://github.com/twbs/bootstrap/pull/10951.
   outline: 0;
@@ -119,8 +110,8 @@
   @include border-top-radius($modal-content-inner-border-radius);
 
   .btn-close {
-    padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
-    margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto;
+    padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);
+    margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;
   }
 }
 
@@ -147,7 +138,7 @@
   flex-shrink: 0;
   align-items: center; // vertically center
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
-  padding: $modal-inner-padding - $modal-footer-margin-between / 2;
+  padding: $modal-inner-padding - $modal-footer-margin-between * .5;
   border-top: $modal-footer-border-width solid $modal-footer-border-color;
   @include border-bottom-radius($modal-content-inner-border-radius);
 
@@ -155,19 +146,10 @@
   // This solution is far from ideal because of the universal selector usage,
   // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
   > * {
-    margin: $modal-footer-margin-between / 2;
+    margin: $modal-footer-margin-between * .5;
   }
 }
 
-// Measure scrollbar width for padding body during modal show/hide
-.modal-scrollbar-measure {
-  position: absolute;
-  top: -9999px;
-  width: 50px;
-  height: 50px;
-  overflow: scroll;
-}
-
 // Scale up the modal
 @include media-breakpoint-up(sm) {
   // Automatically set modal's width for larger viewports
@@ -202,6 +184,7 @@
   .modal-xl { max-width: $modal-xl; }
 }
 
+// scss-docs-start modal-fullscreen-loop
 @each $breakpoint in map-keys($grid-breakpoints) {
   $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
   $postfix: if($infix != "", $infix + "-down", "");
@@ -233,3 +216,4 @@
     }
   }
 }
+// scss-docs-end modal-fullscreen-loop

data/assets/stylesheets/bootstrap/_nav.scss

@@ -117,6 +117,13 @@
   }
 }
 
+.nav-fill,
+.nav-justified {
+  .nav-item .nav-link {
+    width: 100%; // Make sure button will grow
+  }
+}
+
 
 // Tabbable tabs
 //

data/assets/stylesheets/bootstrap/_navbar.scss

@@ -154,6 +154,7 @@
   overflow-y: auto;
 }
 
+// scss-docs-start navbar-expand-loop
 // Generate series of `.navbar-expand-*` responsive classes for configuring
 // where your navbar collapses.
 .navbar-expand {
@@ -196,6 +197,7 @@
     }
   }
 }
+// scss-docs-end navbar-expand-loop
 
 
 // Navbar themes

data/assets/stylesheets/bootstrap/_offcanvas.scss

@@ -0,0 +1,79 @@
+.offcanvas {
+  position: fixed;
+  bottom: 0;
+  z-index: $zindex-offcanvas;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  color: $offcanvas-color;
+  visibility: hidden;
+  background-color: $offcanvas-bg-color;
+  background-clip: padding-box;
+  outline: 0;
+  @include box-shadow($offcanvas-box-shadow);
+  @include transition(transform $offcanvas-transition-duration ease-in-out);
+}
+
+.offcanvas-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $offcanvas-padding-y $offcanvas-padding-x;
+
+  .btn-close {
+    padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);
+    margin-top: $offcanvas-padding-y * -.5;
+    margin-right: $offcanvas-padding-x * -.5;
+    margin-bottom: $offcanvas-padding-y * -.5;
+  }
+}
+
+.offcanvas-title {
+  margin-bottom: 0;
+  line-height: $offcanvas-title-line-height;
+}
+
+.offcanvas-body {
+  flex-grow: 1;
+  padding: $offcanvas-padding-y $offcanvas-padding-x;
+  overflow-y: auto;
+}
+
+.offcanvas-start {
+  top: 0;
+  left: 0;
+  width: $offcanvas-horizontal-width;
+  border-right: $offcanvas-border-width solid $offcanvas-border-color;
+  transform: translateX(-100%);
+}
+
+.offcanvas-end {
+  top: 0;
+  right: 0;
+  width: $offcanvas-horizontal-width;
+  border-left: $offcanvas-border-width solid $offcanvas-border-color;
+  transform: translateX(100%);
+}
+
+.offcanvas-top {
+  top: 0;
+  right: 0;
+  left: 0;
+  height: $offcanvas-vertical-height;
+  max-height: 100%;
+  border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
+  transform: translateY(-100%);
+}
+
+.offcanvas-bottom {
+  right: 0;
+  left: 0;
+  height: $offcanvas-vertical-height;
+  max-height: 100%;
+  border-top: $offcanvas-border-width solid $offcanvas-border-color;
+  transform: translateY(100%);
+}
+
+.offcanvas.show {
+  transform: none;
+}

data/assets/stylesheets/bootstrap/_popover.scss

@@ -40,13 +40,13 @@
 
     &::before {
       bottom: 0;
-      border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
       border-top-color: $popover-arrow-outer-color;
     }
 
     &::after {
       bottom: $popover-border-width;
-      border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
       border-top-color: $popover-arrow-color;
     }
   }
@@ -60,13 +60,13 @@
 
     &::before {
       left: 0;
-      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
       border-right-color: $popover-arrow-outer-color;
     }
 
     &::after {
       left: $popover-border-width;
-      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
       border-right-color: $popover-arrow-color;
     }
   }
@@ -78,13 +78,13 @@
 
     &::before {
       top: 0;
-      border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+      border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
       border-bottom-color: $popover-arrow-outer-color;
     }
 
     &::after {
       top: $popover-border-width;
-      border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+      border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
       border-bottom-color: $popover-arrow-color;
     }
   }
@@ -96,7 +96,7 @@
     left: 50%;
     display: block;
     width: $popover-arrow-width;
-    margin-left: -$popover-arrow-width / 2;
+    margin-left: -$popover-arrow-width * .5;
     content: "";
     border-bottom: $popover-border-width solid $popover-header-bg;
   }
@@ -110,13 +110,13 @@
 
     &::before {
       right: 0;
-      border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+      border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
       border-left-color: $popover-arrow-outer-color;
     }
 
     &::after {
       right: $popover-border-width;
-      border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+      border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
       border-left-color: $popover-arrow-color;
     }
   }
@@ -144,7 +144,7 @@
   @include font-size($font-size-base);
   color: $popover-header-color;
   background-color: $popover-header-bg;
-  border-bottom: $popover-border-width solid shade-color($popover-header-bg, 10%);
+  border-bottom: $popover-border-width solid $popover-border-color;
   @include border-top-radius($popover-inner-border-radius);
 
   &:empty {

data/assets/stylesheets/bootstrap/_progress.scss

@@ -1,9 +1,12 @@
 // Disable animation if transitions are disabled
+
+// scss-docs-start progress-keyframes
 @if $enable-transitions {
   @keyframes progress-bar-stripes {
     0% { background-position-x: $progress-height; }
   }
 }
+// scss-docs-end progress-keyframes
 
 .progress {
   display: flex;

data/assets/stylesheets/bootstrap/_reboot.scss

@@ -57,20 +57,6 @@ body {
 }
 
 
-// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
-// on elements that programmatically receive focus but wouldn't normally show a visible
-// focus outline. In general, this would mean that the outline is only applied if the
-// interaction that led to the element receiving programmatic focus was a keyboard interaction,
-// or the browser has somehow determined that the user is primarily a keyboard user and/or
-// wants focus outlines to always be presented.
-// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
-// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
-
-[tabindex="-1"]:focus:not(:focus-visible) {
-  outline: 0 !important;
-}
-
-
 // Content grouping
 //
 // 1. Reset Firefox's gray color
@@ -156,7 +142,6 @@ p {
 
 abbr[title],
 abbr[data-bs-original-title] { // 1
-  text-decoration: underline; // 2
   text-decoration: underline dotted; // 2
   cursor: help; // 3
   text-decoration-skip-ink: none; // 4
@@ -434,12 +419,10 @@ textarea {
 }
 
 // Remove the inheritance of text transform in Firefox
-
 button,
 select {
   text-transform: none;
 }
-
 // Set the cursor for non-`<button>` buttons
 //
 // Details at https://github.com/twbs/bootstrap/pull/30562
@@ -447,11 +430,15 @@ select {
   cursor: pointer;
 }
 
-// Remove the inheritance of word-wrap in Safari.
-// See https://github.com/twbs/bootstrap/issues/24990
-
 select {
+  // Remove the inheritance of word-wrap in Safari.
+  // See https://github.com/twbs/bootstrap/issues/24990
   word-wrap: normal;
+
+  // Undo the opacity change from Chrome
+  &:disabled {
+    opacity: 1;
+  }
 }
 
 // Remove the dropdown arrow in Chrome from inputs built with datalists.
@@ -582,7 +569,6 @@ legend {
 
 // Inherit font family and line height for file input buttons
 
-// stylelint-disable-next-line selector-pseudo-element-no-unknown
 ::file-selector-button {
   font: inherit;
 }

data/assets/stylesheets/bootstrap/_spinners.scss

@@ -2,15 +2,17 @@
 // Rotating border
 //
 
+// scss-docs-start spinner-border-keyframes
 @keyframes spinner-border {
   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: text-bottom;
+  vertical-align: $spinner-vertical-align;
   border: $spinner-border-width solid currentColor;
   border-right-color: transparent;
   // stylelint-disable-next-line property-disallowed-list
@@ -28,6 +30,7 @@
 // Growing circle
 //
 
+// scss-docs-start spinner-grow-keyframes
 @keyframes spinner-grow {
   0% {
     transform: scale(0);
@@ -37,12 +40,13 @@
     transform: none;
   }
 }
+// scss-docs-end spinner-grow-keyframes
 
 .spinner-grow {
   display: inline-block;
   width: $spinner-width;
   height: $spinner-height;
-  vertical-align: text-bottom;
+  vertical-align: $spinner-vertical-align;
   background-color: currentColor;
   // stylelint-disable-next-line property-disallowed-list
   border-radius: 50%;

data/assets/stylesheets/bootstrap/_tables.scss

@@ -4,6 +4,7 @@
 
 .table {
   --#{$variable-prefix}table-bg: #{$table-bg};
+  --#{$variable-prefix}table-accent-bg: #{$table-accent-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};

data/assets/stylesheets/bootstrap/_toasts.scss

@@ -40,7 +40,7 @@
   @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
 
   .btn-close {
-    margin-right: $toast-padding-x / -2;
+    margin-right: $toast-padding-x * -.5;
     margin-left: $toast-padding-x;
   }
 }

data/assets/stylesheets/bootstrap/_tooltip.scss

@@ -37,7 +37,7 @@
 
     &::before {
       top: -1px;
-      border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+      border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
       border-top-color: $tooltip-arrow-color;
     }
   }
@@ -53,7 +53,7 @@
 
     &::before {
       right: -1px;
-      border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+      border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
       border-right-color: $tooltip-arrow-color;
     }
   }
@@ -67,7 +67,7 @@
 
     &::before {
       bottom: -1px;
-      border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+      border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
       border-bottom-color: $tooltip-arrow-color;
     }
   }
@@ -83,7 +83,7 @@
 
     &::before {
       left: -1px;
-      border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+      border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
       border-left-color: $tooltip-arrow-color;
     }
   }