bootstrap 4.2.1 → 4.3.0

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

@@ -7,5 +7,11 @@
       color: color-yiq($bg);
       background-color: darken($bg, 10%);
     }
+
+    &:focus,
+    &.focus {
+      outline: 0;
+      box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
+    }
   }
 }

data/assets/stylesheets/bootstrap/mixins/_border-radius.scss

@@ -1,9 +1,13 @@
+// stylelint-disable property-blacklist
 // Single side border-radius
 
-@mixin border-radius($radius: $border-radius) {
+@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
   @if $enable-rounded {
     border-radius: $radius;
   }
+  @else if $fallback-border-radius != false {
+    border-radius: $fallback-border-radius;
+  }
 }
 
 @mixin border-top-radius($radius) {
@@ -33,3 +37,27 @@
     border-bottom-left-radius: $radius;
   }
 }
+
+@mixin border-top-left-radius($radius) {
+  @if $enable-rounded {
+    border-top-left-radius: $radius;
+  }
+}
+
+@mixin border-top-right-radius($radius) {
+  @if $enable-rounded {
+    border-top-right-radius: $radius;
+  }
+}
+
+@mixin border-bottom-right-radius($radius) {
+  @if $enable-rounded {
+    border-bottom-right-radius: $radius;
+  }
+}
+
+@mixin border-bottom-left-radius($radius) {
+  @if $enable-rounded {
+    border-bottom-left-radius: $radius;
+  }
+}

data/assets/stylesheets/bootstrap/mixins/_box-shadow.scss

@@ -1,5 +1,20 @@
 @mixin box-shadow($shadow...) {
   @if $enable-shadows {
-    box-shadow: $shadow;
+    $result: ();
+
+    @if (length($shadow) == 1) {
+      // We can pass `@include box-shadow(none);`
+      $result: $shadow;
+    } @else {
+      // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
+      @for $i from 1 through length($shadow) {
+        @if nth($shadow, $i) != "none" {
+          $result: append($result, nth($shadow, $i), "comma");
+        }
+      }
+    }
+    @if (length($result) > 0) {
+      box-shadow: $result;
+    }
   }
 }

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

