bootstrap 5.0.0.alpha3 → 5.0.0.beta1

data/assets/stylesheets/_bootstrap-grid.scss

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Grid v5.0.0-alpha3 (https://getbootstrap.com/)
+ * Bootstrap Grid v5.0.0-beta1 (https://getbootstrap.com/)
  * Copyright 2011-2020 The Bootstrap Authors
  * Copyright 2011-2020 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -42,23 +42,23 @@ $utilities: map-get-multiple(
     "bootstrap/margin-x",
     "bootstrap/margin-y",
     "bootstrap/margin-top",
-    "bootstrap/margin-right",
+    "bootstrap/margin-end",
     "bootstrap/margin-bottom",
-    "bootstrap/margin-left",
+    "bootstrap/margin-start",
     "bootstrap/negative-margin",
     "bootstrap/negative-margin-x",
     "bootstrap/negative-margin-y",
     "bootstrap/negative-margin-top",
-    "bootstrap/negative-margin-right",
+    "bootstrap/negative-margin-end",
     "bootstrap/negative-margin-bottom",
-    "bootstrap/negative-margin-left",
+    "bootstrap/negative-margin-start",
     "bootstrap/padding",
     "bootstrap/padding-x",
     "bootstrap/padding-y",
     "bootstrap/padding-top",
-    "bootstrap/padding-right",
+    "bootstrap/padding-end",
     "bootstrap/padding-bottom",
-    "bootstrap/padding-left",
+    "bootstrap/padding-start",
   )
 );
 

data/assets/stylesheets/_bootstrap-reboot.scss

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

data/assets/stylesheets/_bootstrap.scss

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

data/assets/stylesheets/bootstrap/_alert.scss

@@ -44,9 +44,9 @@
 // Generate contextual modifier classes for colorizing the alert.
 
 @each $state, $value in $theme-colors {
-  $background: scale-color($value, $alert-bg-scale);
-  $border: scale-color($value, $alert-border-scale);
-  $color: scale-color($value, $alert-color-scale);
+  $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));
   }

data/assets/stylesheets/bootstrap/_breadcrumb.scss

@@ -18,7 +18,7 @@
       float: left; // Suppress inline spacings and underlining of the separator
       padding-right: $breadcrumb-item-padding-x;
       color: $breadcrumb-divider-color;
-      content: escape-svg($breadcrumb-divider);
+      content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
     }
   }
 

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

@@ -43,7 +43,7 @@
   // Reset rounded corners
   > .btn:not(:last-child):not(.dropdown-toggle),
   > .btn-group:not(:last-child) > .btn {
-    @include border-right-radius(0);
+    @include border-end-radius(0);
   }
 
   // The left radius should be 0 if the button is:
@@ -53,7 +53,7 @@
   > .btn:nth-child(n + 3),
   > :not(.btn-check) + .btn,
   > .btn-group:not(:first-child) > .btn {
-    @include border-left-radius(0);
+    @include border-start-radius(0);
   }
 }
 
@@ -75,11 +75,11 @@
 
   &::after,
   .dropup &::after,
-  .dropright &::after {
+  .dropend &::after {
     margin-left: 0;
   }
 
-  .dropleft &::before {
+  .dropstart &::before {
     margin-right: 0;
   }
 }
@@ -132,7 +132,7 @@
     @include border-bottom-radius(0);
   }
 
-  > .btn:not(:first-child),
+  > .btn ~ .btn,
   > .btn-group:not(:first-child) > .btn {
     @include border-top-radius(0);
   }

data/assets/stylesheets/bootstrap/_card.scss

@@ -69,7 +69,7 @@
   }
 
   + .card-link {
-    margin-left: $card-spacer-x;
+    margin-left: $card-spacer-x #{"/* rtl:ignore */"};
   }
 }
 
@@ -181,7 +181,7 @@
       // Handle rounded corners
       @if $enable-rounded {
         &:not(:last-child) {
-          @include border-right-radius(0);
+          @include border-end-radius(0);
 
           .card-img-top,
           .card-header {
@@ -196,7 +196,7 @@
         }
 
         &:not(:first-child) {
-          @include border-left-radius(0);
+          @include border-start-radius(0);
 
           .card-img-top,
           .card-header {

data/assets/stylesheets/bootstrap/_carousel.scss

@@ -3,12 +3,12 @@
 // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
 //    even when their scroll action started on a carousel, but for compatibility (with Firefox)
 //    we're preventing all actions instead
-// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
+// 2. The .carousel-item-start and .carousel-item-end is used to indicate where
 //    the active slide is heading.
 // 3. .active.carousel-item is the current slide.
-// 4. .active.carousel-item-left and .active.carousel-item-right is the current
+// 4. .active.carousel-item-start and .active.carousel-item-end is the current
 //    slide in its in-transition state. Only one of these occurs at a time.
-// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
+// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
 //    is the upcoming slide in transition.
 
 .carousel {
@@ -42,16 +42,19 @@
   display: block;
 }
 
-.carousel-item-next:not(.carousel-item-left),
-.active.carousel-item-right {
+/* rtl:begin:ignore */
+.carousel-item-next:not(.carousel-item-start),
+.active.carousel-item-end {
   transform: translateX(100%);
 }
 
-.carousel-item-prev:not(.carousel-item-right),
-.active.carousel-item-left {
+.carousel-item-prev:not(.carousel-item-end),
+.active.carousel-item-start {
   transform: translateX(-100%);
 }
 
+/* rtl:end:ignore */
+
 
 //
 // Alternate transitions
@@ -65,14 +68,14 @@
   }
 
   .carousel-item.active,
-  .carousel-item-next.carousel-item-left,
-  .carousel-item-prev.carousel-item-right {
+  .carousel-item-next.carousel-item-start,
+  .carousel-item-prev.carousel-item-end {
     z-index: 1;
     opacity: 1;
   }
 
-  .active.carousel-item-left,
-  .active.carousel-item-right {
+  .active.carousel-item-start,
+  .active.carousel-item-end {
     z-index: 0;
     opacity: 0;
     @include transition(opacity 0s $carousel-transition-duration);
@@ -128,6 +131,15 @@
   background-position: 50%;
   background-size: 100% 100%;
 }
+
+/* rtl:options: {
+  "autoRename": true,
+  "stringMap":[ {
+    "name"    : "prev-next",
+    "search"  : "prev",
+    "replace" : "next"
+  } ]
+} */
 .carousel-control-prev-icon {
   background-image: escape-svg($carousel-control-prev-icon-bg);
 }
@@ -135,7 +147,6 @@
   background-image: escape-svg($carousel-control-next-icon-bg);
 }
 
-
 // Optional indicator pips
 //
 // Add an ordered list with the following class and add a list item for each

data/assets/stylesheets/bootstrap/_dropdown.scss

@@ -1,8 +1,8 @@
 // The dropdown wrapper (`<div>`)
 .dropup,
-.dropright,
+.dropend,
 .dropdown,
-.dropleft {
+.dropstart {
   position: relative;
 }
 
@@ -32,21 +32,31 @@
   border: $dropdown-border-width solid $dropdown-border-color;
   @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
+  }
 }
 
 // scss-docs-start responsive-breakpoints
+// We deliberately hardcode the `bs-` prefix because we check
+// this custom property in JS to determine Popper's positioning
+
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    .dropdown-menu#{$infix}-left {
-      right: auto;
-      left: 0;
+    .dropdown-menu#{$infix}-start {
+      --bs-position: start;
+      right: auto #{"/* rtl:ignore */"};
+      left: 0 #{"/* rtl:ignore */"};
     }
 
-    .dropdown-menu#{$infix}-right {
-      right: 0;
-      left: auto;
+    .dropdown-menu#{$infix}-end {
+      --bs-position: end;
+      right: 0 #{"/* rtl:ignore */"};
+      left: auto #{"/* rtl:ignore */"};
     }
   }
 }
@@ -67,7 +77,7 @@
   }
 }
 
