bootstrap 4.6.1 → 5.0.0

data/assets/stylesheets/bootstrap/mixins/_caret.scss

@@ -1,25 +1,26 @@
-@mixin caret-down() {
+// scss-docs-start caret-mixins
+@mixin caret-down {
   border-top: $caret-width solid;
   border-right: $caret-width solid transparent;
   border-bottom: 0;
   border-left: $caret-width solid transparent;
 }
 
-@mixin caret-up() {
+@mixin caret-up {
   border-top: 0;
   border-right: $caret-width solid transparent;
   border-bottom: $caret-width solid;
   border-left: $caret-width solid transparent;
 }
 
-@mixin caret-right() {
+@mixin caret-end {
   border-top: $caret-width solid transparent;
   border-right: 0;
   border-bottom: $caret-width solid transparent;
   border-left: $caret-width solid;
 }
 
-@mixin caret-left() {
+@mixin caret-start {
   border-top: $caret-width solid transparent;
   border-right: $caret-width solid;
   border-bottom: $caret-width solid transparent;
@@ -36,12 +37,12 @@
         @include caret-down();
       } @else if $direction == up {
         @include caret-up();
-      } @else if $direction == right {
-        @include caret-right();
+      } @else if $direction == end {
+        @include caret-end();
       }
     }
 
-    @if $direction == left {
+    @if $direction == start {
       &::after {
         display: none;
       }
@@ -51,7 +52,7 @@
         margin-right: $caret-spacing;
         vertical-align: $caret-vertical-align;
         content: "";
-        @include caret-left();
+        @include caret-start();
       }
     }
 
@@ -60,3 +61,4 @@
     }
   }
 }
+// scss-docs-end caret-mixins

data/assets/stylesheets/bootstrap/mixins/_clearfix.scss

@@ -1,3 +1,4 @@
+// scss-docs-start clearfix
 @mixin clearfix() {
   &::after {
     display: block;
@@ -5,3 +6,4 @@
     content: "";
   }
 }
+// scss-docs-end clearfix

data/assets/stylesheets/bootstrap/mixins/_color-scheme.scss

@@ -0,0 +1,7 @@
+// scss-docs-start mixin-color-scheme
+@mixin color-scheme($name) {
+  @media (prefers-color-scheme: #{$name}) {
+    @content;
+  }
+}
+// scss-docs-end mixin-color-scheme

data/assets/stylesheets/bootstrap/mixins/_container.scss

@@ -0,0 +1,9 @@
+// Container mixins
+
+@mixin make-container($gutter: $container-padding-x) {
+  width: 100%;
+  padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
+  padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
+  margin-right: auto;
+  margin-left: auto;
+}

data/assets/stylesheets/bootstrap/mixins/_forms.scss

@@ -1,33 +1,7 @@
-// Form control focus state
-//
-// Generate a customized focus state and for any input with the specified color,
-// which defaults to the `$input-focus-border-color` variable.
-//
-// We highly encourage you to not customize the default value, but instead use
-// this to tweak colors on an as-needed basis. This aesthetic change is based on
-// WebKit's default styles, but applicable to a wider range of browsers. Its
-// usability and accessibility should be taken into account with any change.
-//
-// Example usage: change the default blue border and shadow to white for better
-// contrast against a dark gray background.
-@mixin form-control-focus($ignore-warning: false) {
-  &:focus {
-    color: $input-focus-color;
-    background-color: $input-focus-bg;
-    border-color: $input-focus-border-color;
-    outline: 0;
-    @if $enable-shadows {
-      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $input-focus-box-shadow;
-    }
-  }
-  @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
-}
-
 // This mixin uses an `if()` technique to be compatible with Dart Sass
 // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
+
+// scss-docs-start form-validation-mixins
 @mixin form-validation-state-selector($state) {
   @if ($state == "valid" or $state == "invalid") {
     .was-validated #{if(&, "&", "")}:#{$state},
@@ -41,19 +15,26 @@
   }
 }
 
