Commit c5209270 authored by ysds's avatar ysds Committed by Mark Otto
Browse files

Clean up button group (#25073)

* Remove unnecessary float

- since parent btn-group is displayed as inline-flex, the child elements are placed left to right by default.

* Cleanup of reset rounded corners

- Remove `border-radius :0` since it is enough by each reset of left and right side
- A `.dropdown-toggle` selector should not be used for reset rounded corner since it does not have border-radius property. Instead use .dropdown-toggle as negation pseudo-class.
parent 8c6011ab
6 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!25494web pack,!25326Adjust examples,!23207#22402 : modal: new autofocus & keyboardBtnNav options,!17021v4
Showing with 12 additions and 58 deletions
+12 -58
...@@ -44,46 +44,18 @@ ...@@ -44,46 +44,18 @@
} }
.btn-group { .btn-group {
> .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group
// and we need :first-child and :last-child to both match
> .btn:first-child { > .btn:first-child {
margin-left: 0; margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
@include border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu
// immediately after it
> .btn:last-child:not(:first-child),
> .dropdown-toggle:not(:first-child) {
@include border-left-radius(0);
}
// Custom edits for including btn-groups within btn-groups (useful for including
// dropdown buttons within a btn-group)
> .btn-group {
float: left;
}
> .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
} }
> .btn-group:first-child:not(:last-child) { // Reset rounded corners
> .btn:last-child, > .btn:not(:last-child):not(.dropdown-toggle),
> .dropdown-toggle { > .btn-group:not(:last-child) > .btn {
@include border-right-radius(0); @include border-right-radius(0);
}
} }
> .btn-group:last-child:not(:first-child) > .btn:first-child { > .btn:not(:first-child),
> .btn-group:not(:first-child) > .btn {
@include border-left-radius(0); @include border-left-radius(0);
} }
} }
...@@ -154,32 +126,14 @@ ...@@ -154,32 +126,14 @@
margin-left: 0; margin-left: 0;
} }
> .btn { // Reset rounded corners
&:not(:first-child):not(:last-child) { > .btn:not(:last-child):not(.dropdown-toggle),
border-radius: 0; > .btn-group:not(:last-child) > .btn {
} @include border-bottom-radius(0);
&:first-child:not(:last-child) {
@include border-bottom-radius(0);
}
&:last-child:not(:first-child) {
@include border-top-radius(0);
}
}
> .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
> .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
@include border-bottom-radius(0);
}
} }
> .btn-group:last-child:not(:first-child) > .btn:first-child { > .btn:not(:first-child),
> .btn-group:not(:first-child) > .btn {
@include border-top-radius(0); @include border-top-radius(0);
} }
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment