From fda92d02a35de82de8a98af93e2ebe162c373615 Mon Sep 17 00:00:00 2001 From: Mark Otto 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 --- docs/components/button-dropdown.md | 72 +++++++++++++++++++++++++++++--------- 1 file changed, 56 insertions(+), 16 deletions(-) (limited to 'docs') diff --git a/docs/components/button-dropdown.md b/docs/components/button-dropdown.md index ecad0d862..80d8911b9 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 %} -- cgit v1.2.3