Merge branch 'v4' of https://github.com/twbs/derpstrap into v4

Conflicts:
	dist/css/bootstrap.css
	dist/css/bootstrap.css.map
	docs/assets/css/docs.min.css

11 files changed, 154 insertions, 138 deletions

diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml
index 6b33588b52..3fa9cbe388 100644
--- a/scss/.scss-lint.yml
+++ b/scss/.scss-lint.yml
@@ -399,7 +399,7 @@ linters:
 
   SpaceAfterPropertyColon:
     enabled: true
-    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
+    style: at_least_one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
 
   SpaceAfterPropertyName:
     enabled: true
diff --git a/scss/_grid.scss b/scss/_grid.scss
index 583c00eac6..9e12e163a8 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -127,4 +127,4 @@
     .col-xl-bottom { align-self: flex-end; }
   }
 
-}
\ No newline at end of file
+}
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 513ed00004..342c8cc8c1 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -61,8 +61,8 @@
 .navbar-sticky-top {
   position: sticky;
   top: 0;
-  width: 100%;
   z-index: $zindex-navbar-sticky;
+  width: 100%;
 
   // Undo the rounded corners
   @include media-breakpoint-up(sm) {
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 0c00bd89e3..381ffe6d68 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -8,7 +8,6 @@
   padding-left: 0;
   margin-top: $spacer-y;
   margin-bottom: $spacer-y;
-  margin: $line-height-computed 0;
   @include border-radius();
 
   > li {
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 7757fc1792..f0152ccf65 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -8,7 +8,7 @@
   top: 0;
   left: 0;
   z-index: $zindex-popover;
-  display: none;
+  display: block;
   max-width: $popover-max-width;
   padding: 1px;
   // Reset font and text properties given new insertion method
@@ -24,14 +24,93 @@
   border: 1px solid $popover-border-color;
   @include border-radius($border-radius-lg);
   @include box-shadow(0 5px 10px rgba(0,0,0,.2));
+
+
+  // Popover directions
+
+  &.popover-top,
+  &.bs-tether-element-attached-bottom {
+    margin-top: -$popover-arrow-width;
+
+    .popover-arrow {
+      bottom: -$popover-arrow-outer-width;
+      left: 50%;
+      margin-left: -$popover-arrow-outer-width;
+      border-top-color: $popover-arrow-outer-color;
+      border-bottom-width: 0;
+      &:after {
+        bottom: 1px;
+        margin-left: -$popover-arrow-width;
+        content: "";
+        border-top-color: $popover-arrow-color;
+        border-bottom-width: 0;
+      }
+    }
+  }
+
+  &.popover-right,
+  &.bs-tether-element-attached-left {
+    margin-left: $popover-arrow-width;
+
+    .popover-arrow {
+      top: 50%;
+      left: -$popover-arrow-outer-width;
+      margin-top: -$popover-arrow-outer-width;
+      border-right-color: $popover-arrow-outer-color;
+      border-left-width: 0;
+      &:after {
+        bottom: -$popover-arrow-width;
+        left: 1px;
+        content: "";
+        border-right-color: $popover-arrow-color;
+        border-left-width: 0;
+      }
+    }
+  }
+
+  &.popover-bottom,
+  &.bs-tether-element-attached-top {
+    margin-top: $popover-arrow-width;
+
+    .popover-arrow {
+      top: -$popover-arrow-outer-width;
+      left: 50%;
+      margin-left: -$popover-arrow-outer-width;
+      border-top-width: 0;
+      border-bottom-color: $popover-arrow-outer-color;
+      &:after {
+        top: 1px;
+        margin-left: -$popover-arrow-width;
+        content: "";
+        border-top-width: 0;
+        border-bottom-color: $popover-arrow-color;
+      }
+    }
+  }
+
+  &.popover-left,
+  &.bs-tether-element-attached-right {
+    margin-left: -$popover-arrow-width;
+
+    .popover-arrow {
+      top: 50%;
+      right: -$popover-arrow-outer-width;
+      margin-top: -$popover-arrow-outer-width;
+      border-right-width: 0;
+      border-left-color: $popover-arrow-outer-color;
+      &:after {
+        right: 1px;
+        bottom: -$popover-arrow-width;
+        content: "";
+        border-right-width: 0;
+        border-left-color: $popover-arrow-color;
+      }
+    }
+  }
 }
 
-// Offset the popover to account for the popover arrow
-.popover-top     { margin-top: -$popover-arrow-width; }
-.popover-right   { margin-left: $popover-arrow-width; }
-.popover-bottom  { margin-top: $popover-arrow-width; }
-.popover-left    { margin-left: -$popover-arrow-width; }
 
+// Offset the popover to account for the popover arrow
 .popover-title {
   padding: 8px 14px;
   margin: 0; // reset heading margin
@@ -68,61 +147,3 @@
   content: "";
   border-width: $popover-arrow-width;
 }
-
-.popover-top > .popover-arrow {
-  bottom: -$popover-arrow-outer-width;
-  left: 50%;
-  margin-left: -$popover-arrow-outer-width;
-  border-top-color: $popover-arrow-outer-color;
-  border-bottom-width: 0;
-  &:after {
-    bottom: 1px;
-    margin-left: -$popover-arrow-width;
-    content: "";
-    border-top-color: $popover-arrow-color;
-    border-bottom-width: 0;
-  }
-}
-.popover-right > .popover-arrow {
-  top: 50%;
-  left: -$popover-arrow-outer-width;
-  margin-top: -$popover-arrow-outer-width;
-  border-right-color: $popover-arrow-outer-color;
-  border-left-width: 0;
-  &:after {
-    bottom: -$popover-arrow-width;
-    left: 1px;
-    content: "";
-    border-right-color: $popover-arrow-color;
-    border-left-width: 0;
-  }
-}
-.popover-bottom > .popover-arrow {
-  top: -$popover-arrow-outer-width;
-  left: 50%;
-  margin-left: -$popover-arrow-outer-width;
-  border-top-width: 0;
-  border-bottom-color: $popover-arrow-outer-color;
-  &:after {
-    top: 1px;
-    margin-left: -$popover-arrow-width;
-    content: "";
-    border-top-width: 0;
-    border-bottom-color: $popover-arrow-color;
-  }
-}
-
-.popover-left > .popover-arrow {
-  top: 50%;
-  right: -$popover-arrow-outer-width;
-  margin-top: -$popover-arrow-outer-width;
-  border-right-width: 0;
-  border-left-color: $popover-arrow-outer-color;
-  &:after {
-    right: 1px;
-    bottom: -$popover-arrow-width;
-    content: "";
-    border-right-width: 0;
-    border-left-color: $popover-arrow-color;
-  }
-}
diff --git a/scss/_progress.scss b/scss/_progress.scss
index c99b5af923..3c22e23eff 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -77,7 +77,7 @@
 // }
 
 // IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
-@media screen and ("min-width:0\0") {
+@media screen and (min-width:0\0) {
   .progress {
     background-color: #eee;
     @include border-radius($border-radius-base);
@@ -116,7 +116,7 @@
   @include gradient-striped();
   background-size: $spacer-y $spacer-y;
 }
-@media screen and ("min-width:0\0") {
+@media screen and (min-width:0\0) {
   .progress-bar-striped {
     @include gradient-striped();
     background-size: $spacer-y $spacer-y;
@@ -134,7 +134,7 @@
 .progress-animated[value]::-moz-progress-bar {
   animation: progress-bar-stripes 2s linear infinite;
 }
-@media screen and ("min-width:0\0") {
+@media screen and (min-width:0\0) {
   .progress-animated .progress-bar-striped {
     animation: progress-bar-stripes 2s linear infinite;
   }
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 97c2d88eb6..495470cfa2 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -131,8 +131,8 @@ dt {
 }
 
 dd {
-  margin-left: 0; // Undo browser default
   margin-bottom: .5rem;
+  margin-left: 0; // Undo browser default
 }
 
 blockquote {
@@ -216,11 +216,11 @@ table {
 }
 
 caption {
-  caption-side: bottom;
   padding-top: $table-cell-padding;
   padding-bottom: $table-cell-padding;
   color: $text-muted;
   text-align: left;
+  caption-side: bottom;
 }
 
 th {
@@ -257,14 +257,14 @@ textarea {
 }
 
 fieldset {
-  // Reset the default outline behavior of fieldsets so they don't affect page layout.
-  padding: 0;
-  margin: 0;
-  border: 0;
   // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
   // so we reset that to ensure it behaves more like a standard block element.
   // See https://github.com/twbs/bootstrap/issues/12359.
   min-width: 0;
+  // Reset the default outline behavior of fieldsets so they don't affect page layout.
+  padding: 0;
+  margin: 0;
+  border: 0;
 }
 
 legend {
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 379d6d5e60..7b15fe5a39 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -16,23 +16,59 @@
   opacity: 0;
 
   &.in { opacity: $tooltip-opacity; }
-}
 
-.tooltip-top {
-  padding: $tooltip-arrow-width 0;
-  margin-top: -3px;
-}
-.tooltip-right {
-  padding: 0 $tooltip-arrow-width;
-  margin-left: 3px;
-}
-.tooltip-bottom {
-  padding: $tooltip-arrow-width 0;
-  margin-top: 3px;
-}
-.tooltip-left {
-  padding: 0 $tooltip-arrow-width;
-  margin-left: -3px;
+  &.tooltip-top,
+  &.bs-tether-element-attached-bottom {
+    padding: $tooltip-arrow-width 0;
+    margin-top: -3px;
+
+    .tooltip-arrow {
+      bottom: 0;
+      left: 50%;
+      margin-left: -$tooltip-arrow-width;
+      border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+      border-top-color: $tooltip-arrow-color;
+    }
+  }
+  &.tooltip-right,
+  &.bs-tether-element-attached-left {
+    padding: 0 $tooltip-arrow-width;
+    margin-left: 3px;
+
+    .tooltip-arrow {
+      top: 50%;
+      left: 0;
+      margin-top: -$tooltip-arrow-width;
+      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 {
+    padding: $tooltip-arrow-width 0;
+    margin-top: 3px;
+
+    .tooltip-arrow {
+      top: 0;
+      left: 50%;
+      margin-left: -$tooltip-arrow-width;
+      border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+      border-bottom-color: $tooltip-arrow-color;
+    }
+  }
+  &.tooltip-left,
+  &.bs-tether-element-attached-right {
+    padding: 0 $tooltip-arrow-width;
+    margin-left: -3px;
+
+    .tooltip-arrow {
+      top: 50%;
+      right: 0;
+      margin-top: -$tooltip-arrow-width;
+      border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
+      border-left-color: $tooltip-arrow-color;
+    }
+  }
 }
 
 // Wrapper for the tooltip content
@@ -54,31 +90,3 @@
   border-color: transparent;
   border-style: solid;
 }
-.tooltip-top .tooltip-arrow {
-  bottom: 0;
-  left: 50%;
-  margin-left: -$tooltip-arrow-width;
-  border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
-  border-top-color: $tooltip-arrow-color;
-}
-.tooltip-right .tooltip-arrow {
-  top: 50%;
-  left: 0;
-  margin-top: -$tooltip-arrow-width;
-  border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
-  border-right-color: $tooltip-arrow-color;
-}
-.tooltip-left .tooltip-arrow {
-  top: 50%;
-  right: 0;
-  margin-top: -$tooltip-arrow-width;
-  border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
-  border-left-color: $tooltip-arrow-color;
-}
-.tooltip-bottom .tooltip-arrow {
-  top: 0;
-  left: 50%;
-  margin-left: -$tooltip-arrow-width;
-  border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
-  border-bottom-color: $tooltip-arrow-color;
-}
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 64869e9cf9..30b2f9b42e 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -49,7 +49,7 @@
 
 .m-a { margin:        $spacer; }
 .m-t { margin-top:    $spacer-y; }
-.m-r { margin-right:  $spacer-x }
+.m-r { margin-right:  $spacer-x; }
 .m-b { margin-bottom: $spacer-y; }
 .m-l { margin-left:   $spacer-x; }
 .m-x {
@@ -97,7 +97,7 @@
 
 .p-a { padding:        $spacer; }
 .p-t { padding-top:    $spacer-y; }
-.p-r { padding-right:  $spacer-x }
+.p-r { padding-right:  $spacer-x; }
 .p-b { padding-bottom: $spacer-y; }
 .p-l { padding-left:   $spacer-x; }
 .p-x {
diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index 232b9416f9..790bb73433 100644
--- a/scss/mixins/_breakpoints.scss
+++ b/scss/mixins/_breakpoints.scss
@@ -68,21 +68,9 @@
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
 @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-  // Nested media query combination does not work in libsass yet
-  // https://github.com/sass/libsass/issues/185
-  // Work around until the issue is resolved:
-  $min: breakpoint-min($name, $breakpoints);
-  $max: breakpoint-max($name, $breakpoints);
-  @if $min and $max {
-    @media (min-width: $min) and (max-width: $max) {
+  @include media-breakpoint-up($name, $breakpoints) {
+    @include media-breakpoint-down($name, $breakpoints) {
       @content;
     }
-  } @else {
-    // One of min or max is a no-op, so this branch is not affected by libsass#185
-    @include media-breakpoint-up($name, $breakpoints) {
-      @include media-breakpoint-down($name, $breakpoints) {
-        @content;
-      }
-    }
   }
 }
diff --git a/scss/mixins/_progress.scss b/scss/mixins/_progress.scss
index 9c3212ae80..802e179a41 100644
--- a/scss/mixins/_progress.scss
+++ b/scss/mixins/_progress.scss
@@ -9,7 +9,7 @@
     background-color: $color;
   }
 
-  @media screen and ("min-width:0\0") {
+  @media screen and (min-width:0\0) {
     .progress-bar {
       background-color: $color;
     }