diff --git a/docs/components/button-dropdown.md b/docs/components/button-dropdown.md index ecad0d862a..80d8911b96 100644 --- a/docs/components/button-dropdown.md +++ b/docs/components/button-dropdown.md @@ -17,9 +17,9 @@ Button dropdowns require the [dropdown plugin]({{ site.baseurl }}/components/dro * Will be replaced with the ToC, excluding the "Contents" header {:toc} -### Single button dropdowns +## Single button dropdowns -Turn a button into a dropdown toggle with some basic markup changes. +Turn a button into a dropdown toggle with some basic markup changes for the menu itself and the button used to trigger it.
@@ -100,9 +100,11 @@ Turn a button into a dropdown toggle with some basic markup changes.
{% endhighlight %} -### Split button dropdowns +## Split button dropdowns -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. +Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` for proper spacing around the dropdown caret. + +We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.
@@ -202,9 +204,9 @@ Similarly, create split button dropdowns with nearly the same markup as single b
{% endhighlight %} -### Sizing +## Sizing -Button dropdowns work with buttons of all sizes. +Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
{% highlight html %} - +
+
+ + +
+ ... +
+
- +
+
+ + +
+ ... +
+
{% endhighlight %} -### Dropup variation +## Dropup variation Trigger dropdown menus above elements by adding `.dropup` to the parent.
-
- - -
- Action - Another action - Something else here -
- Separated link -
-
+
{% highlight html %} +
+ + +
+ + +
+ +
+
{% endhighlight %} 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; - } - - &.btn-lg { - padding-right: $btn-dropdown-toggle-split-r-lg; - padding-left: $btn-dropdown-toggle-split-l-lg; + &::after { + margin-left: 0; } } +.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;