diff options
| author | Mark Otto <markdotto@gmail.com> | 2016-05-11 21:36:09 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2016-05-11 21:36:09 +0300 |
| commit | fda92d02a35de82de8a98af93e2ebe162c373615 (patch) | |
| tree | f0ad930eec8277a70c2223a9465aaa18bd3f0d09 /scss | |
| parent | b280e36b788e4b42bbb359f0a13db410adf7dd8c (diff) | |
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
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_button-group.scss | 26 | ||||
| -rw-r--r-- | scss/_variables.scss | 7 |
2 files changed, 15 insertions, 18 deletions
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; + &::after { + margin-left: 0; } +} - &.btn-lg { - padding-right: $btn-dropdown-toggle-split-r-lg; - padding-left: $btn-dropdown-toggle-split-l-lg; - } +.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; |