diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 30a14d8833..4063506825 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -10,7 +10,6 @@ > .btn { position: relative; flex: 0 1 auto; - margin-bottom: 0; // Bring the hover, focused, and "active" buttons to the front to overlay // the borders properly @@ -66,15 +65,18 @@ .btn-group > .btn-group { float: left; } + .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } + .btn-group > .btn-group:first-child:not(:last-child) { > .btn:last-child, > .dropdown-toggle { @include border-right-radius(0); } } + .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { @include border-left-radius(0); } @@ -129,7 +131,6 @@ // .btn-group-vertical { - display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; @@ -146,30 +147,35 @@ margin-top: -$input-btn-border-width; margin-left: 0; } -} -.btn-group-vertical > .btn { - &:not(:first-child):not(:last-child) { - border-radius: 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-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { - border-radius: 0; -} -.btn-group-vertical > .btn-group:first-child:not(:last-child) { - > .btn:last-child, - > .dropdown-toggle { - @include border-bottom-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 { + @include border-top-radius(0); } -} -.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { - @include border-top-radius(0); } diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 607f24a2d0..a708560b3e 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -71,36 +71,28 @@ fieldset[disabled] a.btn { .btn-link { font-weight: $font-weight-normal; color: $link-color; + background-color: transparent; border-radius: 0; - &, - &:active, - &.active, - &:disabled { - background-color: transparent; - @include box-shadow(none); - } - &, - &:focus, - &:active { - border-color: transparent; - box-shadow: none; - } @include hover { - border-color: transparent; - } - @include hover-focus { color: $link-hover-color; text-decoration: $link-hover-decoration; background-color: transparent; + border-color: transparent; } - &:disabled { - color: $btn-link-disabled-color; - @include hover-focus { - text-decoration: none; - } + &:focus, + &.focus { + border-color: transparent; + box-shadow: none; } + + &:disabled, + &.disabled { + color: $btn-link-disabled-color; + } + + // No need for an active state here } diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index f7ec5764e7..312a18f1d8 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -9,7 +9,7 @@ border-color: $border; @include box-shadow($btn-box-shadow); - &:hover { + @include hover { @include color-yiq($background); background-color: $active-background; border-color: $active-border;