Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

4 files changed, 22 insertions, 21 deletions

diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index fcf7c3c43..2f7b05d5d 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -11,9 +11,9 @@
   align-items: stretch;
   width: 100%;
 
-  .form-control,
-  .custom-select,
-  .custom-file {
+  > .form-control,
+  > .custom-select,
+  > .custom-file {
     position: relative; // For focus state's z-index
     flex: 1 1 auto;
     // Add width 1% and flex-basis auto to ensure that button will not wrap out
@@ -33,15 +33,15 @@
     }
   }
 
-  .form-control,
-  .custom-select {
+  > .form-control,
+  > .custom-select {
     &:not(:last-child) { @include border-right-radius(0); }
     &:not(:first-child) { @include border-left-radius(0); }
   }
 
   // Custom file inputs have more complex markup, thus requiring different
   // border-radius overrides.
-  .custom-file {
+  > .custom-file {
     display: flex;
     align-items: center;
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index b903f5f58..6973f2921 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -323,7 +323,7 @@ $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-color:       rgba($component-active-bg, .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;
@@ -401,7 +401,7 @@ $input-border-radius-lg:                $border-radius-lg !default;
 $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-border-color:              lighten($component-active-bg, 25%) !default;
 $input-focus-color:                     $input-color !default;
 $input-focus-width:                     $input-btn-focus-width !default;
 $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
@@ -447,21 +447,21 @@ $custom-control-indicator-box-shadow:   inset 0 .25rem .25rem rgba($black, .1) !
 $custom-control-indicator-disabled-bg:          $gray-200 !default;
 $custom-control-label-disabled-color:     $gray-600 !default;
 
-$custom-control-indicator-checked-color:        $white !default;
-$custom-control-indicator-checked-bg:           theme-color("primary") !default;
+$custom-control-indicator-checked-color:        $component-active-color !default;
+$custom-control-indicator-checked-bg:           $component-active-bg !default;
 $custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .5) !default;
 $custom-control-indicator-checked-box-shadow:   none !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;
+$custom-control-indicator-active-color:         $component-active-color !default;
+$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
 $custom-control-indicator-active-box-shadow:    none !default;
 
 $custom-checkbox-indicator-border-radius:       $border-radius !default;
 $custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
 
-$custom-checkbox-indicator-indeterminate-bg:    theme-color("primary") !default;
+$custom-checkbox-indicator-indeterminate-bg:    $component-active-bg !default;
 $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
 $custom-checkbox-indicator-icon-indeterminate:  str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
 $custom-checkbox-indicator-indeterminate-box-shadow: none !default;
@@ -486,7 +486,7 @@ $custom-select-border-color:        $input-border-color !default;
 $custom-select-border-radius:       $border-radius !default;
 
 $custom-select-focus-border-color:  $input-focus-border-color !default;
-$custom-select-focus-box-shadow:    inset 0 1px 2px rgba($black, .075), $input-btn-focus-box-shadow !default;
+$custom-select-focus-box-shadow:    inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
 
 $custom-select-font-size-sm:        75% !default;
 $custom-select-height-sm:           $input-height-sm !default;
@@ -634,9 +634,9 @@ $pagination-hover-color:            $link-hover-color !default;
 $pagination-hover-bg:               $gray-200 !default;
 $pagination-hover-border-color:     $gray-300 !default;
 
-$pagination-active-color:           $white !default;
-$pagination-active-bg:              theme-color("primary") !default;
-$pagination-active-border-color:    theme-color("primary") !default;
+$pagination-active-color:           $component-active-color !default;
+$pagination-active-bg:              $component-active-bg !default;
+$pagination-active-border-color:    $pagination-active-bg !default;
 
 $pagination-disabled-color:         $gray-600 !default;
 $pagination-disabled-bg:            $white !default;
diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index 85ce72f6b..d1ad684cc 100644
--- a/scss/mixins/_breakpoints.scss
+++ b/scss/mixins/_breakpoints.scss
@@ -90,11 +90,11 @@
       @content;
     }
   } @else if $max == null {
-    @include media-breakpoint-up($lower) {
+    @include media-breakpoint-up($lower, $breakpoints) {
       @content;
     }
   } @else if $min == null {
-    @include media-breakpoint-down($upper) {
+    @include media-breakpoint-down($upper, $breakpoints) {
       @content;
     }
   }
@@ -112,11 +112,11 @@
       @content;
     }
   } @else if $max == null {
-    @include media-breakpoint-up($name) {
+    @include media-breakpoint-up($name, $breakpoints) {
       @content;
     }
   } @else if $min == null {
-    @include media-breakpoint-down($name) {
+    @include media-breakpoint-down($name, $breakpoints) {
       @content;
     }
   }
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 23a27f6b9..c2ab602ef 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -28,6 +28,7 @@
   // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
+    color: color-yiq($background);
     background-color: $background;
     border-color: $border;
   }