@@ -49,7 +49,7 @@
 
     &:focus {
       // Avoid using mixin so we can pass custom focus shadow properly
-      @if $enable-shadows {
+      @if $enable-shadows and $btn-active-box-shadow != none {
         box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
       } @else {
         box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
@@ -100,12 +100,8 @@
 // Button sizes
 @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
   padding: $padding-y $padding-x;
-  font-size: $font-size;
+  @include font-size($font-size);
   line-height: $line-height;
   // Manually declare to provide an override to the browser default
-  @if $enable-rounded {
-    border-radius: $border-radius;
-  } @else {
-    border-radius: 0;
-  }
+  @include border-radius($border-radius, 0);
 }

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

@@ -29,8 +29,8 @@
   @if $enable-caret {
     &::after {
       display: inline-block;
-      margin-left: $caret-width * .85;
-      vertical-align: $caret-width * .85;
+      margin-left: $caret-spacing;
+      vertical-align: $caret-vertical-align;
       content: "";
       @if $direction == down {
         @include caret-down;
@@ -48,8 +48,8 @@
 
       &::before {
         display: inline-block;
-        margin-right: $caret-width * .85;
-        vertical-align: $caret-width * .85;
+        margin-right: $caret-spacing;
+        vertical-align: $caret-vertical-align;
         content: "";
         @include caret-left;
       }

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

@@ -0,0 +1,10 @@
+// Deprecate mixin
+//
+// This mixin can be used to deprecate mixins or functions.
+// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
+// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
+@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
+  @if ($enable-deprecation-messages != false and $ignore-warning != true) {
+    @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
+  }
+}

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

@@ -2,10 +2,13 @@
 
 @mixin float-left {
   float: left !important;
+  @include deprecate("The `float-left` mixin", "v4.3.0", "v5");
 }
 @mixin float-right {
   float: right !important;
+  @include deprecate("The `float-right` mixin", "v4.3.0", "v5");
 }
 @mixin float-none {
   float: none !important;
+  @include deprecate("The `float-none` mixin", "v4.3.0", "v5");
 }

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

@@ -26,12 +26,12 @@
 }
 
 
-@mixin form-validation-state($state, $color) {
+@mixin form-validation-state($state, $color, $icon) {
   .#{$state}-feedback {
     display: none;
     width: 100%;
     margin-top: $form-feedback-margin-top;
-    font-size: $form-feedback-font-size;
+    @include font-size($form-feedback-font-size);
     color: $color;
   }
 
@@ -43,7 +43,7 @@
     max-width: 100%; // Contain to parent when possible
     padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
     margin-top: .1rem;
-    font-size: $form-feedback-tooltip-font-size;
+    @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);
@@ -57,15 +57,10 @@
 
       @if $enable-validation-icons {
         padding-right: $input-height-inner;
+        background-image: $icon;
         background-repeat: no-repeat;
-        background-position: center right calc(#{$input-height-inner} / 4);
-        background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
-
-        @if $state == "valid" {
-          background-image: $form-feedback-icon-valid;
-        } @else {
-          background-image: $form-feedback-icon-invalid;
-        }
+        background-position: center right $input-height-inner-quarter;
+        background-size: $input-height-inner-half $input-height-inner-half;
       }
 
       &:focus {
@@ -86,7 +81,7 @@
     &.is-#{$state} {
       @if $enable-validation-icons {
         padding-right: $input-height-inner;
-        background-position: top calc(#{$input-height-inner} / 4) right calc(#{$input-height-inner} / 4);
+        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
       }
     }
   }
@@ -97,9 +92,8 @@
       border-color: $color;
 
       @if $enable-validation-icons {
-        $form-feedback-icon: if($state == "valid", $form-feedback-icon-valid, $form-feedback-icon-invalid);
         padding-right: $custom-select-feedback-icon-padding-right;
-        background: $custom-select-background, $form-feedback-icon no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
+        background: $custom-select-background, $icon $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
       }
 
       &:focus {

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

@@ -20,7 +20,6 @@
 //
 // Short retina mixin for setting background-image and -size.
 
-// stylelint-disable indentation, media-query-list-comma-newline-after
 @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
   background-image: url($file-1x);
 
@@ -29,8 +28,9 @@
   // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
   // Compatibility info: https://caniuse.com/#feat=css-media-resolution
   @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
-  only screen and (min-resolution: 2dppx) { // Standardized
+    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/_pagination.scss

@@ -3,7 +3,7 @@
 @mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
   .page-link {
     padding: $padding-y $padding-x;
-    font-size: $font-size;
+    @include font-size($font-size);
     line-height: $line-height;
   }
 

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

@@ -5,7 +5,7 @@
   font-weight: $font-weight-normal;
   line-height: $line-height-base;
   text-align: left; // Fallback for where `start` is not supported
-  text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties
+  text-align: start;
   text-decoration: none;
   text-shadow: none;
   text-transform: none;

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

@@ -3,4 +3,5 @@
 @mixin size($width, $height: $width) {
   width: $width;
   height: $height;
+  @include deprecate("`size()`", "v4.3.0", "v5");
 }

data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss

@@ -6,9 +6,11 @@
   #{$parent} {
     color: $color !important;
   }
-  a#{$parent} {
-    @include hover-focus {
-      color: darken($color, $emphasized-link-hover-darken-percentage) !important;
+  @if $emphasized-link-hover-darken-percentage != 0 {
+    a#{$parent} {
+      @include hover-focus {
+        color: darken($color, $emphasized-link-hover-darken-percentage) !important;
+      }
     }
   }
 }

data/assets/stylesheets/bootstrap/mixins/_text-hide.scss

@@ -7,7 +7,5 @@
   background-color: transparent;
   border: 0;
 
-  @if ($ignore-warning != true) {
-    @warn "The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5.";
-  }
+  @include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning);
 }

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

@@ -9,7 +9,7 @@
   }
 
   @if $enable-prefers-reduced-motion-media-query {
-    @media screen and (prefers-reduced-motion: reduce) {
+    @media (prefers-reduced-motion: reduce) {
       transition: none;
     }
   }

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

@@ -4,4 +4,5 @@
 
 @mixin invisible($visibility) {
   visibility: $visibility !important;
+  @include deprecate("`invisible()`", "v4.3.0", "v5");
 }

data/assets/stylesheets/bootstrap/utilities/_borders.scss

@@ -1,4 +1,4 @@
-// stylelint-disable declaration-no-important
+// stylelint-disable property-blacklist, declaration-no-important
 
 //
 // Border
@@ -30,26 +30,38 @@
 // Border-radius
 //
 
+.rounded-sm {
+  border-radius: $border-radius-sm !important;
+}
+
 .rounded {
   border-radius: $border-radius !important;
 }
+
 .rounded-top {
   border-top-left-radius: $border-radius !important;
   border-top-right-radius: $border-radius !important;
 }
+
 .rounded-right {
   border-top-right-radius: $border-radius !important;
   border-bottom-right-radius: $border-radius !important;
 }
+
 .rounded-bottom {
   border-bottom-right-radius: $border-radius !important;
   border-bottom-left-radius: $border-radius !important;
 }
+
 .rounded-left {
   border-top-left-radius: $border-radius !important;
   border-bottom-left-radius: $border-radius !important;
 }
 
+.rounded-lg {
+  border-radius: $border-radius-lg !important;
+}
+
 .rounded-circle {
   border-radius: 50% !important;
 }

data/assets/stylesheets/bootstrap/utilities/_display.scss

@@ -8,15 +8,9 @@
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    .d#{$infix}-none         { display: none !important; }
-    .d#{$infix}-inline       { display: inline !important; }
-    .d#{$infix}-inline-block { display: inline-block !important; }
-    .d#{$infix}-block        { display: block !important; }
-    .d#{$infix}-table        { display: table !important; }
-    .d#{$infix}-table-row    { display: table-row !important; }
-    .d#{$infix}-table-cell   { display: table-cell !important; }
-    .d#{$infix}-flex         { display: flex !important; }
-    .d#{$infix}-inline-flex  { display: inline-flex !important; }
+    @each $value in $displays {
+      .d#{$infix}-#{$value} { display: $value !important; }
+    }
   }
 }
 
