Switch up some split button stuff

- New vars
- New function for stripping units so we can combine rems and ems in math functions
- Add new classes for sizing and spacing around the split dropdown toggle so that the caret isn't misaligned

docs/components/button-dropdown.md

@@ -102,12 +102,12 @@ Turn a button into a dropdown toggle with some basic markup changes.
 
 ### Split button dropdowns
 
-Similarly, create split button dropdowns with the same markup changes, only with a separate button.
+Similarly, create split button dropdowns with nearly the same markup as single button dropdowns, but add the `.dropdown-toggle-split` class for proper spacing around the dropdown caret.
 
 <div class="bd-example">
   <div class="btn-group">
     <button type="button" class="btn btn-secondary">Default</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <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 Dropdown</span>
     </button>
     <div class="dropdown-menu">
@@ -120,7 +120,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
   </div><!-- /btn-group -->
   <div class="btn-group">
     <button type="button" class="btn btn-primary">Primary</button>
-    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="sr-only">Toggle Dropdown</span>
     </button>
     <div class="dropdown-menu">
@@ -133,7 +133,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
   </div><!-- /btn-group -->
   <div class="btn-group">
     <button type="button" class="btn btn-success">Success</button>
-    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="sr-only">Toggle Dropdown</span>
     </button>
     <div class="dropdown-menu">
@@ -146,7 +146,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
   </div><!-- /btn-group -->
   <div class="btn-group">
     <button type="button" class="btn btn-info">Info</button>
-    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="sr-only">Toggle Dropdown</span>
     </button>
     <div class="dropdown-menu">
@@ -159,7 +159,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
   </div><!-- /btn-group -->
   <div class="btn-group">
     <button type="button" class="btn btn-warning">Warning</button>
-    <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="sr-only">Toggle Dropdown</span>
     </button>
     <div class="dropdown-menu">
@@ -172,7 +172,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
   </div><!-- /btn-group -->
   <div class="btn-group">
     <button type="button" class="btn btn-danger">Danger</button>
-    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="sr-only">Toggle Dropdown</span>
     </button>
     <div class="dropdown-menu">
@@ -186,10 +186,10 @@ Similarly, create split button dropdowns with the same markup changes, only with
 </div>
 
 {% highlight html %}
-<!-- Split button -->
+<!-- Example split button -->
 <div class="btn-group">
   <button type="button" class="btn btn-danger">Action</button>
-  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <span class="sr-only">Toggle Dropdown</span>
   </button>
   <div class="dropdown-menu">
@@ -220,6 +220,19 @@ Button dropdowns work with buttons of all sizes.
         <a class="dropdown-item" href="#">Separated link</a>
       </div>
     </div><!-- /btn-group -->
+    <div class="btn-group">
+      <button type="button" class="btn btn-lg btn-secondary">Large split button</button>
+      <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <span class="sr-only">Toggle Dropdown</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><!-- /btn-group -->
   </div><!-- /btn-toolbar -->
   <div class="btn-toolbar" role="toolbar">
     <div class="btn-group">
@@ -234,6 +247,19 @@ Button dropdowns work with buttons of all sizes.
         <a class="dropdown-item" href="#">Separated link</a>
       </div>
     </div><!-- /btn-group -->
+    <div class="btn-group">
+      <button type="button" class="btn btn-sm btn-secondary">Small split button</button>
+      <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <span class="sr-only">Toggle Dropdown</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><!-- /btn-group -->
   </div><!-- /btn-toolbar -->
 </div><!-- /example -->
 

scss/_button-group.scss

@@ -103,13 +103,19 @@
 //
 
 // Give the line between buttons some depth
-.btn-group > .btn + .dropdown-toggle {
-  padding-right: $split-btn-dropdown-toggle-padding-x;
-  padding-left: $split-btn-dropdown-toggle-padding-x;
-}
-.btn-group > .btn-lg + .dropdown-toggle {
-  padding-right: $split-btn-lg-dropdown-toggle-padding-x;
-  padding-left: $split-btn-lg-dropdown-toggle-padding-x;
+.dropdown-toggle-split {
+  padding-left: $btn-dropdown-toggle-split-l;
+  padding-right: $btn-dropdown-toggle-split-r;
+
+  &.btn-sm {
+    padding-left: $btn-dropdown-toggle-split-l-sm;
+    padding-right: $btn-dropdown-toggle-split-r-sm;
+  }
+
+  &.btn-lg {
+    padding-left: $btn-dropdown-toggle-split-l-lg;
+    padding-right: $btn-dropdown-toggle-split-r-lg;
+  }
 }
 
 // The clickable button for toggling the menu

scss/_dropdown.scss

@@ -10,8 +10,7 @@
     display: inline-block;
     width: 0;
     height: 0;
-    margin-right: .25rem;
-    margin-left: .25rem;
+    margin-left: $caret-width;
     vertical-align: middle;
     content: "";
     border-top: $caret-width solid;

scss/_functions.scss

@@ -0,0 +1,17 @@
+//
+// Functions
+//
+
+
+// Remove the unit of a length
+// Source: https://css-tricks.com/snippets/sass/strip-unit-function/
+//
+// @param {Number} $number - Number to remove unit from
+// @return {Number} - Unitless number
+
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+  @return $number;
+}

scss/_variables.scss

@@ -270,11 +270,15 @@ $btn-padding-y-sm:               .25rem !default;
 $btn-padding-x-lg:               1.25rem !default;
 $btn-padding-y-lg:               .75rem !default;
 
-$btn-block-spacing-y:            5px !default;
-$btn-toolbar-margin:             5px !default;
+$btn-block-spacing-y:            .5rem !default;
+$btn-toolbar-margin:             .5rem !default;
 
-$split-btn-dropdown-toggle-padding-x:     8px !default;
-$split-btn-lg-dropdown-toggle-padding-x: 12px !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;

scss/bootstrap.scss

@@ -5,6 +5,7 @@
  */
 
 // Core variables and mixins
+@import "functions";
 @import "variables";
 @import "mixins";