diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index 1b6b2e9590..e0f643f98d 100644 --- a/dist/css/ionic-ios7.css +++ b/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; diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index 67527d4cb5..82a18b7c66 100644 --- a/dist/css/ionic-scoped.css +++ b/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; diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 3bd37b2806..64e1a379ec 100644 --- a/dist/css/ionic.css +++ b/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; diff --git a/scss/ionic-ios7/ionic-ios7.scss b/scss/ionic-ios7/ionic-ios7.scss index 66682bc04e..1c6df019d0 100644 --- a/scss/ionic-ios7/ionic-ios7.scss +++ b/scss/ionic-ios7/ionic-ios7.scss @@ -27,7 +27,7 @@ // Buttons "../ionic/button", - "../ionic/button-group", + "../ionic/button-bar", // Badges "../ionic/badge", diff --git a/scss/ionic/_button-bar.scss b/scss/ionic/_button-bar.scss new file mode 100644 index 0000000000..a70dfc3050 --- /dev/null +++ b/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; +} diff --git a/scss/ionic/_button-group.scss b/scss/ionic/_button-group.scss deleted file mode 100644 index fe316f9ff5..0000000000 --- a/scss/ionic/_button-group.scss +++ /dev/null @@ -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; -} diff --git a/scss/ionic/ionic-scoped.scss b/scss/ionic/ionic-scoped.scss index 33c834e6e5..e7a72c2c7f 100644 --- a/scss/ionic/ionic-scoped.scss +++ b/scss/ionic/ionic-scoped.scss @@ -33,7 +33,7 @@ // Buttons "button", - "button-group", + "button-bar", // Badges "badge", diff --git a/scss/ionic/ionic.scss b/scss/ionic/ionic.scss index 9fb7e42e7e..bdc0b6f170 100644 --- a/scss/ionic/ionic.scss +++ b/scss/ionic/ionic.scss @@ -31,7 +31,7 @@ // Buttons "button", - "button-group", + "button-bar", // Badges "badge", diff --git a/test/button-groups.html b/test/button-bar.html similarity index 87% rename from test/button-groups.html rename to test/button-bar.html index fc9ea2e266..9040d2d12d 100644 --- a/test/button-groups.html +++ b/test/button-bar.html @@ -1,7 +1,7 @@ - Button Group + Button Bar @@ -10,13 +10,13 @@
-

Button Group

+

Button Bar

-

+
Success Warning Danger diff --git a/test/index.html b/test/index.html index 7be5829ef9..ed30eb739b 100644 --- a/test/index.html +++ b/test/index.html @@ -19,7 +19,7 @@

Alerts

Buttons

-

Button Groups

+

Button Bar

Cards

Footers

Headers