fix: button group elevation issue

Author: mrholek

scss/_button-group.scss

@@ -4,6 +4,7 @@
 .btn-group,
 .btn-group-vertical {
   position: relative;
+  z-index: 1;
   display: inline-flex;
   vertical-align: middle; // match .btn alignment given font-size hack above
 
@@ -14,14 +15,19 @@
     // Bring the hover, focused, and "active" buttons to the front to overlay
     // the borders properly
     @include hover() {
-      z-index: 1;
+      z-index: 2;
     }
     &:focus,
     &:active,
     &.active {
-      z-index: 1;
+      z-index: 2;
     }
   }
+
+  .btn-group,
+  .btn-group-vertical {
+    z-index: auto;
+  }
 }
 
 // Optional: Group multiple button groups together for a toolbar
@@ -123,12 +129,15 @@
 
 // The clickable button for toggling the menu
 // Set the same inset shadow as the :active state
-.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);
+.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);
+    }
   }
 }
 

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);
+    @include elevation(1, false, true);
   }
 
   @include hover() {