Unfuck those split button dropdowns

- Really we didn't need to do any of that strip units stuff to generate six new variables, two for each button size
- Using sibling selectors, we can target those split button dropdown toggles using the .dropdown-toggle-split class, and adjust padding and margin as needed
- Now, we nuke the margin-left from the ::after generated caret and tighten up the padding so that those split toggles don't look huge next to their main button

1 files changed, 15 insertions, 11 deletions

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 751c3eebd4..7bbfc6b3ac 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -104,22 +104,26 @@
 // Split button dropdowns
 //
 
-// Give the line between buttons some depth
-.dropdown-toggle-split {
-  padding-right: $btn-dropdown-toggle-split-r;
-  padding-left: $btn-dropdown-toggle-split-l;
+.btn + .dropdown-toggle-split {
+  padding-left: $btn-padding-x * .75;
+  padding-right: $btn-padding-x * .75;
 
-  &.btn-sm {
-    padding-right: $btn-dropdown-toggle-split-r-sm;
-    padding-left: $btn-dropdown-toggle-split-l-sm;
+  &::after {
+    margin-left: 0;
   }
+}
 
-  &.btn-lg {
-    padding-right: $btn-dropdown-toggle-split-r-lg;
-    padding-left: $btn-dropdown-toggle-split-l-lg;
-  }
+.btn-sm + .dropdown-toggle-split {
+  padding-left: $btn-padding-x-sm * .75;
+  padding-right: $btn-padding-x-sm * .75;
 }
 
+.btn-lg + .dropdown-toggle-split {
+  padding-left: $btn-padding-x-lg * .75;
+  padding-right: $btn-padding-x-lg * .75;
+}
+
+
 // The clickable button for toggling the menu
 // Remove the gradient and set the same inset shadow as the :active state
 .btn-group.open .dropdown-toggle {