From fda92d02a35de82de8a98af93e2ebe162c373615 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 11 May 2016 11:36:09 -0700
Subject: 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
---
 scss/_button-group.scss | 26 +++++++++++++++-----------
 scss/_variables.scss    |  7 -------
 2 files changed, 15 insertions(+), 18 deletions(-)

(limited to 'scss')

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 {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index bbdbe24c4d..5be9795454 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -298,13 +298,6 @@ $btn-padding-y-lg:               .75rem !default;
 $btn-block-spacing-y:            .5rem !default;
 $btn-toolbar-margin:             .5rem !default;
 
-$btn-dropdown-toggle-split-l:    (strip-unit($btn-padding-x) - ($caret-width * 1.5)) !default;
-$btn-dropdown-toggle-split-r:    (strip-unit($btn-padding-x) - ($caret-width * .5)) !default;
-$btn-dropdown-toggle-split-l-sm: (strip-unit($btn-padding-x-sm) - ($caret-width * 1.5)) !default;
-$btn-dropdown-toggle-split-r-sm: (strip-unit($btn-padding-x-sm) - ($caret-width * .5)) !default;
-$btn-dropdown-toggle-split-l-lg: (strip-unit($btn-padding-x-lg) - ($caret-width-lg * 1.5)) !default;
-$btn-dropdown-toggle-split-r-lg: (strip-unit($btn-padding-x-lg) - ($caret-width-lg * .5)) !default;
-
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:              $border-radius !default;
 $btn-border-radius-lg:           $border-radius-lg !default;
-- 
cgit v1.2.3