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

3 files changed, 73 insertions, 0 deletions

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 271764188..19edfca7a 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -44,6 +44,34 @@
   }
 }
 
+.dropright {
+  .dropdown-menu {
+    margin-top: 0;
+    margin-left: $dropdown-spacer;
+  }
+
+  .dropdown-toggle {
+    @include caret(right);
+    &::after {
+      vertical-align: 0;
+    }
+  }
+}
+
+.dropleft {
+  .dropdown-menu {
+    margin-top: 0;
+    margin-right: $dropdown-spacer;
+  }
+
+  .dropdown-toggle {
+    @include caret(left);
+    &::before {
+      vertical-align: 0;
+    }
+  }
+}
+
 // Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {
   @include nav-divider($dropdown-divider-bg);
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 5fabc83f4..bd4abc7c6 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -50,11 +50,20 @@
   }
 }
 
+.modal-dialog-centered {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 // Actual modal
 .modal-content {
   position: relative;
   display: flex;
   flex-direction: column;
+  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
   // counteract the pointer-events: none; in the .modal-dialog
   pointer-events: auto;
   background-color: $modal-content-bg;
@@ -144,11 +153,17 @@
     margin: $modal-dialog-margin-y-sm-up auto;
   }
 
+  .modal-dialog-centered {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
   .modal-content {
     @include box-shadow($modal-content-box-shadow-sm-up);
   }
 
   .modal-sm { max-width: $modal-sm; }
+
 }
 
 @include media-breakpoint-up(lg) {
diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss
index daab9d03c..40478e492 100644
--- a/scss/mixins/_caret.scss
+++ b/scss/mixins/_caret.scss
@@ -12,6 +12,18 @@
   border-left: $caret-width solid transparent;
 }
 
+@mixin caret-right {
+  border-top: $caret-width solid transparent;
+  border-bottom: $caret-width solid transparent;
+  border-left: $caret-width solid;
+}
+
+@mixin caret-left {
+  border-top: $caret-width solid transparent;
+  border-right: $caret-width solid;
+  border-bottom: $caret-width solid transparent;
+}
+
 @mixin caret($direction: down) {
   @if $enable-caret {
     &::after {
@@ -25,6 +37,24 @@
         @include caret-down;
       } @else if $direction == up {
         @include caret-up;
+      } @else if $direction == right {
+        @include caret-right;
+      }
+    }
+
+    @if $direction == left {
+      &::after {
+        display: none;
+      }
+
+      &::before {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        margin-right: $caret-width * .85;
+        vertical-align: $caret-width * .85;
+        content: "";
+        @include caret-left;
       }
     }