Merge branch 'v4-dev' into form-tweaks

7 files changed, 162 insertions, 147 deletions

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 3c5a5c66ed..d9e75b0aa7 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -23,6 +23,8 @@
   }
 }
 
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// Just add .dropup after the standard .dropdown class and you're set.
 .dropup {
   .dropdown-toggle {
     &::after {
@@ -100,29 +102,14 @@
 
 // Open state for the dropdown
 .show {
-  // Show the menu
-  > .dropdown-menu {
-    display: block;
-  }
-
   // Remove the outline when :focus is triggered
   > a {
     outline: 0;
   }
 }
 
-// Menu positioning
-//
-// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
-// menu with the parent.
-.dropdown-menu-right {
-  right: 0;
-  left: auto; // Reset the default from `.dropdown-menu`
-}
-
-.dropdown-menu-left {
-  right: auto;
-  left: 0;
+.dropdown-menu.show {
+  display: block;
 }
 
 // Dropdown section headers
@@ -134,16 +121,3 @@
   color: $dropdown-header-color;
   white-space: nowrap; // as with > li > a
 }
-
-// Allow for dropdowns to go bottom up (aka, dropup-menu)
-//
-// Just add .dropup after the standard .dropdown class and you're set.
-
-.dropup {
-  // Different positioning for bottom up menu
-  .dropdown-menu {
-    top: auto;
-    bottom: 100%;
-    margin-bottom: $dropdown-margin-top;
-  }
-}
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index c73fc01f63..59cc52d9a1 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -75,6 +75,12 @@
     padding-right: 0;
     padding-left: 0;
   }
+
+  .dropdown-menu {
+    position: static !important;
+    float: none;
+    transform: unset !important;
+  }
 }
 
 
@@ -136,13 +142,6 @@
 
     &#{$infix} {
       @include media-breakpoint-down($breakpoint) {
-        .navbar-nav {
-          .dropdown-menu {
-            position: static;
-            float: none;
-          }
-        }
-
         > .container,
         > .container-fluid {
           padding-right: 0;
@@ -159,7 +158,8 @@
           flex-direction: row;
 
           .dropdown-menu {
-            position: absolute;
+            position: absolute !important;
+            top: 100% !important;
           }
 
           .nav-link {
@@ -230,7 +230,7 @@
   }
 
   .navbar-toggler-icon {
-    background-image: $navbar-light-toggler-bg;
+    background-image: $navbar-light-toggler-icon-bg;
   }
 
   .navbar-text {
@@ -275,7 +275,7 @@
   }
 
   .navbar-toggler-icon {
-    background-image: $navbar-inverse-toggler-bg;
+    background-image: $navbar-inverse-toggler-icon-bg;
   }
 
   .navbar-text {
diff --git a/scss/_popover.scss b/scss/_popover.scss
index c259916d76..e3a0d9d6d5 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -18,74 +18,105 @@
   @include border-radius($border-radius-lg);
   @include box-shadow($popover-box-shadow);
 
+  // Arrows
+  //
+  // .arrow is outer, .arrow::after is inner
+
+  .arrow {
+    position: absolute;
+    display: block;
+    width: $popover-arrow-width;
+    height: $popover-arrow-height;
+  }
+
+  .arrow::before,
+  .arrow::after {
+    position: absolute;
+    display: block;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  .arrow::before {
+    content: "";
+    border-width: $popover-arrow-outer-width;
+  }
+  .arrow::after {
+    content: "";
+    border-width: $popover-arrow-outer-width;
+  }
 
   // Popover directions
 
-  &.popover-top,
-  &.bs-tether-element-attached-bottom {
-    margin-top: -$popover-arrow-width;
+  &.bs-popover-top {
+    margin-bottom: $popover-arrow-width;
 
-    &::before,
-    &::after {
-      left: 50%;
+    .arrow {
+      bottom: 0;
+    }
+
+    .arrow::before,
+    .arrow::after {
       border-bottom-width: 0;
     }
 
-    &::before {
+    .arrow::before {
       bottom: -$popover-arrow-outer-width;
-      margin-left: -$popover-arrow-outer-width;
+      margin-left: -($popover-arrow-outer-width - 5);
       border-top-color: $popover-arrow-outer-color;
     }
 
-    &::after {
+    .arrow::after {
       bottom: -($popover-arrow-outer-width - 1);
-      margin-left: -$popover-arrow-width;
+      margin-left: -($popover-arrow-outer-width - 5);
       border-top-color: $popover-arrow-color;
     }
   }
 
-  &.popover-right,
-  &.bs-tether-element-attached-left {
+  &.bs-popover-right {
     margin-left: $popover-arrow-width;
 
-    &::before,
-    &::after {
-      top: 50%;
+    .arrow {
+      left: 0;
+    }
+
+    .arrow::before,
+    .arrow::after {
+      margin-top: -($popover-arrow-outer-width - 3);
       border-left-width: 0;
     }
 
-    &::before {
+    .arrow::before {
       left: -$popover-arrow-outer-width;
-      margin-top: -$popover-arrow-outer-width;
       border-right-color: $popover-arrow-outer-color;
     }
 
-    &::after {
+    .arrow::after {
       left: -($popover-arrow-outer-width - 1);
-      margin-top: -($popover-arrow-outer-width - 1);
       border-right-color: $popover-arrow-color;
     }
   }
 
-  &.popover-bottom,
-  &.bs-tether-element-attached-top {
+  &.bs-popover-bottom {
     margin-top: $popover-arrow-width;
 
-    &::before,
-    &::after {
-      left: 50%;
+    .arrow {
+      top: 0;
+    }
+
+    .arrow::before,
+    .arrow::after {
+      margin-left: -($popover-arrow-width - 3);
       border-top-width: 0;
     }
 
-    &::before {
+    .arrow::before {
       top: -$popover-arrow-outer-width;
-      margin-left: -$popover-arrow-outer-width;
       border-bottom-color: $popover-arrow-outer-color;
     }
 
-    &::after {
+    .arrow::after {
       top: -($popover-arrow-outer-width - 1);
-      margin-left: -$popover-arrow-width;
       border-bottom-color: $popover-arrow-color;
     }
 
@@ -102,28 +133,43 @@
     }
   }
 
-  &.popover-left,
-  &.bs-tether-element-attached-right {
-    margin-left: -$popover-arrow-width;
+  &.bs-popover-left {
+    margin-right: $popover-arrow-width;
 
-    &::before,
-    &::after {
-      top: 50%;
+    .arrow {
+      right: 0;
+    }
+
+    .arrow::before,
+    .arrow::after {
+      margin-top: -($popover-arrow-outer-width - 3);
       border-right-width: 0;
     }
 
-    &::before {
+    .arrow::before {
       right: -$popover-arrow-outer-width;
-      margin-top: -$popover-arrow-outer-width;
       border-left-color: $popover-arrow-outer-color;
     }
 
-    &::after {
+    .arrow::after {
       right: -($popover-arrow-outer-width - 1);
-      margin-top: -($popover-arrow-outer-width - 1);
       border-left-color: $popover-arrow-color;
     }
   }
+  &.bs-popover-auto {
+    &[x-placement^="top"] {
+      @extend .bs-popover-top;
+    }
+    &[x-placement^="right"] {
+      @extend .bs-popover-right;
+    }
+    &[x-placement^="bottom"] {
+      @extend .bs-popover-bottom;
+    }
+    &[x-placement^="left"] {
+      @extend .bs-popover-left;
+    }
+  }
 }
 
 
@@ -147,27 +193,3 @@
   padding: $popover-content-padding-y $popover-content-padding-x;
   color: $popover-content-color;
 }
-
-
-// Arrows
-//
-// .popover-arrow is outer, .popover-arrow::after is inner
-
-.popover::before,
-.popover::after {
-  position: absolute;
-  display: block;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-
-.popover::before {
-  content: "";
-  border-width: $popover-arrow-outer-width;
-}
-.popover::after {
-  content: "";
-  border-width: $popover-arrow-width;
-}
diff --git a/scss/_progress.scss b/scss/_progress.scss
index 66571843cd..f7491a64b2 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -11,6 +11,7 @@
   text-align: center;
   background-color: $progress-bg;
   @include border-radius($progress-border-radius);
+  @include box-shadow($progress-box-shadow);
 }
 
 .progress-bar {
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 24e198d464..fe97fbbbd0 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -3,6 +3,7 @@
   position: absolute;
   z-index: $zindex-tooltip;
   display: block;
+  margin: $tooltip-margin;
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
@@ -13,62 +14,86 @@
 
   &.show { opacity: $tooltip-opacity; }
 
-  &.tooltip-top,
-  &.bs-tether-element-attached-bottom {
-    padding: $tooltip-arrow-width 0;
-    margin-top: -$tooltip-margin;
+  .arrow {
+    position: absolute;
+    display: block;
+    width: $tooltip-arrow-width;
+    height: $tooltip-arrow-height;
+  }
 
-    .tooltip-inner::before {
+  &.bs-tooltip-top {
+    padding: $tooltip-arrow-width 0;
+    .arrow {
       bottom: 0;
-      left: 50%;
-      margin-left: -$tooltip-arrow-width;
+    }
+
+    .arrow::before {
+      margin-left: -($tooltip-arrow-width - 2);
       content: "";
       border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
       border-top-color: $tooltip-arrow-color;
     }
   }
-  &.tooltip-right,
-  &.bs-tether-element-attached-left {
+  &.bs-tooltip-right {
     padding: 0 $tooltip-arrow-width;
-    margin-left: $tooltip-margin;
-
-    .tooltip-inner::before {
-      top: 50%;
+    .arrow {
       left: 0;
-      margin-top: -$tooltip-arrow-width;
+    }
+
+    .arrow::before {
+      margin-top: -($tooltip-arrow-width - 2);
       content: "";
       border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
       border-right-color: $tooltip-arrow-color;
     }
   }
-  &.tooltip-bottom,
-  &.bs-tether-element-attached-top {
+  &.bs-tooltip-bottom {
     padding: $tooltip-arrow-width 0;
-    margin-top: $tooltip-margin;
-
-    .tooltip-inner::before {
+    .arrow {
       top: 0;
-      left: 50%;
-      margin-left: -$tooltip-arrow-width;
+    }
+
+    .arrow::before {
+      margin-left: -($tooltip-arrow-width - 2);
       content: "";
       border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-bottom-color: $tooltip-arrow-color;
     }
   }
-  &.tooltip-left,
-  &.bs-tether-element-attached-right {
+  &.bs-tooltip-left {
     padding: 0 $tooltip-arrow-width;
-    margin-left: -$tooltip-margin;
+    .arrow {
+      right: 0;
+    }
 
-    .tooltip-inner::before {
-      top: 50%;
+    .arrow::before {
       right: 0;
-      margin-top: -$tooltip-arrow-width;
+      margin-top: -($tooltip-arrow-width - 2);
       content: "";
       border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-left-color: $tooltip-arrow-color;
     }
   }
+  &.bs-tooltip-auto {
+    &[x-placement^="top"] {
+      @extend .bs-tooltip-top;
+    }
+    &[x-placement^="right"] {
+      @extend .bs-tooltip-right;
+    }
+    &[x-placement^="bottom"] {
+      @extend .bs-tooltip-bottom;
+    }
+    &[x-placement^="left"] {
+      @extend .bs-tooltip-left;
+    }
+  }
+
+  .arrow::before {
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
 }
 
 // Wrapper for the tooltip content
@@ -79,12 +104,4 @@
   text-align: center;
   background-color: $tooltip-bg;
   @include border-radius($border-radius);
-
-  &::before {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-  }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 3ab37f9f5d..fc82fca06b 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -329,7 +329,6 @@ $table-head-color:              $gray !default;
 $table-inverse-bg:              $gray-dark !default;
 $table-inverse-bg-accent:       rgba($white, .05) !default;
 $table-inverse-bg-hover:        rgba($white, .075) !default;
-$table-inverse-bg-active:       $table-inverse-bg-hover !default;
 $table-inverse-border-color:    lighten($gray-dark, 7.5%) !default;
 $table-inverse-color:           $body-bg !default;
 
@@ -574,11 +573,8 @@ $zindex-tooltip:            1070 !default;
 
 // Navs
 
-$nav-item-margin:               .2rem !default;
-$nav-item-inline-spacer:        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;
 
 $nav-tabs-border-color:                       #ddd !default;
@@ -588,8 +584,6 @@ $nav-tabs-link-hover-border-color:            $gray-lighter !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-tabs-justified-link-border-color:        #ddd !default;
-$nav-tabs-justified-active-link-border-color: $body-bg !default;
 
 $nav-pills-border-radius:     $border-radius !default;
 $nav-pills-active-link-color: $component-active-color !default;
@@ -615,14 +609,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 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-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-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-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-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-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;
 
 // Pagination
@@ -711,9 +705,11 @@ $tooltip-bg:                  $black !default;
 $tooltip-opacity:             .9 !default;
 $tooltip-padding-y:           3px !default;
 $tooltip-padding-x:           8px !default;
-$tooltip-margin:              3px !default;
+$tooltip-margin:              0 !default;
+
 
 $tooltip-arrow-width:         5px !default;
+$tooltip-arrow-height:        5px !default;
 $tooltip-arrow-color:         $tooltip-bg !default;
 
 
@@ -736,6 +732,7 @@ $popover-content-padding-y:           9px !default;
 $popover-content-padding-x:           14px !default;
 
 $popover-arrow-width:                 10px !default;
+$popover-arrow-height:                5px !default;
 $popover-arrow-color:                 $popover-bg !default;
 
 $popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 87920e284f..b6d9805777 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -67,7 +67,11 @@
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  width: percentage($size / $columns);
+  flex: 0 0 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);
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {