Merge branch 'v4-dev' into v4-docs-button-group-a11y-patch1

14 files changed, 78 insertions, 94 deletions

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index af74a55f1..d4c79ab60 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -79,12 +79,6 @@
   @include border-left-radius(0);
 }
 
-// On active and open, don't show outline
-.btn-group .dropdown-toggle:active,
-.btn-group.open .dropdown-toggle {
-  outline: 0;
-}
-
 
 // Sizing
 //
@@ -119,8 +113,8 @@
 
 
 // The clickable button for toggling the menu
-// Remove the gradient and set the same inset shadow as the :active state
-.btn-group.open .dropdown-toggle {
+// Set the same inset shadow as the :active state
+.btn-group.show .dropdown-toggle {
   @include box-shadow($btn-active-box-shadow);
 
   // Show no shadow for `.btn-link` since it has no other button styles.
diff --git a/scss/_card.scss b/scss/_card.scss
index 2c74c0c97..67d4ebf1f 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -262,15 +262,18 @@
 // Columns
 //
 
-@include media-breakpoint-up(sm) {
-  .card-columns {
+.card-columns {
+  .card {
+    margin-bottom: $card-columns-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
     column-count: $card-columns-count;
     column-gap: $card-columns-gap;
 
     .card {
       display: inline-block; // Don't let them vertically span multiple columns
       width: 100%; // Don't let their width change
-      margin-bottom: $card-columns-margin;
     }
   }
 }
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 1b6e450ae..41eca949f 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -12,13 +12,11 @@
 .carousel-item {
   position: relative;
   display: none;
+  align-items: center;
   width: 100%;
-
-  @include if-supports-3d-transforms() {
-    @include transition($carousel-transition);
-    backface-visibility: hidden;
-    perspective: 1000px;
-  }
+  @include transition($carousel-transition);
+  backface-visibility: hidden;
+  perspective: 1000px;
 }
 
 .carousel-item.active,
@@ -34,21 +32,19 @@
 }
 
 // CSS3 transforms when supported by the browser
-@include if-supports-3d-transforms() {
-  .carousel-item-next.carousel-item-left,
-  .carousel-item-prev.carousel-item-right {
-    transform: translate3d(0, 0, 0);
-  }
+.carousel-item-next.carousel-item-left,
+.carousel-item-prev.carousel-item-right {
+  transform: translate3d(0, 0, 0);
+}
 
-  .carousel-item-next,
-  .active.carousel-item-right {
-    transform: translate3d(100%, 0, 0);
-  }
+.carousel-item-next,
+.active.carousel-item-right {
+  transform: translate3d(100%, 0, 0);
+}
 
-  .carousel-item-prev,
-  .active.carousel-item-left {
-    transform: translate3d(-100%, 0, 0);
-  }
+.carousel-item-prev,
+.active.carousel-item-left {
+  transform: translate3d(-100%, 0, 0);
 }
 
 
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 404483e77..090fdf1c1 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -17,6 +17,10 @@
     border-right: $caret-width solid transparent;
     border-left: $caret-width solid transparent;
   }
+
+  &:empty::after {
+    margin-left: 0;
+  }
 }
 
 .dropup {
@@ -61,7 +65,7 @@
 .dropdown-item {
   display: block;
   width: 100%; // For `<button>`s
-  padding: 3px $dropdown-item-padding-x;
+  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
   clear: both;
   font-weight: $font-weight-normal;
   color: $dropdown-link-color;
diff --git a/scss/_grid.scss b/scss/_grid.scss
index 8c7a9ee31..9ab9ae02b 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -11,11 +11,12 @@
 
 // Fluid container
 //
-// Utilizes the mixin meant for fixed width containers, but without any defined
-// width for fluid, full width layouts.
+// Utilizes the mixin meant for fixed width containers, but with 100% width for
+// fluid, full width layouts.
 
 @if $enable-grid-classes {
   .container-fluid {
+    width: 100%;
     @include make-container();
   }
 }
diff --git a/scss/_jumbotron.scss b/scss/_jumbotron.scss
index b12d465d9..7966bba1e 100644
--- a/scss/_jumbotron.scss
+++ b/scss/_jumbotron.scss
@@ -9,10 +9,6 @@
   }
 }
 
-.jumbotron-hr {
-  border-top-color: darken($jumbotron-bg, 10%);
-}
-
 .jumbotron-fluid {
   padding-right: 0;
   padding-left: 0;
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 13aad2487..cc3394f0a 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -14,7 +14,6 @@
 @import "mixins/text-emphasis";
 @import "mixins/text-hide";
 @import "mixins/text-truncate";
-@import "mixins/transforms";
 @import "mixins/visibility";
 
 // // Components
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 58e71eca4..2b6b2a7f3 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -26,7 +26,6 @@
   }
 }
 
-
 //
 // Tabs
 //
@@ -76,12 +75,12 @@
 .nav-pills {
   .nav-link {
     @include border-radius($nav-pills-border-radius);
-  }
 
-  .nav-link.active,
-  .nav-item.show .nav-link {
-    color: $nav-pills-active-link-color;
-    background-color: $nav-pills-active-link-bg;
+    &.active,
+    .show & {
+      color: $nav-pills-active-link-color;
+      background-color: $nav-pills-active-link-bg;
+    }
   }
 }
 
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index daef7ba7a..419d9263a 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -19,6 +19,7 @@
   position: relative;
   display: flex;
   flex-wrap: wrap; // allow us to do the line break for collapsing content
+  align-items: center;
   justify-content: space-between; // space out brand from logo
   padding: $navbar-padding-y $navbar-padding-x;
 
@@ -28,10 +29,11 @@
   > .container-fluid {
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
     justify-content: space-between;
 
     @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) {
-      width: 100%; // prevent flex parent container(-fluid) from collapsing
+      width: 100%; // prevent flex parent container from collapsing
       margin-right: 0;
       margin-left: 0;
     }
@@ -45,7 +47,6 @@
 
 .navbar-brand {
   display: inline-block;
-  align-self: flex-start;
   padding-top: $navbar-brand-padding-y;
   padding-bottom: $navbar-brand-padding-y;
   margin-right: $navbar-padding-x;
@@ -102,7 +103,6 @@
 
 // Button for toggling the navbar when in its collapsed state
 .navbar-toggler {
-  align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child
   padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
   font-size: $navbar-toggler-font-size;
   line-height: 1;
@@ -153,12 +153,15 @@
       @include media-breakpoint-up($next) {
         flex-direction: row;
         flex-wrap: nowrap;
-        align-items: center;
         justify-content: flex-start;
 
         .navbar-nav {
           flex-direction: row;
 
+          .dropdown-menu {
+            position: absolute;
+          }
+
           .nav-link {
             padding-right: .5rem;
             padding-left: .5rem;
@@ -169,7 +172,6 @@
         > .container,
         > .container-fluid {
           flex-wrap: nowrap;
-          align-items: center;
         }
 
         // scss-lint:disable ImportantRule
@@ -214,9 +216,9 @@
       }
     }
 
-    .open > .nav-link,
+    .show > .nav-link,
     .active > .nav-link,
-    .nav-link.open,
+    .nav-link.show,
     .nav-link.active {
       color: $navbar-light-active-color;
     }
@@ -259,9 +261,9 @@
       }
     }
 
-    .open > .nav-link,
+    .show > .nav-link,
     .active > .nav-link,
-    .nav-link.open,
+    .nav-link.show,
     .nav-link.active {
       color: $navbar-inverse-active-color;
     }
diff --git a/scss/_progress.scss b/scss/_progress.scss
index ccca51e8d..66571843c 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -18,6 +18,7 @@
   line-height: $progress-height;
   color: $progress-bar-color;
   background-color: $progress-bar-bg;
+  @include transition($progress-bar-transition);
 }
 
 .progress-bar-striped {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 0d22877a2..d277011b2 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -244,7 +244,7 @@ $transition-collapse:    height .35s ease !default;
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
 $font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $font-family-base:       $font-family-sans-serif !default;
 
@@ -338,16 +338,16 @@ $table-inverse-color:           $body-bg !default;
 //
 // For each of Bootstrap's buttons, define text, background and border color.
 
-$input-btn-padding-x:       1rem !default;
 $input-btn-padding-y:       .5rem !default;
+$input-btn-padding-x:       1rem !default;
 $input-btn-line-height:     1.25 !default;
 
-$input-btn-padding-x-sm:    .5rem !default;
 $input-btn-padding-y-sm:    .25rem !default;
+$input-btn-padding-x-sm:    .5rem !default;
 $input-btn-line-height-sm:  1.5 !default;
 
-$input-btn-padding-x-lg:    1rem !default;
 $input-btn-padding-y-lg:    .5rem !default;
+$input-btn-padding-x-lg:    1rem !default;
 $input-btn-line-height-lg:  1.5 !default;
 
 $btn-font-weight:                $font-weight-normal !default;
@@ -436,8 +436,8 @@ $input-group-addon-border-color: $input-border-color !default;
 $cursor-disabled:                not-allowed !default;
 
 $custom-control-gutter:   1.5rem !default;
-$custom-control-spacer-x: 1rem !default;
 $custom-control-spacer-y: .25rem !default;
+$custom-control-spacer-x: 1rem !default;
 
 $custom-control-indicator-size:       1rem !default;
 $custom-control-indicator-bg:         #ddd !default;
@@ -469,8 +469,8 @@ $custom-checkbox-indeterminate-box-shadow: none !default;
 $custom-radio-radius: 50% !default;
 $custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
 
-$custom-select-padding-x:          .75rem  !default;
 $custom-select-padding-y:          .375rem !default;
+$custom-select-padding-x:          .75rem  !default;
 $custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
 $custom-select-line-height:         $input-btn-line-height !default;
 $custom-select-color:               $input-color !default;
@@ -493,8 +493,8 @@ $custom-file-height:           2.5rem !default;
 $custom-file-width:            14rem !default;
 $custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default;
 
-$custom-file-padding-x:     .5rem !default;
 $custom-file-padding-y:     1rem !default;
+$custom-file-padding-x:     .5rem !default;
 $custom-file-line-height:   1.5 !default;
 $custom-file-color:         $gray !default;
 $custom-file-bg:            $white !default;
@@ -547,6 +547,7 @@ $dropdown-link-active-bg:        $component-active-bg !default;
 
 $dropdown-link-disabled-color:   $gray-light !default;
 
+$dropdown-item-padding-y:        .25rem !default;
 $dropdown-item-padding-x:        1.5rem !default;
 
 $dropdown-header-color:          $gray-light !default;
@@ -570,8 +571,8 @@ $zindex-tooltip:            1070 !default;
 
 $nav-item-margin:               .2rem !default;
 $nav-item-inline-spacer:        1rem !default;
-$nav-link-padding-x:            1rem !default;
 $nav-link-padding-y:            .5rem !default;
+$nav-link-padding-x:            1rem !default;
 $nav-link-hover-bg:             $gray-lighter !default;
 $nav-disabled-link-color:       $gray-light !default;
 
@@ -591,8 +592,8 @@ $nav-pills-active-link-bg:    $component-active-bg !default;
 
 // Navbar
 
-$navbar-padding-x:                  $spacer !default;
 $navbar-padding-y:                  ($spacer / 2) !default;
+$navbar-padding-x:                  $spacer !default;
 
 $navbar-brand-font-size:            $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
@@ -600,8 +601,8 @@ $nav-link-height:                   $navbar-brand-font-size * $line-height-base
 $navbar-brand-height:               ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
 $navbar-brand-padding-y:            ($navbar-brand-height - $nav-link-height) / 2 !default;
 
-$navbar-toggler-padding-x:           .75rem !default;
 $navbar-toggler-padding-y:           .25rem !default;
+$navbar-toggler-padding-x:           .75rem !default;
 $navbar-toggler-font-size:           $font-size-lg !default;
 $navbar-toggler-border-radius:       $btn-border-radius !default;
 
@@ -621,12 +622,12 @@ $navbar-light-toggler-border:       rgba($black,.1) !default;
 
 // Pagination
 
-$pagination-padding-x:                .75rem !default;
 $pagination-padding-y:                .5rem !default;
-$pagination-padding-x-sm:             .5rem !default;
+$pagination-padding-x:                .75rem !default;
 $pagination-padding-y-sm:             .25rem !default;
-$pagination-padding-x-lg:             1.5rem !default;
+$pagination-padding-x-sm:             .5rem !default;
 $pagination-padding-y-lg:             .75rem !default;
+$pagination-padding-x-lg:             1.5rem !default;
 $pagination-line-height:              1.25 !default;
 
 $pagination-color:                     $link-color !default;
@@ -677,8 +678,8 @@ $state-danger-border:            darken($state-danger-bg, 5%) !default;
 
 // Cards
 
-$card-spacer-x:            1.25rem !default;
 $card-spacer-y:            .75rem !default;
+$card-spacer-x:            1.25rem !default;
 $card-border-width:        1px !default;
 $card-border-radius:       $border-radius !default;
 $card-border-color:        rgba($black,.125) !default;
@@ -722,12 +723,12 @@ $popover-box-shadow:                  0 5px 10px rgba($black,.2) !default;
 
 $popover-title-bg:                    darken($popover-bg, 3%) !default;
 $popover-title-color:                 $headings-color !default;
-$popover-title-padding-x:             14px !default;
 $popover-title-padding-y:             8px !default;
+$popover-title-padding-x:             14px !default;
 
 $popover-content-color:               $body-color !default;
-$popover-content-padding-x:           14px !default;
 $popover-content-padding-y:           9px !default;
+$popover-content-padding-x:           14px !default;
 
 $popover-arrow-width:                 10px !default;
 $popover-arrow-color:                 $popover-bg !default;
@@ -749,8 +750,8 @@ $badge-color:                 $white !default;
 $badge-link-hover-color:      $white !default;
 $badge-font-size:             75% !default;
 $badge-font-weight:           $font-weight-bold !default;
-$badge-padding-x:             .4em !default;
 $badge-padding-y:             .25em !default;
+$badge-padding-x:             .4em !default;
 
 $badge-pill-padding-x:        .6em !default;
 // Use a higher than normal value to ensure completely rounded edges when
@@ -793,8 +794,8 @@ $modal-transition:            transform .3s ease-out !default;
 //
 // Define alert colors, border radius, and padding.
 
-$alert-padding-x:             1.25rem !default;
 $alert-padding-y:             .75rem !default;
+$alert-padding-x:             1.25rem !default;
 $alert-margin-bottom:         1rem !default;
 $alert-border-radius:         $border-radius !default;
 $alert-link-font-weight:      $font-weight-bold !default;
@@ -827,6 +828,7 @@ $progress-box-shadow:           inset 0 .1rem .1rem rgba($black,.1) !default;
 $progress-bar-color:            $white !default;
 $progress-bar-bg:               $brand-primary !default;
 $progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition:       width .6s ease !default;
 
 // List group
 
@@ -836,8 +838,8 @@ $list-group-border-color:        rgba($black,.125) !default;
 $list-group-border-width:        $border-width !default;
 $list-group-border-radius:       $border-radius !default;
 
-$list-group-item-padding-x:      1.25rem !default;
 $list-group-item-padding-y:      .75rem !default;
+$list-group-item-padding-x:      1.25rem !default;
 
 $list-group-hover-bg:            $gray-lightest !default;
 $list-group-active-color:        $component-active-color !default;
@@ -902,7 +904,7 @@ $carousel-control-icon-width:                 20px !default;
 $carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
 $carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
 
-$carousel-transition:           transform .6s ease-in-out !default;
+$carousel-transition:           transform .6s ease !default;
 
 
 // Close
@@ -915,8 +917,8 @@ $close-text-shadow:           0 1px 0 $white !default;
 // Code
 
 $code-font-size:              90% !default;
-$code-padding-x:              .4rem !default;
 $code-padding-y:              .2rem !default;
+$code-padding-x:              .4rem !default;
 $code-color:                  #bd4147 !default;
 $code-bg:                     $gray-lightest !default;
 
diff --git a/scss/mixins/_cards.scss b/scss/mixins/_cards.scss
index 4b1232d8b..e535b316d 100644
--- a/scss/mixins/_cards.scss
+++ b/scss/mixins/_cards.scss
@@ -13,6 +13,12 @@
 @mixin card-outline-variant($color) {
   background-color: transparent;
   border-color: $color;
+
+  .card-header,
+  .card-footer {
+    background-color: transparent;
+    border-color: $color;
+  }
 }
 
 //
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index cf4f58b5a..87920e284 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -67,12 +67,7 @@
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 percentage($size / $columns);
-  // width: percentage($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($size / $columns);
+  width: percentage($size / $columns);
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
diff --git a/scss/mixins/_transforms.scss b/scss/mixins/_transforms.scss
deleted file mode 100644
index 4005c9d02..000000000
--- a/scss/mixins/_transforms.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// Applies the given styles only when the browser support CSS3 3D transforms.
-@mixin if-supports-3d-transforms() {
-  @media (-webkit-transform-3d) {
-    // Old Safari, Old Android
-    // http://caniuse.com/#feat=css-featurequeries
-    // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-3d
-    @content;
-  }
-
-  @supports (transform: translate3d(0,0,0)) {
-    // The Proper Way: Using a CSS feature query
-    @content;
-  }
-}