-@mixin form-validation-state($state, $color, $icon) {
+@mixin form-validation-state(
+  $state,
+  $color,
+  $icon,
+  $tooltip-color: color-contrast($color),
+  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
+  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
+) {
   .#{$state}-feedback {
     display: none;
     width: 100%;
     margin-top: $form-feedback-margin-top;
     @include font-size($form-feedback-font-size);
+    font-style: $form-feedback-font-style;
     color: $color;
   }
 
   .#{$state}-tooltip {
     position: absolute;
     top: 100%;
-    left: 0;
     z-index: 5;
     display: none;
     max-width: 100%; // Contain to parent when possible
@@ -61,16 +42,9 @@
     margin-top: .1rem;
     @include font-size($form-feedback-tooltip-font-size);
     line-height: $form-feedback-tooltip-line-height;
-    color: color-yiq($color);
-    background-color: rgba($color, $form-feedback-tooltip-opacity);
+    color: $tooltip-color;
+    background-color: $tooltip-bg-color;
     @include border-radius($form-feedback-tooltip-border-radius);
-
-    // See https://github.com/twbs/bootstrap/pull/31557
-    // Align tooltip to form elements
-    .form-row > .col > &,
-    .form-row > [class*="col-"] > & {
-      left: $form-grid-gutter-width * .5;
-    }
   }
 
   @include form-validation-state-selector($state) {
@@ -85,7 +59,7 @@
       border-color: $color;
 
       @if $enable-validation-icons {
-        padding-right: $input-height-inner !important; // stylelint-disable-line declaration-no-important
+        padding-right: $input-height-inner;
         background-image: escape-svg($icon);
         background-repeat: no-repeat;
         background-position: right $input-height-inner-quarter center;
@@ -94,17 +68,7 @@
 
       &:focus {
         border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
-      }
-    }
-  }
-
-  // stylelint-disable-next-line selector-no-qualifying-type
-  select.form-control {
-    @include form-validation-state-selector($state) {
-      @if $enable-validation-icons {
-        padding-right: $input-padding-x * 4 !important; // stylelint-disable-line declaration-no-important
-        background-position: right $input-padding-x * 2 center;
+        box-shadow: $focus-box-shadow;
       }
     }
   }
@@ -119,77 +83,55 @@
     }
   }
 
-  .custom-select {
+  .form-select {
     @include form-validation-state-selector($state) {
       border-color: $color;
 
       @if $enable-validation-icons {
-        padding-right: $custom-select-feedback-icon-padding-right !important; // stylelint-disable-line declaration-no-important
-        background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
+        &:not([multiple]):not([size]),
+        &:not([multiple])[size="1"] {
+          padding-right: $form-select-feedback-icon-padding-end;
+          background-image: escape-svg($form-select-indicator), escape-svg($icon);
+          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+          background-size: $form-select-bg-size, $form-select-feedback-icon-size;
+        }
       }
 
       &:focus {
         border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        box-shadow: $focus-box-shadow;
       }
     }
   }
 
   .form-check-input {
     @include form-validation-state-selector($state) {
-      ~ .form-check-label {
-        color: $color;
-      }
-
-      ~ .#{$state}-feedback,
-      ~ .#{$state}-tooltip {
-        display: block;
-      }
-    }
-  }
-
-  .custom-control-input {
-    @include form-validation-state-selector($state) {
-      ~ .custom-control-label {
-        color: $color;
-
-        &::before {
-          border-color: $color;
-        }
-      }
+      border-color: $color;
 
       &:checked {
-        ~ .custom-control-label::before {
-          border-color: lighten($color, 10%);
-          @include gradient-bg(lighten($color, 10%));
-        }
+        background-color: $color;
       }
 
       &:focus {
-        ~ .custom-control-label::before {
-          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
-        }
+        box-shadow: $focus-box-shadow;
+      }
 
-        &:not(:checked) ~ .custom-control-label::before {
-          border-color: $color;
-        }
+      ~ .form-check-label {
+        color: $color;
       }
     }
   }
+  .form-check-inline .form-check-input {
+    ~ .#{$state}-feedback {
+      margin-left: .5em;
+    }
+  }
 
-  // custom file
-  .custom-file-input {
+  .input-group .form-control,
+  .input-group .form-select {
     @include form-validation-state-selector($state) {
-      ~ .custom-file-label {
-        border-color: $color;
-      }
-
-      &:focus {
-        ~ .custom-file-label {
-          border-color: $color;
-          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
-        }
-      }
+      z-index: 3;
     }
   }
 }
+// scss-docs-end form-validation-mixins

data/assets/stylesheets/bootstrap/mixins/_gradients.scss

@@ -1,45 +1,47 @@
 // Gradients
 
-@mixin gradient-bg($color) {
+// scss-docs-start gradient-bg-mixin
+@mixin gradient-bg($color: null) {
+  background-color: $color;
+
   @if $enable-gradients {
-    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
-  } @else {
-    background-color: $color;
+    background-image: var(--#{$variable-prefix}gradient);
   }
 }
+// scss-docs-end gradient-bg-mixin
 
+// scss-docs-start gradient-mixins
 // Horizontal gradient, from left to right
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
 @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
   background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
-  background-repeat: repeat-x;
 }
 
 // Vertical gradient, from top to bottom
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
   background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
-  background-repeat: repeat-x;
 }
 
 @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
   background-image: linear-gradient($deg, $start-color, $end-color);
-  background-repeat: repeat-x;
 }
+
 @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
   background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
-  background-repeat: no-repeat;
 }
+
 @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
   background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
-  background-repeat: no-repeat;
 }
+
 @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
   background-image: radial-gradient(circle, $inner-color, $outer-color);
-  background-repeat: no-repeat;
 }
+
 @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
   background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
 }
+// scss-docs-end gradient-mixins

data/assets/stylesheets/bootstrap/mixins/_grid.scss

@@ -2,57 +2,47 @@
 //
 // Generate semantic grid columns with these mixins.
 
-@mixin make-container($gutter: $grid-gutter-width) {
-  width: 100%;
-  padding-right: $gutter * .5;
-  padding-left: $gutter * .5;
-  margin-right: auto;
-  margin-left: auto;
-}
-
 @mixin make-row($gutter: $grid-gutter-width) {
+  --#{$variable-prefix}gutter-x: #{$gutter};
+  --#{$variable-prefix}gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
-  margin-right: -$gutter * .5;
-  margin-left: -$gutter * .5;
-}
-
-// For each breakpoint, define the maximum width of the container in a media query
-@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint, $container-max-width in $max-widths {
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      max-width: $container-max-width;
-    }
-  }
-  @include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5");
+  margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
+  margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
 }
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {
-  position: relative;
+  // Add box sizing if only the grid is loaded
+  box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
   // Prevent columns from becoming too narrow when at smaller grid tiers by
-  // always setting `width: 100%;`. This works because we use `flex` values
+  // always setting `width: 100%;`. This works because we set the width
   // later on to override this initial width.
+  flex-shrink: 0;
   width: 100%;
-  padding-right: $gutter * .5;
-  padding-left: $gutter * .5;
+  max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
+  padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
+  margin-top: var(--#{$variable-prefix}gutter-y);
 }
 
-@mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 percentage(divide($size, $columns));
-  // Add a `max-width` to ensure content within each column does not blow out
-  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
-  // do not appear to require this.
-  max-width: percentage(divide($size, $columns));
+@mixin make-col($size: false, $columns: $grid-columns) {
+  @if $size {
+    flex: 0 0 auto;
+    width: percentage($size / $columns);
+  } @else {
+    flex: 1 1 0;
+    max-width: 100%;
+  }
 }
 
 @mixin make-col-auto() {
   flex: 0 0 auto;
   width: auto;
-  max-width: 100%; // Reset earlier grid tiers
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
-  $num: divide($size, $columns);
+  $num: $size / $columns;
   margin-left: if($num == 0, 0, percentage($num));
 }
 
@@ -63,7 +53,73 @@
 // style grid.
 @mixin row-cols($count) {
   > * {
-    flex: 0 0 divide(100%, $count);
-    max-width: divide(100%, $count);
+    flex: 0 0 auto;
+    width: 100% / $count;
+  }
+}
+
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .col#{$infix} {
+        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+      }
+
+      .row-cols#{$infix}-auto > * {
+        @include make-col-auto();
+      }
+
+      @if $grid-row-columns > 0 {
+        @for $i from 1 through $grid-row-columns {
+          .row-cols#{$infix}-#{$i} {
+            @include row-cols($i);
+          }
+        }
+      }
+
+      .col#{$infix}-auto {
+        @include make-col-auto();
+      }
+
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .col#{$infix}-#{$i} {
+            @include make-col($i, $columns);
+          }
+        }
+
+        // `$columns - 1` because offsetting by the width of an entire row isn't possible
+        @for $i from 0 through ($columns - 1) {
+          @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
+            .offset#{$infix}-#{$i} {
+              @include make-col-offset($i, $columns);
+            }
+          }
+        }
+      }
+
+      // Gutters
+      //
+      // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
+      @each $key, $value in $gutters {
+        .g#{$infix}-#{$key},
+        .gx#{$infix}-#{$key} {
+          --#{$variable-prefix}gutter-x: #{$value};
+        }
+
+        .g#{$infix}-#{$key},
+        .gy#{$infix}-#{$key} {
+          --#{$variable-prefix}gutter-y: #{$value};
+        }
+      }
+    }
   }
 }

