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
This commit is contained in:
Mark Otto
parent
b280e36b78
commit
fda92d02a3
|
|
@ -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.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
|
|
@ -100,9 +100,11 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
|||
</div>
|
||||
{% 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.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
|
|
@ -202,9 +204,9 @@ Similarly, create split button dropdowns with nearly the same markup as single b
|
|||
</div>
|
||||
{% 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.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
|
|
@ -264,7 +266,7 @@ Button dropdowns work with buttons of all sizes.
|
|||
</div><!-- /example -->
|
||||
|
||||
{% highlight html %}
|
||||
<!-- Large button group -->
|
||||
<!-- Large button groups (default and split) -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Large button
|
||||
|
|
@ -273,8 +275,19 @@ Button dropdowns work with buttons of all sizes.
|
|||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Large 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">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Small button group -->
|
||||
<!-- Small button groups (default and split) -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Small button
|
||||
|
|
@ -283,16 +296,42 @@ Button dropdowns work with buttons of all sizes.
|
|||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Small 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">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
### Dropup variation
|
||||
## Dropup variation
|
||||
|
||||
Trigger dropdown menus above elements by adding `.dropup` to the parent.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary">Dropup</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropup
|
||||
</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>
|
||||
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropup
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
|
|
@ -303,24 +342,12 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
|
|||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-primary">Right dropup</button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<!-- Default dropup button -->
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary">Dropup</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
|
|
@ -330,4 +357,17 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
|
|||
<!-- Dropdown menu links -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Split dropup button -->
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropup
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<!-- Dropdown menu links -->
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue