fix: button elevation issue

Author: mrholek

scss/_button-group.scss

@@ -4,29 +4,36 @@
 .btn-group,
 .btn-group-vertical {
   position: relative;
-  z-index: 1;
   display: inline-flex;
   vertical-align: middle; // match .btn alignment given font-size hack above
 
   > .btn {
     position: relative;
     flex: 1 1 auto;
+    &:not([class*="ghost"]):not([class*="link"]):not([class*="outline"]):not([class*="transparent"]) {
+      @include elevation(0);
+      @include elevation(1, false, true);
+    }
 
     // Bring the hover, focused, and "active" buttons to the front to overlay
     // the borders properly
     @include hover() {
-      z-index: 2;
+      z-index: 1;
     }
     &:focus,
     &:active,
     &.active {
-      z-index: 2;
+      z-index: 1;
     }
   }
-
-  .btn-group,
-  .btn-group-vertical {
-    z-index: auto;
+  @if $enable-elevations {
+    &:not(.show) {
+      z-index: 1;
+    }
+    .btn-group,
+    .btn-group-vertical {
+      z-index: initial;
+    }
   }
 }
 
@@ -129,15 +136,13 @@
 
 // The clickable button for toggling the menu
 // Set the same inset shadow as the :active state
-.btn-group.show {
-  z-index: 3;
-  .dropdown-toggle {
-    @include box-shadow($btn-active-box-shadow);
 
-    // Show no shadow for `.btn-link` since it has no other button styles.
-    &.btn-link {
-      @include box-shadow(none);
-    }
+.btn-group.show .dropdown-toggle {
+  @include box-shadow($btn-active-box-shadow);
+
+  // Show no shadow for `.btn-link` since it has no other button styles.
+  &.btn-link {
+    @include box-shadow(none);
   }
 }
 

scss/_buttons.scss

@@ -19,7 +19,7 @@
   @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
   @include transition($btn-transition);
   &:not([class*="ghost"]):not([class*="link"]):not([class*="outline"]):not([class*="transparent"]) {
-    @include elevation(1, false, true);
+    @include elevation(1);
   }
 
   @include hover() {

scss/mixins/_elevation.scss

@@ -8,7 +8,6 @@
 }
 
 @mixin add-elevation-before($level, $direction) {
-  position: relative;
   border: 0;
   &::before {
     position: absolute;