bootstrap 5.0.0.alpha1 → 5.0.0.alpha2

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

@@ -2,17 +2,15 @@
   @if $enable-shadows {
     $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");
-        }
+    @each $value in $shadow {
+      @if $value != null {
+        $result: append($result, $value, "comma");
+      }
+      @if $value == none and length($shadow) > 1 {
+        @warn "The keyword 'none' must be used as a single argument.";
       }
     }
+
     @if (length($result) > 0) {
       box-shadow: $result;
     }

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

@@ -107,8 +107,9 @@
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
 @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-  $min: breakpoint-min($name, $breakpoints);
-  $max: breakpoint-max(breakpoint-next($name, $breakpoints));
+  $min:  breakpoint-min($name, $breakpoints);
+  $next: breakpoint-next($name, $breakpoints);
+  $max:  breakpoint-max($next);
 
   @if $min != null and $max != null {
     @media (min-width: $min) and (max-width: $max) {
@@ -119,7 +120,7 @@
       @content;
     }
   } @else if $min == null {
-    @include media-breakpoint-down($name, $breakpoints) {
+    @include media-breakpoint-down($next, $breakpoints) {
       @content;
     }
   }

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

@@ -7,12 +7,15 @@
   $background,
   $border,
   $color: color-contrast($background),
-  $hover-background: darken($background, 7.5%),
-  $hover-border: darken($border, 10%),
+  $hover-background: if($color == $color-contrast-light, darken($background, 7.5%), lighten($background, 7.5%)),
+  $hover-border: if($color == $color-contrast-light, darken($border, 10%), lighten($border, 5%)),
   $hover-color: color-contrast($hover-background),
-  $active-background: darken($background, 10%),
-  $active-border: darken($border, 12.5%),
-  $active-color: color-contrast($active-background)
+  $active-background: if($color == $color-contrast-light, darken($background, 10%), lighten($background, 10%)),
+  $active-border: if($color == $color-contrast-light, darken($border, 12.5%), lighten($border, 5%)),
+  $active-color: color-contrast($active-background),
+  $disabled-background: $background,
+  $disabled-border: $border,
+  $disabled-color: color-contrast($disabled-background)
 ) {
   color: $color;
   @include gradient-bg($background);
@@ -61,11 +64,11 @@
 
   &:disabled,
   &.disabled {
-    color: $color;
-    background-color: $background;
+    color: $disabled-color;
+    background-color: $disabled-background;
     // Remove CSS gradients if they're enabled
     background-image: if($enable-gradients, none, null);
-    border-color: $border;
+    border-color: $disabled-border;
   }
 }
 

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

@@ -1,9 +1,11 @@
 // Container mixins
 
-@mixin make-container($padding-x: $container-padding-x) {
+@mixin make-container($gutter: $container-padding-x) {
+  --bs-gutter-x: #{$gutter};
+
   width: 100%;
-  padding-right: $padding-x;
-  padding-left: $padding-x;
+  padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list
   margin-right: auto;
   margin-left: auto;
 }

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

@@ -6,11 +6,10 @@
   --bs-gutter-x: #{$gutter};
   --bs-gutter-y: 0;
   display: flex;
-  flex: 1 0 100%;
   flex-wrap: wrap;
-  margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-blacklist
-  margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist
-  margin-left: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist
+  margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-disallowed-list
+  margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-disallowed-list
 }
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -22,8 +21,8 @@
   flex-shrink: 0;
   width: 100%;
   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-blacklist
-  padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-blacklist
+  padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list
   margin-top: var(--bs-gutter-y);
 }
 
