moved button-group to button-bar

dist/css/ionic-ios7.css

@@ -1816,70 +1816,6 @@ a.button {
   border-left-width: 1px;
   border-radius: 2px; }
 
-.button-group {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle; }
-  .button-group > .button {
-    position: relative;
-    display: inline-block;
-    float: left;
-    width: auto; }
-    .button-group > .button:hover, .button-group > .button:focus, .button-group > .button:active, .button-group > .button.active {
-      z-index: 2; }
-    .button-group > .button:focus {
-      outline: none; }
-
-.button-group .button + .button,
-.button-group .button + .button-group,
-.button-group .button-group + .button,
-.button-group .button-group + .button-group {
-  margin-left: -1px; }
-
-.button-group > .button:not(:first-child):not(:last-child) {
-  border-radius: 0; }
-
-.button-group > .button:first-child {
-  margin-left: 0; }
-  .button-group > .button:first-child:not(:last-child) {
-    -webkit-border-top-right-radius: 0;
-    -moz-border-radius-topright: 0;
-    border-top-right-radius: 0;
-    -webkit-border-bottom-right-radius: 0;
-    -moz-border-radius-bottomright: 0;
-    border-bottom-right-radius: 0; }
-
-.button-group > .button:last-child:not(:first-child) {
-  -webkit-border-top-left-radius: 0;
-  -moz-border-radius-topleft: 0;
-  border-top-left-radius: 0;
-  -webkit-border-bottom-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  border-bottom-left-radius: 0; }
-
-.button-group > .button-group {
-  float: left; }
-
-.button-group > .button-group:not(:first-child):not(:last-child) > .button {
-  border-radius: 0; }
-
-.button-group > .button-group:first-child > .button:last-child,
-.button-group > .button-group:first-child > .dropdown-toggle {
-  -webkit-border-top-right-radius: 0;
-  -moz-border-radius-topright: 0;
-  border-top-right-radius: 0;
-  -webkit-border-bottom-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  border-bottom-right-radius: 0; }
-
-.button-group > .button-group:last-child > .button:first-child {
-  -webkit-border-top-left-radius: 0;
-  -moz-border-radius-topleft: 0;
-  border-top-left-radius: 0;
-  -webkit-border-bottom-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  border-bottom-left-radius: 0; }
-
 .button-bar {
   box-flex: 1;
   -webkit-box-flex: 1;

dist/css/ionic-scoped.css

@@ -2440,61 +2440,6 @@
     border-right-width: 1px;
     border-left-width: 1px;
     border-radius: 2px; }
