mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-25 22:41:20 +02:00
Code Issues Releases Wiki Activity

Unfuck those split button dropdowns

Browse Source 
- 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
2016-05-11 11:36:09 -07:00
parent b280e36b78
commit fda92d02a3
3 changed files with 80 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
scss/_button-group.scss
View File

@@ -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 {

7
scss/_variables.scss
View File

@@ -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;