diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss index 1856b32664..06e4a7f912 100644 --- a/scss/ionic/_bar.scss +++ b/scss/ionic/_bar.scss @@ -102,7 +102,7 @@ } > .button { - @include box-flex(0); + @include flex(0); z-index: 1; margin: 0; padding: 2px 8px 0 8px; diff --git a/scss/ionic/_button-bar.scss b/scss/ionic/_button-bar.scss index c91647065a..1b4be3691d 100644 --- a/scss/ionic/_button-bar.scss +++ b/scss/ionic/_button-bar.scss @@ -1,17 +1,16 @@ .button-bar { - @include box-flex(1); - @include box-orient(horizontal); - display: -webkit-box; - display: box; + @include display-flex(); + @include flex(1); + @include flex-direction(horizontal); } .button-bar > .button { - @include box-flex(1); + @include flex(1); display: block; overflow: hidden; - padding: 8px 16px; + padding: 0 16px; // Fix for unequal widths of buttons width: 0; @@ -23,7 +22,7 @@ white-space: nowrap; // Fix for box-flex width issue - line-height: $button-bar-button-line-height; + line-height: $button-bar-button-line-height - 2; &:first-child { border-radius: 2px 0px 0px 2px; @@ -38,8 +37,7 @@ // 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; + @include display-flex(); + @include flex(1); + @include flex-direction(horizontal); } diff --git a/scss/ionic/_mixins.scss b/scss/ionic/_mixins.scss index 67ee58ddac..5649a0617d 100644 --- a/scss/ionic/_mixins.scss +++ b/scss/ionic/_mixins.scss @@ -350,18 +350,6 @@ hyphens: $mode; } -@mixin box-orient($orientation) { - box-orient: $orientation; - -webkit-box-orient: $orientation; - -moz-box-orient: $orientation; -} - -@mixin box-flex($flex) { - box-flex: 1; - -webkit-box-flex: $flex; - -moz-box-flex: $flex; -} - @mixin display-flex { display: -webkit-box; display: -webkit-flex; diff --git a/scss/ionic/_tabs.scss b/scss/ionic/_tabs.scss index 4796921fcd..83884eac7a 100644 --- a/scss/ionic/_tabs.scss +++ b/scss/ionic/_tabs.scss @@ -5,15 +5,13 @@ */ .tabs { - - @include box-orient(horizontal); + @include display-flex(); + @include flex-direction(horizontal); @include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark); position: fixed; bottom: 0; z-index: 5; - display: -webkit-box; - display: box; width: 100%; height: $tabs-height; border-style: solid; @@ -66,13 +64,12 @@ } .tab-item { - @include box-flex(1); - display: block; + @include flex(1); + display: inline-block; overflow: hidden; box-sizing: border-box; + margin: auto; - // Required to force box elements to be the same size; - width: 0; height: 100%; color: inherit; @@ -149,3 +146,12 @@ } } +.item.tabs { + @include display-flex(); + padding: 0; + + i, .icon { + position: relative; + } +} +