From: ysds Date: Wed, 27 Dec 2017 00:04:11 +0000 (+0900) Subject: Clean up button group (#25073) X-Git-Tag: v4.0.0-beta.3~14^2~1 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c5209270ac542655769be72bd2cc6fb1f240d781;p=thirdparty%2Fbootstrap.git 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. --- diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 83234f948a..c1b826536c 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -44,46 +44,18 @@ } .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 { 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) { - > .btn:last-child, - > .dropdown-toggle { - @include border-right-radius(0); - } + // Reset rounded corners + > .btn:not(:last-child):not(.dropdown-toggle), + > .btn-group:not(:last-child) > .btn { + @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); } } @@ -154,32 +126,14 @@ margin-left: 0; } - > .btn { - &:not(:first-child):not(:last-child) { - border-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); - } + // Reset rounded corners + > .btn:not(:last-child):not(.dropdown-toggle), + > .btn-group:not(:last-child) > .btn { + @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); } }