data/assets/stylesheets/bootstrap/mixins/_image.scss

@@ -7,30 +7,10 @@
 //
 // Keep images from scaling beyond the width of their parents.
 
-@mixin img-fluid() {
+@mixin img-fluid {
   // Part 1: Set a maximum relative to the parent
   max-width: 100%;
   // Part 2: Override the height to auto, otherwise images will be stretched
   // when setting a width and height attribute on the img element.
   height: auto;
 }
-
-
-// Retina image
-//
-// Short retina mixin for setting background-image and -size.
-
-@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
-  background-image: url($file-1x);
-
-  // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
-  // but doesn't convert dppx=>dpi.
-  // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
-  // Compatibility info: https://caniuse.com/css-media-resolution
-  @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
-    only screen and (min-resolution: 2dppx) { // Standardized
-    background-image: url($file-2x);
-    background-size: $width-1x $height-1x;
-  }
-  @include deprecate("`img-retina()`", "v4.3.0", "v5");
-}

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

@@ -1,14 +1,16 @@
 // List Groups
 
+// scss-docs-start list-group-mixin
 @mixin list-group-item-variant($state, $background, $color) {
   .list-group-item-#{$state} {
     color: $color;
     background-color: $background;
 
     &.list-group-item-action {
-      @include hover-focus() {
+      &:hover,
+      &:focus {
         color: $color;
-        background-color: darken($background, 5%);
+        background-color: shade-color($background, 10%);
       }
 
       &.active {
@@ -19,3 +21,4 @@
     }
   }
 }
+// scss-docs-end list-group-mixin

data/assets/stylesheets/bootstrap/mixins/_lists.scss

@@ -1,7 +1,7 @@
 // Lists
 
 // Unstyled keeps list items block level, just removes default browser padding and list-style
-@mixin list-unstyled() {
+@mixin list-unstyled {
   padding-left: 0;
   list-style: none;
 }

data/assets/stylesheets/bootstrap/mixins/_pagination.scss

@@ -1,22 +1,31 @@
 // Pagination
 
-@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+// scss-docs-start pagination-mixin
+@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
   .page-link {
     padding: $padding-y $padding-x;
     @include font-size($font-size);
-    line-height: $line-height;
   }
 
   .page-item {
-    &:first-child {
-      .page-link {
-        @include border-left-radius($border-radius);
+    @if $pagination-margin-start == (-$pagination-border-width) {
+      &:first-child {
+        .page-link {
+          @include border-start-radius($border-radius);
+        }
       }
-    }
-    &:last-child {
+
+      &:last-child {
+        .page-link {
+          @include border-end-radius($border-radius);
+        }
+      }
+    } @else {
+      //Add border-radius to all pageLinks in case they have left margin
       .page-link {
-        @include border-right-radius($border-radius);
+        @include border-radius($border-radius);
       }
     }
   }
 }
+// scss-docs-end pagination-mixin

data/assets/stylesheets/bootstrap/mixins/_reset-text.scss

@@ -1,6 +1,6 @@
-@mixin reset-text() {
+@mixin reset-text {
   font-family: $font-family-base;
-  // We deliberately do NOT reset font-size or word-wrap.
+  // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
   font-style: normal;
   font-weight: $font-weight-normal;
   line-height: $line-height-base;

data/assets/stylesheets/bootstrap/mixins/_table-variants.scss

@@ -0,0 +1,21 @@
+// scss-docs-start table-variant
+@mixin table-variant($state, $background) {
+  .table-#{$state} {
+    $color: color-contrast(opaque($body-bg, $background));
+    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+
+    --#{$variable-prefix}table-bg: #{$background};
+    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
+    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
+    --#{$variable-prefix}table-active-bg: #{$active-bg};
+    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
+    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
+    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
+
+    color: $color;
+    border-color: mix($color, $background, percentage($table-border-factor));
+  }
+}
+// scss-docs-end table-variant

data/assets/stylesheets/bootstrap/mixins/_transition.scss

@@ -17,7 +17,7 @@
       transition: $transition;
     }
 
-    @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none {
+    @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
       @media (prefers-reduced-motion: reduce) {
         transition: none;
       }