Merge branch 'v4-dev' into btn_input_split_variables

26 files changed, 168 insertions, 104 deletions

diff --git a/scss/_alert.scss b/scss/_alert.scss
index 66fba24ea..c2d5c8109 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -27,6 +27,8 @@
 // Expand the right padding and account for the close button's positioning.
 
 .alert-dismissible {
+  padding-right: ($close-font-size + $alert-padding-x * 2);
+
   // Adjust close link position
   .close {
     position: absolute;
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 391adb7ce..3ffe7f44b 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -14,12 +14,12 @@
     // Bring the hover, focused, and "active" buttons to the front to overlay
     // the borders properly
     @include hover {
-      z-index: 2;
+      z-index: 1;
     }
     &:focus,
     &:active,
     &.active {
-      z-index: 2;
+      z-index: 1;
     }
   }
 
@@ -197,10 +197,12 @@
 [data-toggle="buttons"] {
   > .btn,
   > .btn-group > .btn {
+    margin-bottom: 0; // Override default `<label>` value
+
     input[type="radio"],
     input[type="checkbox"] {
       position: absolute;
-      clip: rect(0,0,0,0);
+      clip: rect(0, 0, 0, 0);
       pointer-events: none;
     }
   }
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index eb60a8529..f2269edc6 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -22,7 +22,7 @@
   &:focus,
   &.focus {
     outline: 0;
-    box-shadow: $btn-focus-box-shadow;
+    box-shadow: $input-btn-focus-box-shadow;
   }
 
   // Disabled comes first so active can properly restyle
@@ -35,7 +35,7 @@
   &:not([disabled]):not(.disabled):active,
   &:not([disabled]):not(.disabled).active {
     background-image: none;
-    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+    @include box-shadow($input-btn-focus-box-shadow, $btn-active-box-shadow);
   }
 }
 
diff --git a/scss/_card.scss b/scss/_card.scss
index a739f1935..66f344eda 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -194,10 +194,12 @@
         &:first-child {
           @include border-right-radius(0);
 
-          .card-img-top {
+          .card-img-top,
+          .card-header {
             border-top-right-radius: 0;
           }
-          .card-img-bottom {
+          .card-img-bottom,
+          .card-footer {
             border-bottom-right-radius: 0;
           }
         }
@@ -205,10 +207,12 @@
         &:last-child {
           @include border-left-radius(0);
 
-          .card-img-top {
+          .card-img-top,
+          .card-header {
             border-top-left-radius: 0;
           }
-          .card-img-bottom {
+          .card-img-bottom,
+          .card-footer {
             border-bottom-left-radius: 0;
           }
         }
@@ -216,10 +220,12 @@
         &:only-child {
           @include border-radius($card-border-radius);
 
-          .card-img-top {
+          .card-img-top,
+          .card-header {
             @include border-top-radius($card-border-radius);
           }
-          .card-img-bottom {
+          .card-img-bottom,
+          .card-footer {
             @include border-bottom-radius($card-border-radius);
           }
         }
@@ -228,7 +234,9 @@
           border-radius: 0;
 
           .card-img-top,
-          .card-img-bottom {
+          .card-img-bottom,
+          .card-header,
+          .card-footer {
             border-radius: 0;
           }
         }
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 8aa14ace7..72a503445 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -90,9 +90,15 @@
 }
 .carousel-control-prev {
   left: 0;
+  @if $enable-gradients {
+    background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
+  }
 }
 .carousel-control-next {
   right: 0;
+  @if $enable-gradients {
+    background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
+  }
 }
 
 // Icons for within
diff --git a/scss/_code.scss b/scss/_code.scss
index 759da15b7..b88f5b61d 100644
--- a/scss/_code.scss
+++ b/scss/_code.scss
@@ -42,8 +42,6 @@ kbd {
 // Blocks of code
 pre {
   display: block;
-  margin-top: 0;
-  margin-bottom: 1rem;
   font-size: $code-font-size;
   color: $pre-color;
 
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 41dae4d76..a521dbdc9 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -22,7 +22,7 @@
 
   &:checked ~ .custom-control-indicator {
     color: $custom-control-indicator-checked-color;
-    background-color: $custom-control-indicator-checked-bg;
+    @include gradient-bg($custom-control-indicator-checked-bg);
     @include box-shadow($custom-control-indicator-checked-box-shadow);
   }
 
@@ -33,7 +33,7 @@
 
   &:active ~ .custom-control-indicator {
     color: $custom-control-indicator-active-color;
-    background-color: $custom-control-indicator-active-bg;
+    @include gradient-bg($custom-control-indicator-active-bg);
     @include box-shadow($custom-control-indicator-active-box-shadow);
   }
 
@@ -244,7 +244,7 @@
     padding: $custom-file-padding-y $custom-file-padding-x;
     line-height: $custom-file-line-height;
     color: $custom-file-button-color;
-    background-color: $custom-file-button-bg;
+    @include gradient-bg($custom-file-button-bg);
     border: $custom-file-border-width solid $custom-file-border-color;
     @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
   }
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 1782d5b9f..271764188 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -27,7 +27,7 @@
   background-color: $dropdown-bg;
   background-clip: padding-box;
   border: $dropdown-border-width solid $dropdown-border-color;
-  @include border-radius($border-radius);
+  @include border-radius($dropdown-border-radius);
   @include box-shadow($dropdown-box-shadow);
 }
 
@@ -67,14 +67,14 @@
   @include hover-focus {
     color: $dropdown-link-hover-color;
     text-decoration: none;
-    background-color: $dropdown-link-hover-bg;
+    @include gradient-bg($dropdown-link-hover-bg);
   }
 
   &.active,
   &:active {
     color: $dropdown-link-active-color;
     text-decoration: none;
-    background-color: $dropdown-link-active-bg;
+    @include gradient-bg($dropdown-link-active-bg);
   }
 
   &.disabled,
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 5ac3f88a2..d2a1b3601 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -12,8 +12,6 @@
   line-height: $input-line-height;
   color: $input-color;
   background-color: $input-bg;
-  // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
-  background-image: none;
   background-clip: padding-box;
   border: $input-border-width solid $input-border-color;
 
@@ -129,6 +127,8 @@ select.form-control {
 // text (without any border, background color, focus indicator)
 
 .form-control-plaintext {
+  display: block;
+  width: 100%;
   padding-top: $input-padding-y;
   padding-bottom: $input-padding-y;
   margin-bottom: 0; // match inputs if this class comes on inputs with default margins
diff --git a/scss/_functions.scss b/scss/_functions.scss
index 43210f7fb..a95ad4375 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -57,9 +57,9 @@
   $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
 
   @if ($yiq >= 150) {
-    @return #111;
+    @return $yiq-text-dark;
   } @else {
-    @return #fff;
+    @return $yiq-text-light;
   }
 }
 
diff --git a/scss/_images.scss b/scss/_images.scss
index 50c56108a..2bce02f63 100644
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -16,7 +16,6 @@
   background-color: $thumbnail-bg;
   border: $thumbnail-border-width solid $thumbnail-border-color;
   @include border-radius($thumbnail-border-radius);
-  @include transition($thumbnail-transition);
   @include box-shadow($thumbnail-box-shadow);
 
   // Keep them at most 100% wide
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index f5eed46f9..771fd6ec8 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -14,7 +14,7 @@
     // Ensure that the input is always above the *appended* addon button for
     // proper border colors.
     position: relative;
-    z-index: 2;
+    z-index: 1;
     flex: 1 1 auto;
     // Add width 1% and flex-basis auto to ensure that button will not wrap out
     // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
@@ -23,7 +23,7 @@
 
     // Bring the "active" form control to the front
     @include hover-focus-active {
-      z-index: 3;
+      z-index: 2;
     }
   }
 }
@@ -150,7 +150,7 @@
 
     // Bring the "active" button to the front
     @include hover-focus-active {
-      z-index: 3;
+      z-index: 2;
     }
   }
 
@@ -168,7 +168,7 @@
   &:not(:first-child) {
     > .btn,
     > .btn-group {
-      z-index: 2;
+      z-index: 1;
       // remove nagative margin ($input-border-width) to solve overlapping issue with button.
       margin-left: 0;
 
@@ -179,7 +179,7 @@
 
       // Because specificity
       @include hover-focus-active {
-        z-index: 3;
+        z-index: 2;
       }
     }
   }
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 7e0b19e01..abe132255 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -70,7 +70,7 @@
 
   // Include both here for `<a>`s and `<button>`s
   &.active {
-    z-index: 2; // Place active items above their siblings for proper border styling
+    z-index: 1; // Place active items above their siblings for proper border styling
     color: $list-group-active-color;
     background-color: $list-group-active-bg;
     border-color: $list-group-active-border-color;
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 69a36ffe5..6e83cf676 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -18,7 +18,7 @@
   }
 
   &.active .page-link {
-    z-index: 2;
+    z-index: 1;
     color: $pagination-active-color;
     background-color: $pagination-active-bg;
     border-color: $pagination-active-border-color;
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 3055cc33d..f98a71947 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -30,7 +30,7 @@ html {
   -webkit-text-size-adjust: 100%; // 4
   -ms-text-size-adjust: 100%; // 4
   -ms-overflow-style: scrollbar; // 5
-  -webkit-tap-highlight-color: rgba(0,0,0,0); // 6
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
 }
 
 // IE10+ doesn't honor `<meta name="viewport">` in some cases.
diff --git a/scss/_variables.scss b/scss/_variables.scss
index f141994df..2ea031c15 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -87,6 +87,10 @@ $theme-colors: map-merge((
 // Set a specific jump point for requesting color jumps
 $theme-color-interval:      8% !default;
 
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark: #111 !default;
+$yiq-text-light: #fff !default;
+
 
 // Options
 //
@@ -221,9 +225,9 @@ $font-family-monospace:       "SFMono-Regular", Menlo, Monaco, Consolas, "Libera
 $font-family-base:            $font-family-sans-serif !default;
 // stylelint-enable value-keyword-case
 
-$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
-$font-size-lg:   ($font-size-base * 1.25) !default;
-$font-size-sm:   ($font-size-base * .875) !default;
+$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
+$font-size-lg:                ($font-size-base * 1.25) !default;
+$font-size-sm:                ($font-size-base * .875) !default;
 
 $font-weight-light:           300 !default;
 $font-weight-normal:          400 !default;
@@ -232,12 +236,12 @@ $font-weight-bold:            700 !default;
 $font-weight-base:            $font-weight-normal !default;
 $line-height-base:            1.5 !default;
 
-$h1-font-size: $font-size-base * 2.5 !default;
-$h2-font-size: $font-size-base * 2 !default;
-$h3-font-size: $font-size-base * 1.75 !default;
-$h4-font-size: $font-size-base * 1.5 !default;
-$h5-font-size: $font-size-base * 1.25 !default;
-$h6-font-size: $font-size-base !default;
+$h1-font-size:                $font-size-base * 2.5 !default;
+$h2-font-size:                $font-size-base * 2 !default;
+$h3-font-size:                $font-size-base * 1.75 !default;
+$h4-font-size:                $font-size-base * 1.5 !default;
+$h5-font-size:                $font-size-base * 1.25 !default;
+$h6-font-size:                $font-size-base !default;
 
 $headings-margin-bottom:      ($spacer / 2) !default;
 $headings-font-family:        inherit !default;
@@ -256,8 +260,8 @@ $display3-weight:             300 !default;
 $display4-weight:             300 !default;
 $display-line-height:         $headings-line-height !default;
 
-$lead-font-size:   ($font-size-base * 1.25) !default;
-$lead-font-weight: 300 !default;
+$lead-font-size:              ($font-size-base * 1.25) !default;
+$lead-font-weight:            300 !default;
 
 $small-font-size:             80% !default;
 
@@ -266,14 +270,14 @@ $text-muted:                  $gray-600 !default;
 $blockquote-small-color:      $gray-600 !default;
 $blockquote-font-size:        ($font-size-base * 1.25) !default;
 
-$hr-border-color:             rgba($black,.1) !default;
+$hr-border-color:             rgba($black, .1) !default;
 $hr-border-width:             $border-width !default;
 
 $mark-padding:                .2em !default;
 
 $dt-font-weight:              $font-weight-bold !default;
 
-$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black,.25) !default;
+$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
 $nested-kbd-font-weight:      $font-weight-bold !default;
 
 $list-inline-padding:         5px !default;
@@ -289,8 +293,8 @@ $table-cell-padding:          .75rem !default;
 $table-cell-padding-sm:       .3rem !default;
 
 $table-bg:                    transparent !default;
-$table-accent-bg:             rgba($black,.05) !default;
-$table-hover-bg:              rgba($black,.075) !default;
+$table-accent-bg:             rgba($black, .05) !default;
+$table-hover-bg:              rgba($black, .075) !default;
 $table-active-bg:             $table-hover-bg !default;
 
 $table-border-width:          $border-width !default;
@@ -312,6 +316,10 @@ $input-btn-padding-y:         .375rem !default;
 $input-btn-padding-x:         .75rem !default;
 $input-btn-line-height:       $line-height-base !default;
 
+$input-btn-focus-width:       .2rem !default;
+$input-btn-focus-color:       rgba(theme-color("primary"), .25) !default;
+$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
 $input-btn-padding-y-sm:      .25rem !default;
 $input-btn-padding-x-sm:      .5rem !default;
 $input-btn-line-height-sm:    $line-height-sm !default;
@@ -342,9 +350,8 @@ $btn-line-height-lg:          $input-btn-line-height-lg !default;
 $btn-border-width:            $input-btn-border-width !default;
 
 $btn-font-weight:             $font-weight-normal !default;
-$btn-box-shadow:              inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
-$btn-focus-box-shadow:        0 0 0 3px rgba(theme-color("primary"), .25) !default;
-$btn-active-box-shadow:       inset 0 3px 5px rgba($black,.125) !default;
+$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
+$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 
 $btn-link-disabled-color:     $gray-600 !default;
 
@@ -355,7 +362,7 @@ $btn-border-radius:           $border-radius !default;
 $btn-border-radius-lg:        $border-radius-lg !default;
 $btn-border-radius-sm:        $border-radius-sm !default;
 
-$btn-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
 
 // Forms
@@ -386,7 +393,6 @@ $input-border-radius-sm:                $border-radius-sm !default;
 
 $input-focus-bg:                        $input-bg !default;
 $input-focus-border-color:              lighten(theme-color("primary"), 25%) !default;
-$input-focus-box-shadow:                $input-box-shadow, $btn-focus-box-shadow !default;
 $input-focus-color:                     $input-color !default;
 
 $input-placeholder-color:               $gray-600 !default;
@@ -426,7 +432,7 @@ $custom-control-spacer-x:               1rem !default;
 $custom-control-indicator-size:         1rem !default;
 $custom-control-indicator-bg:           #ddd !default;
 $custom-control-indicator-bg-size:      50% 50% !default;
-$custom-control-indicator-box-shadow:   inset 0 .25rem .25rem rgba($black,.1) !default;
+$custom-control-indicator-box-shadow:   inset 0 .25rem .25rem rgba($black, .1) !default;
 
 $custom-control-indicator-disabled-bg:          $gray-200 !default;
 $custom-control-description-disabled-color:     $gray-600 !default;
@@ -435,7 +441,7 @@ $custom-control-indicator-checked-color:        $white !default;
 $custom-control-indicator-checked-bg:           theme-color("primary") !default;
 $custom-control-indicator-checked-box-shadow:   none !default;
 
-$custom-control-indicator-focus-box-shadow:     0 0 0 1px $body-bg, 0 0 0 3px theme-color("primary") !default;
+$custom-control-indicator-focus-box-shadow:     0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
 
 $custom-control-indicator-active-color:         $white !default;
 $custom-control-indicator-active-bg:            lighten(theme-color("primary"), 35%) !default;
@@ -512,10 +518,11 @@ $dropdown-min-width:                10rem !default;
 $dropdown-padding-y:                .5rem !default;
 $dropdown-spacer:                   .125rem !default;
 $dropdown-bg:                       $white !default;
-$dropdown-border-color:             rgba($black,.15) !default;
+$dropdown-border-color:             rgba($black, .15) !default;
+$dropdown-border-radius:            $border-radius !default;
 $dropdown-border-width:             $border-width !default;
 $dropdown-divider-bg:               $gray-200 !default;
-$dropdown-box-shadow:               0 .5rem 1rem rgba($black,.175) !default;
+$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
 
 $dropdown-link-color:               $gray-900 !default;
 $dropdown-link-hover-color:         darken($gray-900, 5%) !default;
@@ -579,19 +586,19 @@ $navbar-toggler-padding-x:          .75rem !default;
 $navbar-toggler-font-size:          $font-size-lg !default;
 $navbar-toggler-border-radius:      $btn-border-radius !default;
 
-$navbar-dark-color:                 rgba($white,.5) !default;
-$navbar-dark-hover-color:           rgba($white,.75) !default;
+$navbar-dark-color:                 rgba($white, .5) !default;
+$navbar-dark-hover-color:           rgba($white, .75) !default;
 $navbar-dark-active-color:          $white !default;
-$navbar-dark-disabled-color:        rgba($white,.25) !default;
+$navbar-dark-disabled-color:        rgba($white, .25) !default;
 $navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
-$navbar-dark-toggler-border-color:  rgba($white,.1) !default;
+$navbar-dark-toggler-border-color:  rgba($white, .1) !default;
 
-$navbar-light-color:                rgba($black,.5) !default;
-$navbar-light-hover-color:          rgba($black,.7) !default;
-$navbar-light-active-color:         rgba($black,.9) !default;
-$navbar-light-disabled-color:       rgba($black,.3) !default;
+$navbar-light-color:                rgba($black, .5) !default;
+$navbar-light-hover-color:          rgba($black, .7) !default;
+$navbar-light-active-color:         rgba($black, .9) !default;
+$navbar-light-disabled-color:       rgba($black, .3) !default;
 $navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
-$navbar-light-toggler-border-color: rgba($black,.1) !default;
+$navbar-light-toggler-border-color: rgba($black, .1) !default;
 
 // Pagination
 
@@ -633,7 +640,7 @@ $card-spacer-y:                     .75rem !default;
 $card-spacer-x:                     1.25rem !default;
 $card-border-width:                 $border-width !default;
 $card-border-radius:                $border-radius !default;
-$card-border-color:                 rgba($black,.125) !default;
+$card-border-color:                 rgba($black, .125) !default;
 $card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width}) !default;
 $card-cap-bg:                       rgba($black, .03) !default;
 $card-bg:                           $white !default;
@@ -669,8 +676,8 @@ $tooltip-arrow-color:               $tooltip-bg !default;
 $popover-bg:                        $white !default;
 $popover-max-width:                 276px !default;
 $popover-border-width:              $border-width !default;
-$popover-border-color:              rgba($black,.2) !default;
-$popover-box-shadow:                0 .25rem .5rem rgba($black,.2) !default;
+$popover-border-color:              rgba($black, .2) !default;
+$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
 
 $popover-header-bg:                 darken($popover-bg, 3%) !default;
 $popover-header-color:              $headings-color !default;
@@ -713,10 +720,10 @@ $modal-dialog-margin-y-sm-up:       30px !default;
 $modal-title-line-height:           $line-height-base !default;
 
 $modal-content-bg:                  $white !default;
-$modal-content-border-color:        rgba($black,.2) !default;
+$modal-content-border-color:        rgba($black, .2) !default;
 $modal-content-border-width:        $border-width !default;
-$modal-content-box-shadow-xs:       0 3px 9px rgba($black,.5) !default;
-$modal-content-box-shadow-sm-up:    0 5px 15px rgba($black,.5) !default;
+$modal-content-box-shadow-xs:       0 3px 9px rgba($black, .5) !default;
+$modal-content-box-shadow-sm-up:    0 5px 15px rgba($black, .5) !default;
 
 $modal-backdrop-bg:                 $black !default;
 $modal-backdrop-opacity:            .5 !default;
@@ -747,20 +754,20 @@ $alert-border-width:                $border-width !default;
 
 // Progress bars
 
-$progress-height:               1rem !default;
-$progress-font-size:            ($font-size-base * .75) !default;
-$progress-bg:                   $gray-200 !default;
-$progress-border-radius:        $border-radius !default;
-$progress-box-shadow:           inset 0 .1rem .1rem rgba($black,.1) !default;
-$progress-bar-color:            $white !default;
-$progress-bar-bg:               theme-color("primary") !default;
-$progress-bar-animation-timing: 1s linear infinite !default;
-$progress-bar-transition:       width .6s ease !default;
+$progress-height:                   1rem !default;
+$progress-font-size:                ($font-size-base * .75) !default;
+$progress-bg:                       $gray-200 !default;
+$progress-border-radius:            $border-radius !default;
+$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;
+$progress-bar-color:                $white !default;
+$progress-bar-bg:                   theme-color("primary") !default;
+$progress-bar-animation-timing:     1s linear infinite !default;
+$progress-bar-transition:           width .6s ease !default;
 
 // List group
 
 $list-group-bg:                     $white !default;
-$list-group-border-color:           rgba($black,.125) !default;
+$list-group-border-color:           rgba($black, .125) !default;
 $list-group-border-width:           $border-width !default;
 $list-group-border-radius:          $border-radius !default;
 
@@ -789,8 +796,7 @@ $thumbnail-bg:                      $body-bg !default;
 $thumbnail-border-width:            $border-width !default;
 $thumbnail-border-color:            #ddd !default;
 $thumbnail-border-radius:           $border-radius !default;
-$thumbnail-box-shadow:              0 1px 2px rgba($black,.075) !default;
-$thumbnail-transition:              all .2s ease-in-out !default;
+$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;
 
 
 // Figures
diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index bedf94b7a..d7d4e7863 100644
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Grid v4.0.0-beta (https://getbootstrap.com)
+ * Bootstrap Grid v4.0.0-beta.2 (https://getbootstrap.com)
  * Copyright 2011-2017 The Bootstrap Authors
  * Copyright 2011-2017 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss
index 9e6482641..3bc8760a9 100644
--- a/scss/bootstrap-reboot.scss
+++ b/scss/bootstrap-reboot.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Reboot v4.0.0-beta (https://getbootstrap.com)
+ * Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com)
  * Copyright 2011-2017 The Bootstrap Authors
  * Copyright 2011-2017 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index f83914dc3..bfeffacac 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v4.0.0-beta (https://getbootstrap.com)
+ * Bootstrap v4.0.0-beta.2 (https://getbootstrap.com)
  * Copyright 2011-2017 The Bootstrap Authors
  * Copyright 2011-2017 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss
index d938e8972..db5a7eb45 100644
--- a/scss/mixins/_alert.scss
+++ b/scss/mixins/_alert.scss
@@ -1,6 +1,6 @@
 @mixin alert-variant($background, $border, $color) {
   color: $color;
-  background-color: $background;
+  @include gradient-bg($background);
   border-color: $border;
 
   hr {
diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss
index 5860d7384..7d1bc975c 100644
--- a/scss/mixins/_background-variant.scss
+++ b/scss/mixins/_background-variant.scss
@@ -12,3 +12,9 @@
     }
   }
 }
+
+@mixin bg-gradient-variant($parent, $color) {
+  #{$parent} {
+    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+  }
+}
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 50cd4fcbc..9e0626139 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -3,25 +3,25 @@
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
-@mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
+@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
   color: color-yiq($background);
-  background-color: $background;
+  @include gradient-bg($background);
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
   @include hover {
-    color: color-yiq($active-background);
-    background-color: $active-background;
-    border-color: $active-border;
+    color: color-yiq($hover-background);
+    @include gradient-bg($hover-background);
+    border-color: $hover-border;
   }
 
   &:focus,
   &.focus {
     // Avoid using mixin so we can pass custom focus shadow properly
     @if $enable-shadows {
-      box-shadow: $btn-box-shadow, 0 0 0 3px rgba($border, .5);
+      box-shadow: $btn-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
     } @else {
-      box-shadow: 0 0 0 3px rgba($border, .5);
+      box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
     }
   }
 
@@ -35,10 +35,19 @@
   &:not([disabled]):not(.disabled):active,
   &:not([disabled]):not(.disabled).active,
   .show > &.dropdown-toggle {
+    color: color-yiq($active-background);
     background-color: $active-background;
-    background-image: none; // Remove the gradient for the pressed/active state
+    @if $enable-gradients {
+      background-image: none; // Remove the gradient for the pressed/active state
+    }
     border-color: $active-border;
-    @include box-shadow($btn-active-box-shadow);
+
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: $btn-active-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
+    } @else {
+      box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
+    }
   }
 }
 
@@ -56,7 +65,7 @@
 
   &:focus,
   &.focus {
-    box-shadow: 0 0 0 3px rgba($color, .5);
+    box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
   }
 
   &.disabled,
@@ -71,6 +80,8 @@
     color: $color-hover;
     background-color: $color;
     border-color: $color;
+    // Avoid using mixin so we can pass custom focus shadow properly
+    box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
   }
 }
 
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 6403f469d..564222ad0 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -16,7 +16,12 @@
     background-color: $input-focus-bg;
     border-color: $input-focus-border-color;
     outline: none;
-    @include box-shadow($input-focus-box-shadow);
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: $input-box-shadow, $input-btn-focus-box-shadow;
+    } @else {
+      box-shadow: $input-btn-focus-box-shadow;
+    }
   }
 }
 
@@ -41,7 +46,7 @@
     font-size: .875rem;
     line-height: 1;
     color: #fff;
-    background-color: rgba($color,.8);
+    background-color: rgba($color, .8);
     border-radius: .2rem;
   }
 
@@ -52,7 +57,7 @@
       border-color: $color;
 
       &:focus {
-        box-shadow: 0 0 0 .2rem rgba($color,.25);
+        box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .25);
       }
 
       ~ .#{$state}-feedback,
@@ -78,11 +83,16 @@
     .was-validated &:#{$state},
     &.is-#{$state} {
       ~ .custom-control-indicator {
-        background-color: rgba($color, .25);
+        background-color: rgba($color, .4);
       }
       ~ .custom-control-description {
         color: $color;
       }
+      &:focus {
+        ~ .custom-control-indicator {
+          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, .25);
+        }
+      }
     }
   }
 
@@ -96,7 +106,9 @@
         &::before { border-color: inherit; }
       }
       &:focus {
-        box-shadow: 0 0 0 .2rem rgba($color,.25);
+        ~ .custom-file-control {
+          box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .25);
+        }
       }
     }
   }
diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
index bad79f961..ecd01f729 100644
--- a/scss/mixins/_gradients.scss
+++ b/scss/mixins/_gradients.scss
@@ -1,5 +1,13 @@
 // Gradients
 
+@mixin gradient-bg($color) {
+  @if $enable-gradients {
+    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
+  } @else {
+    background-color: $color;
+  }
+}
+
 // Horizontal gradient, from left to right
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_screen-reader.scss
index 31fb68ab9..8f3eb1b19 100644
--- a/scss/mixins/_screen-reader.scss
+++ b/scss/mixins/_screen-reader.scss
@@ -9,7 +9,7 @@
   height: 1px;
   padding: 0;
   overflow: hidden;
-  clip: rect(0,0,0,0);
+  clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   clip-path: inset(50%);
   border: 0;
diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss
index 3d2e07d69..1f18b2f3f 100644
--- a/scss/utilities/_background.scss
+++ b/scss/utilities/_background.scss
@@ -4,6 +4,12 @@
   @include bg-variant(".bg-#{$color}", $value);
 }
 
+@if $enable-gradients {
+  @each $color, $value in $theme-colors {
+    @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+  }
+}
+
 .bg-white {
   background-color: $white !important;
 }