Merge branch 'twbs/v4-dev' into dropdown-keyboard

14 files changed, 24 insertions, 72 deletions

diff --git a/scss/_badge.scss b/scss/_badge.scss
index e5a329893..175b19d86 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -33,7 +33,6 @@ a.badge {
   @include hover-focus {
     color: $badge-link-hover-color;
     text-decoration: none;
-    cursor: pointer;
   }
 }
 // scss-lint:enable QualifyingElement
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 26e041ab3..facecd37a 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -36,6 +36,7 @@
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
   display: flex;
+  flex-wrap: wrap;
   justify-content: flex-start;
 
   .input-group {
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 54478e450..1b6e450ae 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -131,7 +131,6 @@
     margin-right: $carousel-indicator-spacer;
     margin-left: $carousel-indicator-spacer;
     text-indent: -999px;
-    cursor: pointer;
     background-color: rgba($carousel-indicator-active-bg, .5);
 
     // Use pseudo classes to increase the hit area by 10px on top and bottom.
diff --git a/scss/_close.scss b/scss/_close.scss
index 859990e31..f18149051 100644
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -10,7 +10,6 @@
   @include hover-focus {
     color: $close-color;
     text-decoration: none;
-    cursor: pointer;
     opacity: .75;
   }
 }
@@ -23,7 +22,6 @@
 // scss-lint:disable QualifyingElement
 button.close {
   padding: 0;
-  cursor: pointer;
   background: transparent;
   border: 0;
   -webkit-appearance: none;
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 3bc02a239..39f164822 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -15,7 +15,6 @@
   min-height: (1rem * $line-height-base);
   padding-left: $custom-control-gutter;
   margin-right: $custom-control-spacer-x;
-  cursor: pointer;
 }
 
 .custom-control-input {
@@ -136,7 +135,7 @@
 .custom-select {
   display: inline-block;
   max-width: 100%;
-  $select-border-width: ($border-width * 2);
+  $select-border-width: ($custom-select-border-width * 2);
   height: calc(#{$input-height} + #{$select-border-width});
   padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
   line-height: $custom-select-line-height;
@@ -146,9 +145,7 @@
   background-size: $custom-select-bg-size;
   border: $custom-select-border-width solid $custom-select-border-color;
   @include border-radius($custom-select-border-radius);
-  // Use vendor prefixes as `appearance` isn't part of the CSS spec.
-  -moz-appearance: none;
-  -webkit-appearance: none;
+  appearance: none;
 
   &:focus {
     border-color: $custom-select-focus-border-color;
@@ -200,7 +197,6 @@
   max-width: 100%;
   height: $custom-file-height;
   margin-bottom: 0;
-  cursor: pointer;
 }
 
 .custom-file-input {
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 7be62bde6..85180aa7f 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -216,7 +216,6 @@ select.form-control-lg {
 .form-check-label {
   padding-left: $form-check-input-gutter;
   margin-bottom: 0; // Override default `<label>` bottom margin
-  cursor: pointer;
 }
 
 .form-check-input {
diff --git a/scss/_nav.scss b/scss/_nav.scss
index eb316bb27..7d902a7c0 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -5,6 +5,7 @@
 
 .nav {
   display: flex;
+  flex-wrap: wrap;
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
@@ -54,9 +55,9 @@
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    color: $nav-tabs-active-link-hover-color;
-    background-color: $nav-tabs-active-link-hover-bg;
-    border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-bg;
+    color: $nav-tabs-active-link-color;
+    background-color: $nav-tabs-active-link-bg;
+    border-color: $nav-tabs-active-link-border-color $nav-tabs-active-link-border-color $nav-tabs-active-link-bg;
   }
 
   .dropdown-menu {
@@ -80,7 +81,6 @@
   .nav-link.active,
   .nav-item.show .nav-link {
     color: $nav-pills-active-link-color;
-    cursor: default;
     background-color: $nav-pills-active-link-bg;
   }
 }
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 8dd8729bc..6c31017dc 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -36,6 +36,7 @@
 
 .navbar-brand {
   display: inline-block;
+  align-self: flex-start;
   padding-top: .25rem;
   padding-bottom: .25rem;
   margin-right: $navbar-padding-x;
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 30a5728f2..78753af00 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -260,17 +260,6 @@ svg:not(:root) {
 }
 
 
-// iOS "clickable elements" fix for role="button"
-//
-// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
-// for traditionally non-focusable elements with role="button"
-// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-
-[role="button"] {
-  cursor: pointer;
-}
-
-
 // Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
 //
 // In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 7a27f1e3b..09ac11a9d 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -544,7 +544,7 @@ $form-icon-warning-color: $brand-warning !default;
 $form-icon-warning: 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='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E"), "#", "%23") !default;
 
 $form-icon-danger-color: $brand-danger !default;
-$form-icon-danger: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"), "#", "%23") !default;
+$form-icon-danger: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='#{$form-icon-danger-color}' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"), "#", "%23") !default;
 
 
 // Dropdowns
@@ -581,8 +581,8 @@ $dropdown-header-color:          $gray-light !default;
 
 $zindex-dropdown-backdrop:  990 !default;
 $zindex-dropdown:           1000 !default;
+$zindex-sticky:             1020 !default;
 $zindex-fixed:              1030 !default;
-$zindex-sticky:             1030 !default;
 $zindex-modal-backdrop:     1040 !default;
 $zindex-modal:              1050 !default;
 $zindex-popover:            1060 !default;
@@ -602,14 +602,14 @@ $navbar-inverse-color:                 rgba($white,.5) !default;
 $navbar-inverse-hover-color:           rgba($white,.75) !default;
 $navbar-inverse-active-color:          rgba($white,1) !default;
 $navbar-inverse-disabled-color:        rgba($white,.25) !default;
-$navbar-inverse-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-inverse-toggler-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-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
 $navbar-inverse-toggler-border:        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-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-light-toggler-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:       rgba($black,.1) !default;
 
 // Navs
@@ -621,9 +621,9 @@ $nav-tabs-border-color:                       #ddd !default;
 $nav-tabs-border-width:                       $border-width !default;
 $nav-tabs-border-radius:                      $border-radius !default;
 $nav-tabs-link-hover-border-color:            $gray-lighter !default;
-$nav-tabs-active-link-hover-color:            $gray !default;
-$nav-tabs-active-link-hover-bg:               $body-bg !default;
-$nav-tabs-active-link-hover-border-color:     #ddd !default;
+$nav-tabs-active-link-color:                  $gray !default;
+$nav-tabs-active-link-bg:                     $body-bg !default;
+$nav-tabs-active-link-border-color:           #ddd !default;
 
 $nav-pills-border-radius:     $border-radius !default;
 $nav-pills-active-link-color: $component-active-color !default;
diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index 182b9626b..2ba685877 100644
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -22,22 +22,16 @@ html {
   box-sizing: inherit;
 }
 
-
-//
-// Variables
-//
-
+@import "custom";
 @import "variables";
 
 //
 // Grid mixins
 //
 
-@import "mixins/clearfix";
 @import "mixins/breakpoints";
 @import "mixins/grid-framework";
 @import "mixins/grid";
 
-@import "custom";
-
 @import "grid";
+@import "utilities/flex";
diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss
index fd5ba0ca0..5867f08ec 100644
--- a/scss/bootstrap-reboot.scss
+++ b/scss/bootstrap-reboot.scss
@@ -2,8 +2,8 @@
 //
 // Includes only Normalize and our custom Reboot reset.
 
+@import "custom";
 @import "variables";
 @import "mixins";
-@import "custom";
 
 @import "reboot";
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index c8aea9669..9fde3a8a6 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -14,7 +14,9 @@
   }
 
   // Set the border and box shadow on specific inputs to match
-  .form-control {
+  .form-control,
+  .custom-select,
+  .custom-file-control {
     border-color: $color;
 
     &:focus {
@@ -51,29 +53,3 @@
     @include box-shadow($input-box-shadow-focus);
   }
 }
-
-// Form control sizing
-//
-// Relative text size, padding, and border-radii changes for form controls. For
-// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
-// element gets special love because it's special, and that's a fact!
-
-@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
-  #{$parent} {
-    height: $input-height;
-    padding: $padding-y $padding-x;
-    font-size: $font-size;
-    line-height: $line-height;
-    @include border-radius($border-radius);
-  }
-
-  select#{$parent} {
-    height: $input-height;
-    line-height: $input-height;
-  }
-
-  textarea#{$parent},
-  select[multiple]#{$parent} {
-    height: auto;
-  }
-}
diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss
index 1b98aaa3f..cc696785d 100644
--- a/scss/utilities/_flex.scss
+++ b/scss/utilities/_flex.scss
@@ -6,9 +6,9 @@
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    .flex#{$infix}-first     { order: -1; }
-    .flex#{$infix}-last      { order: 1; }
-    .flex#{$infix}-unordered { order: 0; }
+    .order#{$infix}-first { order: -1; }
+    .order#{$infix}-last  { order: 1; }
+    .order#{$infix}-0     { order: 0; }
 
     .flex#{$infix}-row            { flex-direction: row !important; }
     .flex#{$infix}-column         { flex-direction: column !important; }