-.dropright {
+.dropend {
   .dropdown-menu {
     top: 0;
     right: auto;
@@ -77,14 +87,14 @@
   }
 
   .dropdown-toggle {
-    @include caret(right);
+    @include caret(end);
     &::after {
       vertical-align: 0;
     }
   }
 }
 
-.dropleft {
+.dropstart {
   .dropdown-menu {
     top: 0;
     right: 100%;
@@ -94,24 +104,13 @@
   }
 
   .dropdown-toggle {
-    @include caret(left);
+    @include caret(start);
     &::before {
       vertical-align: 0;
     }
   }
 }
 
-// When enabled Popper.js, reset basic dropdown position
-// stylelint-disable-next-line no-duplicate-selectors
-.dropdown-menu {
-  &[x-placement^="top"],
-  &[x-placement^="right"],
-  &[x-placement^="bottom"],
-  &[x-placement^="left"] {
-    right: auto;
-    bottom: auto;
-  }
-}
 
 // Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {

data/assets/stylesheets/bootstrap/_functions.scss

@@ -161,9 +161,8 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   @return mix(black, $color, $weight);
 }
 
-// Scale a color:
 // Shade the color if the weight is positive, else tint it
-@function scale-color($color, $weight) {
+@function shift-color($color, $weight) {
   @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
 }
 // scss-docs-end color-functions

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

@@ -99,13 +99,13 @@
 
       > .list-group-item {
         &:first-child {
-          @include border-bottom-left-radius($list-group-border-radius);
-          @include border-top-right-radius(0);
+          @include border-bottom-start-radius($list-group-border-radius);
+          @include border-top-end-radius(0);
         }
 
         &:last-child {
-          @include border-top-right-radius($list-group-border-radius);
-          @include border-bottom-left-radius(0);
+          @include border-top-end-radius($list-group-border-radius);
+          @include border-bottom-start-radius(0);
         }
 
         &.active {
@@ -152,8 +152,8 @@
 // Organizationally, this must come after the `:hover` states.
 
 @each $state, $value in $theme-colors {
-  $background: scale-color($value, $list-group-item-bg-scale);
-  $color: scale-color($value, $list-group-item-color-scale);
+  $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));
   }

data/assets/stylesheets/bootstrap/_navbar.scss

@@ -56,7 +56,7 @@
 .navbar-brand {
   padding-top: $navbar-brand-padding-y;
   padding-bottom: $navbar-brand-padding-y;
-  margin-right: $navbar-brand-margin-right;
+  margin-right: $navbar-brand-margin-end;
   @include font-size($navbar-brand-font-size);
   text-decoration: if($link-decoration == none, null, none);
   white-space: nowrap;

data/assets/stylesheets/bootstrap/_pagination.scss

@@ -31,7 +31,7 @@
 
 .page-item {
   &:not(:first-child) .page-link {
-    margin-left: $pagination-margin-left;
+    margin-left: $pagination-margin-start;
   }
 
   &.active .page-link {

data/assets/stylesheets/bootstrap/_popover.scss

@@ -1,7 +1,7 @@
 .popover {
   position: absolute;
   top: 0;
-  left: 0;
+  left: 0 #{"/* rtl:ignore */"};
   z-index: $zindex-popover;
   display: block;
   max-width: $popover-max-width;
@@ -36,7 +36,8 @@
 }
 
 .bs-popover-top {
-  margin-bottom: $popover-arrow-height;
+  // 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);
@@ -55,8 +56,9 @@
   }
 }
 
-.bs-popover-right {
-  margin-left: $popover-arrow-height;
+.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);
@@ -79,7 +81,8 @@
 }
 
 .bs-popover-bottom {
-  margin-top: $popover-arrow-height;
+  // 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);
@@ -110,8 +113,9 @@
   }
 }
 
-.bs-popover-left {
-  margin-right: $popover-arrow-height;
+.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);
@@ -134,21 +138,20 @@
 }
 
 .bs-popover-auto {
-  &[x-placement^="top"] {
+  &[data-popper-placement^="top"] {
     @extend .bs-popover-top;
   }
-  &[x-placement^="right"] {
-    @extend .bs-popover-right;
+  &[data-popper-placement^="right"] {
+    @extend .bs-popover-end;
   }
-  &[x-placement^="bottom"] {
+  &[data-popper-placement^="bottom"] {
     @extend .bs-popover-bottom;
   }
-  &[x-placement^="left"] {
-    @extend .bs-popover-left;
+  &[data-popper-placement^="left"] {
+    @extend .bs-popover-start;
   }
 }
 
-
 // Offset the popover to account for the popover arrow
 .popover-header {
   padding: $popover-header-padding-y $popover-header-padding-x;