-  .ionic .button-group {
-    position: relative;
-    display: inline-block;
-    vertical-align: middle; }
-    .ionic .button-group > .button {
-      position: relative;
-      display: inline-block;
-      float: left;
-      width: auto; }
-      .ionic .button-group > .button:hover, .ionic .button-group > .button:focus, .ionic .button-group > .button:active, .ionic .button-group > .button.active {
-        z-index: 2; }
-      .ionic .button-group > .button:focus {
-        outline: none; }
-  .ionic .button-group .button + .button,
-  .ionic .button-group .button + .button-group,
-  .ionic .button-group .button-group + .button,
-  .ionic .button-group .button-group + .button-group {
-    margin-left: -1px; }
-  .ionic .button-group > .button:not(:first-child):not(:last-child) {
-    border-radius: 0; }
-  .ionic .button-group > .button:first-child {
-    margin-left: 0; }
-    .ionic .button-group > .button:first-child:not(:last-child) {
-      -webkit-border-top-right-radius: 0;
-      -moz-border-radius-topright: 0;
-      border-top-right-radius: 0;
-      -webkit-border-bottom-right-radius: 0;
-      -moz-border-radius-bottomright: 0;
-      border-bottom-right-radius: 0; }
-  .ionic .button-group > .button:last-child:not(:first-child) {
-    -webkit-border-top-left-radius: 0;
-    -moz-border-radius-topleft: 0;
-    border-top-left-radius: 0;
-    -webkit-border-bottom-left-radius: 0;
-    -moz-border-radius-bottomleft: 0;
-    border-bottom-left-radius: 0; }
-  .ionic .button-group > .button-group {
-    float: left; }
-  .ionic .button-group > .button-group:not(:first-child):not(:last-child) > .button {
-    border-radius: 0; }
-  .ionic .button-group > .button-group:first-child > .button:last-child,
-  .ionic .button-group > .button-group:first-child > .dropdown-toggle {
-    -webkit-border-top-right-radius: 0;
-    -moz-border-radius-topright: 0;
-    border-top-right-radius: 0;
-    -webkit-border-bottom-right-radius: 0;
-    -moz-border-radius-bottomright: 0;
-    border-bottom-right-radius: 0; }
-  .ionic .button-group > .button-group:last-child > .button:first-child {
-    -webkit-border-top-left-radius: 0;
-    -moz-border-radius-topleft: 0;
-    border-top-left-radius: 0;
-    -webkit-border-bottom-left-radius: 0;
-    -moz-border-radius-bottomleft: 0;
-    border-bottom-left-radius: 0; }
   .ionic .button-bar {
     box-flex: 1;
     -webkit-box-flex: 1;

dist/css/ionic.css

@@ -2934,70 +2934,6 @@ a.button {
   border-left-width: 1px;
   border-radius: 2px; }
 
-.button-group {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle; }
-  .button-group > .button {
-    position: relative;
-    display: inline-block;
-    float: left;
-    width: auto; }
-    .button-group > .button:hover, .button-group > .button:focus, .button-group > .button:active, .button-group > .button.active {
-      z-index: 2; }
-    .button-group > .button:focus {
-      outline: none; }
-
-.button-group .button + .button,
-.button-group .button + .button-group,
-.button-group .button-group + .button,
-.button-group .button-group + .button-group {
-  margin-left: -1px; }
-
-.button-group > .button:not(:first-child):not(:last-child) {
-  border-radius: 0; }
-
-.button-group > .button:first-child {
-  margin-left: 0; }
-  .button-group > .button:first-child:not(:last-child) {
-    -webkit-border-top-right-radius: 0;
-    -moz-border-radius-topright: 0;
-    border-top-right-radius: 0;
-    -webkit-border-bottom-right-radius: 0;
-    -moz-border-radius-bottomright: 0;
-    border-bottom-right-radius: 0; }
-
-.button-group > .button:last-child:not(:first-child) {
-  -webkit-border-top-left-radius: 0;
-  -moz-border-radius-topleft: 0;
-  border-top-left-radius: 0;
-  -webkit-border-bottom-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  border-bottom-left-radius: 0; }
-
-.button-group > .button-group {
-  float: left; }
-
-.button-group > .button-group:not(:first-child):not(:last-child) > .button {
-  border-radius: 0; }
-
-.button-group > .button-group:first-child > .button:last-child,
-.button-group > .button-group:first-child > .dropdown-toggle {
-  -webkit-border-top-right-radius: 0;
-  -moz-border-radius-topright: 0;
-  border-top-right-radius: 0;
-  -webkit-border-bottom-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  border-bottom-right-radius: 0; }
-
-.button-group > .button-group:last-child > .button:first-child {
-  -webkit-border-top-left-radius: 0;
-  -moz-border-radius-topleft: 0;
-  border-top-left-radius: 0;
-  -webkit-border-bottom-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  border-bottom-left-radius: 0; }
-
 .button-bar {
   box-flex: 1;
   -webkit-box-flex: 1;

scss/ionic-ios7/ionic-ios7.scss

@@ -27,7 +27,7 @@
 
   // Buttons
   "../ionic/button",
-  "../ionic/button-group",
+  "../ionic/button-bar",
 
   // Badges
   "../ionic/badge",

scss/ionic/_button-bar.scss

@@ -0,0 +1,42 @@
+
+.button-bar {
+  @include box-flex(1);
+  @include box-orient(horizontal);
+  display: -webkit-box;
+  display: box;
+}
+
+.button-bar > .button {
+  @include box-flex(1);
+  display: block;
+  
+  overflow: hidden;
+
+  padding: 8px 16px;
+
+  // Fix for unequal widths of buttons
+  width: 0;
+
+  border-width: 1px 0px 1px 1px;
+  border-radius: 0;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  // Fix for box-flex width issue
+
+  line-height: $button-bar-button-line-height;
+
+  &:last-child {
+    border-right-width: 1px;
+  }
+}
+
+// Buttons are used to group a set of buttons, useful
+// to pull a set of buttons to the right side of a header
+// bar, for example.
+.buttons {
+  @include box-flex(1);
+  @include box-orient(horizontal);
+  display: -webkit-box;
+  display: box; 
+}

scss/ionic/_button-group.scss

@@ -1,107 +0,0 @@
-.button-group {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle; // match .button alignment given font-size hack above
-
-  > .button {
-    position: relative;
-    display: inline-block;
-    float: left;
-    width: auto;
-    // Bring the "active" button to the front
-    &:hover,
-    &:focus,
-    &:active,
-    &.active {
-      z-index: 2;
-    }
-    &:focus {
-      // Remove focus outline when dropdown JS adds it after closing the menu
-      outline: none;
-    }
-  }
-}
-
-.button-group {
-  .button + .button,
-  .button + .button-group,
-  .button-group + .button,
-  .button-group + .button-group {
-    margin-left: -1px;
-  }
-}
-
-.button-group > .button:not(:first-child):not(:last-child) {
-  border-radius: 0;
-}
-
-// Set corners individual because sometimes a single button can be in a .button-group and we need :first-child and :last-child to both match
-.button-group > .button:first-child {
-  margin-left: 0;
-  &:not(:last-child) {
-    @include border-right-radius(0);
-  }
-}
-// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
-.button-group > .button:last-child:not(:first-child) {
-  @include border-left-radius(0);
-}
-
-// Custom edits for including button-groups within button-groups (useful for including dropdown buttons within a button-group)
-.button-group > .button-group {
-  float: left;
-}
-.button-group > .button-group:not(:first-child):not(:last-child) > .button {
-  border-radius: 0;
-}
-.button-group > .button-group:first-child {
-  > .button:last-child,
-  > .dropdown-toggle {
-    @include border-right-radius(0);
-  }
-}
-.button-group > .button-group:last-child > .button:first-child {
-  @include border-left-radius(0);
-}
-
-.button-bar {
-  @include box-flex(1);
-  @include box-orient(horizontal);
-  display: -webkit-box;
-  display: box;
-}
-
-.button-bar > .button {
-  @include box-flex(1);
-  display: block;
-  
-  overflow: hidden;
-
-  padding: 8px 16px;
-
-  // Fix for unequal widths of buttons
-  width: 0;
-
-  border-width: 1px 0px 1px 1px;
-  border-radius: 0;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  // Fix for box-flex width issue
-
-  line-height: $button-bar-button-line-height;
-
-  &:last-child {
-    border-right-width: 1px;
-  }
-}
-
-// Buttons are used to group a set of buttons, useful
-// to pull a set of buttons to the right side of a header
-// bar, for example.
-.buttons {
-  @include box-flex(1);
-  @include box-orient(horizontal);
-  display: -webkit-box;
-  display: box;
-}

scss/ionic/ionic-scoped.scss

@@ -33,7 +33,7 @@
 
   // Buttons
   "button",
-  "button-group",
+  "button-bar",
 
   // Badges
   "badge",

scss/ionic/ionic.scss

@@ -31,7 +31,7 @@
 
   // Buttons
   "button",
-  "button-group",
+  "button-bar",
 
   // Badges
   "badge",

test/button-bar.html

@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Button Group</title>
+    <title>Button Bar</title>
 
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
@@ -10,13 +10,13 @@
   <body>
 
       <header class="bar bar-header bar-dark">
-        <h1 class="title">Button Group</h1>
+        <h1 class="title">Button Bar</h1>
       </header>
 
       <div class="content-wrapper">
         <main class="content padded has-header">
           <p>
-            <div class="button-group">
+            <div class="button-bar">
               <a class="button button-primary">Success</a>
               <a class="button button-primary">Warning</a>
               <a class="button button-primary">Danger</a>

test/index.html

@@ -19,7 +19,7 @@
         <main class="content padded has-header">
           <p><a class="button button-block button-default" href="alerts.html"><i class="icon-star"></i> Alerts</a></p>
           <p><a class="button button-block button-default" href="buttons.html"><i class="icon-star-half-empty"></i> Buttons</a></p>
-          <p><a class="button button-block button-default" href="button-groups.html"><i class="icon-star"></i> Button Groups</a></p>
+          <p><a class="button button-block button-default" href="button-bar.html"><i class="icon-star"></i> Button Bar</a></p>
           <p><a class="button button-block button-default" href="cards.html"><i class="icon-star-empty"></i> Cards</a></p>
           <p><a class="button button-block button-default" href="footers.html"><i class="icon-star"></i> Footers</a></p>
           <p><a class="button button-block button-default" href="headers.html"><i class="icon-star-half-empty"></i> Headers</a></p>