_button-group.scss in bootstrap-4.0.0.beta3

- old
+ new

@@ -12,25 +12,25 @@
     flex: 0 1 auto;
 
     // 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;
     }
   }
 
   // Prevent double borders when buttons are next to each other
   .btn + .btn,
   .btn + .btn-group,
   .btn-group + .btn,
   .btn-group + .btn-group {
-    margin-left: -$input-btn-border-width;
+    margin-left: -$btn-border-width;
   }
 }
 
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
@@ -41,52 +41,27 @@
   .input-group {
     width: auto;
   }
 }
 
-.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
-  border-radius: 0;
-}
+.btn-group {
+  > .btn:first-child {
+    margin-left: 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-group > .btn:first-child {
-  margin-left: 0;
-
-  &:not(:last-child):not(.dropdown-toggle) {
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
     @include border-right-radius(0);
   }
-}
-// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu
-// immediately after it
-.btn-group > .btn:last-child:not(:first-child),
-.btn-group > .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 > .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:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-left-radius(0);
   }
 }
 
-.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
-  @include border-left-radius(0);
-}
-
-
 // Sizing
 //
 // Remix the default button sizing classes into new ones for easier manipulation.
 
 .btn-group-sm > .btn { @extend .btn-sm; }
@@ -95,27 +70,27 @@
 
 //
 // Split button dropdowns
 //
 
-.btn + .dropdown-toggle-split {
-  padding-right: $input-btn-padding-x * .75;
-  padding-left: $input-btn-padding-x * .75;
+.dropdown-toggle-split {
+  padding-right: $btn-padding-x * .75;
+  padding-left: $btn-padding-x * .75;
 
   &::after {
     margin-left: 0;
   }
 }
 
 .btn-sm + .dropdown-toggle-split {
-  padding-right: $input-btn-padding-x-sm * .75;
-  padding-left: $input-btn-padding-x-sm * .75;
+  padding-right: $btn-padding-x-sm * .75;
+  padding-left: $btn-padding-x-sm * .75;
 }
 
 .btn-lg + .dropdown-toggle-split {
-  padding-right: $input-btn-padding-x-lg * .75;
-  padding-left: $input-btn-padding-x-lg * .75;
+  padding-right: $btn-padding-x-lg * .75;
+  padding-left: $btn-padding-x-lg * .75;
 }
 
 
 // The clickable button for toggling the menu
 // Set the same inset shadow as the :active state
@@ -145,40 +120,22 @@
 
   > .btn + .btn,
   > .btn + .btn-group,
   > .btn-group + .btn,
   > .btn-group + .btn-group {
-    margin-top: -$input-btn-border-width;
+    margin-top: -$btn-border-width;
     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);
-    }
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @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 {
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
     @include border-top-radius(0);
   }
 }
 
 
@@ -192,16 +149,18 @@
 // This way, we ensure a DOM element is visible to position the popover from.
 //
 // See https://github.com/twbs/bootstrap/pull/12794 and
 // https://github.com/twbs/bootstrap/pull/14559 for more information.
 
-[data-toggle="buttons"] {
+.btn-group-toggle {
   > .btn,
   > .btn-group > .btn {
+    margin-bottom: 0; // Override default `<label>` value
+
     input[type="radio"],
     input[type="checkbox"] {
       position: absolute;
-      clip: rect(0,0,0,0);
+      clip: rect(0, 0, 0, 0);
       pointer-events: none;
     }
   }
 }