moves drop left arrow to the left

twbs · Oct 19, 2017 · 2acf70c · 2acf70c
1 parent 53940af
commit 2acf70c
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 22 deletions.
diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md
@@ -489,49 +489,53 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
     </div>
   </div>
 
-  <div class="btn-group dropleft">
+  <div class="btn-group">
+    <div class="btn-group dropleft" role="group">
+      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <span class="sr-only">Toggle Dropleft</span>
+      </button>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="#">Action</a>
+        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Something else here</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#">Separated link</a>
+      </div>
+    </div>
     <button type="button" class="btn btn-secondary">
       Split dropleft
     </button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      <span class="sr-only">Toggle Dropleft</span>
-    </button>
-    <div class="dropdown-menu">
-      <a class="dropdown-item" href="#">Action</a>
-      <a class="dropdown-item" href="#">Another action</a>
-      <a class="dropdown-item" href="#">Something else here</a>
-      <div class="dropdown-divider"></div>
-      <a class="dropdown-item" href="#">Separated link</a>
-    </div>
   </div>
 </div>
 
 {% highlight html %}
 <!-- Default dropleft button -->
 <div class="btn-group dropleft">
-  <button type="button" class="btn btn-secondary">Dropleft</button>
   <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    <span class="sr-only">Toggle Dropleft</span>
+    Dropleft
   </button>
   <div class="dropdown-menu">
     <!-- Dropdown menu links -->
   </div>
 </div>
 
 <!-- Split dropleft button -->
-<div class="btn-group dropleft">
+<div class="btn-group">
+  <div class="btn-group dropleft" role="group">
+    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <span class="sr-only">Toggle Dropleft</span>
+    </button>
+    <div class="dropdown-menu">
+      <!-- Dropdown menu links -->
+    </div>
+  </div>
   <button type="button" class="btn btn-secondary">
     Split dropleft
   </button>
-  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    <span class="sr-only">Toggle Dropleft</span>
-  </button>
-  <div class="dropdown-menu">
-    <!-- Dropdown menu links -->
-  </div>
 </div>
 {% endhighlight %}
 
+
 ## Menu items
 
 Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
@@ -66,7 +66,7 @@
 
   .dropdown-toggle {
     @include caret(left);
-    &::after {
+    &::before {
       vertical-align: 0;
     }
   }

diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss
@@ -39,7 +39,21 @@
         @include caret-up;
       } @else if $direction == right {
         @include caret-right;
-      } @else if $direction == left {
+      }
+    }
+
+    @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;
       }
     }