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

5 files changed, 65 insertions, 27 deletions

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 54af829b6..e21a81ff8 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -33,7 +33,7 @@
 
   &:active ~ .custom-control-indicator {
     color: $custom-control-indicator-active-color;
-    @include gradient-bg($custom-control-indicator-active-bg);
+    background-color: $custom-control-indicator-active-bg;
     @include box-shadow($custom-control-indicator-active-box-shadow);
   }
 
@@ -62,10 +62,17 @@
   pointer-events: none;
   user-select: none;
   background-color: $custom-control-indicator-bg;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: $custom-control-indicator-bg-size;
   @include box-shadow($custom-control-indicator-box-shadow);
+
+  &::before {
+    display: block;
+    width: $custom-control-indicator-size;
+    height: $custom-control-indicator-size;
+    content: "";
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: $custom-control-indicator-bg-size;
+  }
 }
 
 // Checkboxes
@@ -78,13 +85,20 @@
   }
 
   .custom-control-input:checked ~ .custom-control-indicator {
-    background-image: $custom-checkbox-indicator-icon-checked;
+    @include gradient-bg($custom-control-indicator-checked-bg);
+
+    &::before {
+      background-image: $custom-checkbox-indicator-icon-checked;
+    }
   }
 
   .custom-control-input:indeterminate ~ .custom-control-indicator {
-    background-color: $custom-checkbox-indicator-indeterminate-bg;
-    background-image: $custom-checkbox-indicator-icon-indeterminate;
+    @include gradient-bg($custom-control-indicator-checked-bg);
     @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
+
+    &::before {
+      background-image: $custom-checkbox-indicator-icon-indeterminate;
+    }
   }
 }
 
@@ -98,7 +112,11 @@
   }
 
   .custom-control-input:checked ~ .custom-control-indicator {
-    background-image: $custom-radio-indicator-icon-checked;
+    @include gradient-bg($custom-control-indicator-checked-bg);
+
+    &::before {
+      background-image: $custom-radio-indicator-icon-checked;
+    }
   }
 }
 
@@ -149,7 +167,7 @@
   &:focus {
     border-color: $custom-select-focus-border-color;
     outline: 0;
-    @include box-shadow($custom-select-focus-box-shadow);
+    box-shadow: $custom-select-focus-box-shadow;
 
     &::-ms-value {
       // For visual consistency with other platforms/browsers,
@@ -162,8 +180,10 @@
     }
   }
 
-  &[multiple] {
+  &[multiple],
+  &[size]:not([size="1"]) {
     height: auto;
+    padding-right: $custom-select-padding-x;
     background-image: none;
   }
 
@@ -185,6 +205,13 @@
   font-size: $custom-select-font-size-sm;
 }
 
+.custom-select-lg {
+  height: $custom-select-height-lg;
+  padding-top: $custom-select-padding-y;
+  padding-bottom: $custom-select-padding-y;
+  font-size: $custom-select-font-size-lg;
+}
+
 
 // File
 //
@@ -206,7 +233,12 @@
   opacity: 0;
 
   &:focus ~ .custom-file-control {
+    border-color: $custom-file-focus-border-color;
     box-shadow: $custom-file-focus-box-shadow;
+
+    &::before {
+      border-color: $custom-file-focus-border-color;
+    }
   }
 }
 
diff --git a/scss/_modal.scss b/scss/_modal.scss
index bd4abc7c6..edda83663 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -53,9 +53,7 @@
 .modal-dialog-centered {
   display: flex;
   align-items: center;
-  height: 100%;
-  margin-top: 0;
-  margin-bottom: 0;
+  min-height: calc(100% - (#{$modal-dialog-margin} * 2));
 }
 
 // Actual modal
@@ -154,8 +152,7 @@
   }
 
   .modal-dialog-centered {
-    margin-top: 0;
-    margin-bottom: 0;
+    min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
   }
 
   .modal-content {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index acea370fb..788c55a49 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -483,15 +483,19 @@ $custom-select-border-width:        $input-btn-border-width !default;
 $custom-select-border-color:        $input-border-color !default;
 $custom-select-border-radius:       $border-radius !default;
 
-$custom-select-focus-border-color:  lighten(theme-color("primary"), 25%) !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-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-font-size-sm:        75% !default;
 $custom-select-height-sm:           $input-height-sm !default;
 
+$custom-select-font-size-lg:        125% !default;
+$custom-select-height-lg:           $input-height-lg !default;
+
 $custom-file-height:                $input-height !default;
 $custom-file-width:                 14rem !default;
-$custom-file-focus-box-shadow:      0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default;
+$custom-file-focus-border-color:    $input-focus-border-color !default;
+$custom-file-focus-box-shadow:      $input-btn-focus-box-shadow !default;
 
 $custom-file-padding-y:             $input-btn-padding-y !default;
 $custom-file-padding-x:             $input-btn-padding-x !default;
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index de3c530bb..c6e0e03a4 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -51,16 +51,16 @@
   }
 }
 
-@mixin button-outline-variant($color, $color-hover: #fff) {
+@mixin button-outline-variant($color, $color-hover: #fff, $active-background: $color, $active-border: $color) {
   color: $color;
   background-color: transparent;
   background-image: none;
   border-color: $color;
 
-  @include hover {
-    color: $color-hover;
-    background-color: $color;
-    border-color: $color;
+  &:hover {
+    color: color-yiq($color);
+    background-color: $active-background;
+    border-color: $active-border;
   }
 
   &:focus,
@@ -77,9 +77,9 @@
   &:not([disabled]):not(.disabled):active,
   &:not([disabled]):not(.disabled).active,
   .show > &.dropdown-toggle {
-    color: $color-hover;
-    background-color: $color;
-    border-color: $color;
+    color: color-yiq($color-hover);
+    background-color: $active-background;
+    border-color: $active-border;
     // Avoid using mixin so we can pass custom focus shadow properly
     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
   }
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 9fe889cf5..b7e664db7 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -84,11 +84,16 @@
     .was-validated &:#{$state},
     &.is-#{$state} {
       ~ .custom-control-indicator {
-        background-color: rgba($color, .4);
+        background-color: lighten($color, 25%);
       }
       ~ .custom-control-description {
         color: $color;
       }
+      &:checked {
+        ~ .custom-control-indicator {
+          @include gradient-bg(lighten($color, 10%));
+        }
+      }
       &:focus {
         ~ .custom-control-indicator {
           box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);