@@ -48,7 +47,7 @@
 // numberof columns. Supports wrapping to new lines, but does not do a Masonry
 // style grid.
 @mixin row-cols($count) {
-  & > * {
+  > * {
     flex: 0 0 auto;
     width: 100% / $count;
   }

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

@@ -1,4 +1,4 @@
-// stylelint-disable property-blacklist
+// stylelint-disable property-disallowed-list
 @mixin transition($transition...) {
   @if length($transition) == 0 {
     $transition: $transition-base;

data/assets/stylesheets/bootstrap/mixins/{_screen-reader.scss → _visually-hidden.scss}

@@ -1,11 +1,11 @@
 // stylelint-disable declaration-no-important
 
-// Only display content to screen readers
+// Hide content visually while keeping it accessible to assistive technologies
 //
-// See: https://a11yproject.com/posts/how-to-hide-content/
+// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
 // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
 
-@mixin sr-only {
+@mixin visually-hidden() {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
@@ -21,8 +21,8 @@
 //
 // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 
-@mixin sr-only-focusable {
+@mixin visually-hidden-focusable() {
   &:not(:focus) {
-    @include sr-only();
+    @include visually-hidden();
   }
 }

data/lib/bootstrap/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Bootstrap
-  VERSION       = '5.0.0.alpha1'
-  BOOTSTRAP_SHA = 'a1708ec2a38d331c4c9eacac08ce9c9839649476'
+  VERSION       = '5.0.0.alpha2'
+  BOOTSTRAP_SHA = 'b083c9639fd9012e5cba57d6c4088d43b3c3e57d'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bootstrap
 version: !ruby/object:Gem::Version
-  version: 5.0.0.alpha1
+  version: 5.0.0.alpha2
 platform: ruby
 authors:
 - Twitter, Inc.
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-08-09 00:00:00.000000000 Z
+date: 2020-11-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: popper_js
@@ -307,11 +307,11 @@ files:
 - assets/stylesheets/bootstrap/forms/_validation.scss
 - assets/stylesheets/bootstrap/helpers/_clearfix.scss
 - assets/stylesheets/bootstrap/helpers/_colored-links.scss
-- assets/stylesheets/bootstrap/helpers/_embed.scss
 - assets/stylesheets/bootstrap/helpers/_position.scss
-- assets/stylesheets/bootstrap/helpers/_screenreaders.scss
+- assets/stylesheets/bootstrap/helpers/_ratio.scss
 - assets/stylesheets/bootstrap/helpers/_stretched-link.scss
 - assets/stylesheets/bootstrap/helpers/_text-truncation.scss
+- assets/stylesheets/bootstrap/helpers/_visually-hidden.scss
 - assets/stylesheets/bootstrap/mixins/_alert.scss
 - assets/stylesheets/bootstrap/mixins/_border-radius.scss
 - assets/stylesheets/bootstrap/mixins/_box-shadow.scss
@@ -330,11 +330,11 @@ files:
 - assets/stylesheets/bootstrap/mixins/_pagination.scss
 - assets/stylesheets/bootstrap/mixins/_reset-text.scss
 - assets/stylesheets/bootstrap/mixins/_resize.scss
-- assets/stylesheets/bootstrap/mixins/_screen-reader.scss
 - assets/stylesheets/bootstrap/mixins/_table-variants.scss
 - assets/stylesheets/bootstrap/mixins/_text-truncate.scss
 - assets/stylesheets/bootstrap/mixins/_transition.scss
 - assets/stylesheets/bootstrap/mixins/_utilities.scss
+- assets/stylesheets/bootstrap/mixins/_visually-hidden.scss
 - assets/stylesheets/bootstrap/utilities/_api.scss
 - assets/stylesheets/bootstrap/vendor/_rfs.scss
 - bootstrap.gemspec

data/assets/stylesheets/bootstrap/helpers/_embed.scss

@@ -1,31 +0,0 @@
-// Credit: Nicolas Gallagher and SUIT CSS.
-
-.embed-responsive {
-  position: relative;
-  width: 100%;
-
-  &::before {
-    display: block;
-    content: "";
-  }
-
-  .embed-responsive-item,
-  iframe,
-  embed,
-  object,
-  video {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-@each $key, $ratio in $embed-responsive-aspect-ratios {
-  .embed-responsive-#{$key} {
-    &::before {
-      padding-top: percentage(map-get($ratio, y) / map-get($ratio, x));
-    }
-  }
-}

data/assets/stylesheets/bootstrap/helpers/_screenreaders.scss

@@ -1,8 +0,0 @@
-//
-// Screenreaders
-//
-
-.sr-only,
-.sr-only-focusable:not(:focus) {
-  @include sr-only();
-}