@@ -26,13 +20,7 @@
 //
 
 @media print {
-  .d-print-none         { display: none !important; }
-  .d-print-inline       { display: inline !important; }
-  .d-print-inline-block { display: inline-block !important; }
-  .d-print-block        { display: block !important; }
-  .d-print-table        { display: table !important; }
-  .d-print-table-row    { display: table-row !important; }
-  .d-print-table-cell   { display: table-cell !important; }
-  .d-print-flex         { display: flex !important; }
-  .d-print-inline-flex  { display: inline-flex !important; }
+  @each $value in $displays {
+    .d-print-#{$value} { display: $value !important; }
+  }
 }

data/assets/stylesheets/bootstrap/utilities/_float.scss

@@ -1,9 +1,11 @@
+// stylelint-disable declaration-no-important
+
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    .float#{$infix}-left  { @include float-left; }
-    .float#{$infix}-right { @include float-right; }
-    .float#{$infix}-none  { @include float-none; }
+    .float#{$infix}-left  { float: left !important; }
+    .float#{$infix}-right { float: right !important; }
+    .float#{$infix}-none  { float: none !important; }
   }
 }

data/assets/stylesheets/bootstrap/utilities/_stretched-link.scss

@@ -0,0 +1,19 @@
+//
+// Stretched link
+//
+
+.stretched-link {
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    // Just in case `pointer-events: none` is set on a parent
+    pointer-events: auto;
+    content: "";
+    // IE10 bugfix, see https://stackoverflow.com/questions/16947967/ie10-hover-pseudo-class-doesnt-work-without-background-color
+    background-color: rgba(0, 0, 0, 0);
+  }
+}

data/assets/stylesheets/bootstrap/utilities/_text.scss

@@ -4,7 +4,7 @@
 // Text
 //
 
-.text-monospace { font-family: $font-family-monospace; }
+.text-monospace { font-family: $font-family-monospace !important; }
 
 // Alignment
 
@@ -62,6 +62,11 @@
 
 .text-decoration-none { text-decoration: none !important; }
 
+.text-break {
+  word-break: break-word !important; // IE & < Edge 18
+  overflow-wrap: break-word !important;
+}
+
 // Reset
 
 .text-reset { color: inherit !important; }

data/assets/stylesheets/bootstrap/utilities/_visibility.scss

@@ -1,11 +1,13 @@
+// stylelint-disable declaration-no-important
+
 //
 // Visibility utilities
 //
 
 .visible {
-  @include invisible(visible);
+  visibility: visible !important;
 }
 
 .invisible {
-  @include invisible(hidden);
+  visibility: hidden !important;
 }