diff options
Diffstat (limited to 'scss/_button-group.scss')
-rw-r--r-- | scss/_button-group.scss | 58 |
1 files changed, 19 insertions, 39 deletions
diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 0e63ecc54b..bbee02abfc 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -4,28 +4,27 @@ .btn-group, .btn-group-vertical { position: relative; - display: inline-block; + display: flex; + // display: inline-block; vertical-align: middle; // match .btn alignment given font-size hack above > .btn { position: relative; - float: left; - margin-bottom: 0; + flex: 0 1 auto; - // Bring the "active" button to the front + // Bring the hover, focused, and "active" buttons to the fron to overlay + // the borders properly + @include hover { + z-index: 2; + } &:focus, &:active, &.active { z-index: 2; } - @include hover { - z-index: 2; - } } -} -// Prevent double borders when buttons are next to each other -.btn-group { + // Prevent double borders when buttons are next to each other .btn + .btn, .btn + .btn-group, .btn-group + .btn, @@ -36,19 +35,8 @@ // Optional: Group multiple button groups together for a toolbar .btn-toolbar { - margin-left: -$btn-toolbar-margin; // Offset the first child's margin - @include clearfix(); - - .btn-group, - .input-group { - float: left; - } - - > .btn, - > .btn-group, - > .input-group { - margin-left: $btn-toolbar-margin; - } + display: flex; + justify-content: flex-start; } .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { @@ -158,22 +146,14 @@ // .btn-group-vertical { - > .btn, - > .btn-group, - > .btn-group > .btn { - display: block; - float: none; - width: 100%; - max-width: 100%; - } - - // Clear floats so dropdown menus can be properly placed - > .btn-group { - @include clearfix(); - - > .btn { - float: none; - } + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + + .btn, + .btn-group { + flex: 0 1 auto; } > .btn + .btn, |