diff --git a/dist/ionic.css b/dist/ionic.css index ed8b036956..2532b8eccf 100644 --- a/dist/ionic.css +++ b/dist/ionic.css @@ -435,29 +435,22 @@ a { -webkit-user-select: none; -moz-user-select: -moz-none; user-select: none; + display: -webkit-box; + display: box; position: fixed; left: 0; right: 0; z-index: 10; width: 100%; height: 44px; - padding: 8px; - box-sizing: border-box; - /* - .title + .button:last-child, - .button + .button:last-child, - .button.pull-right { - position: absolute; - top: 5px; - right: 5px; - } - */ } + padding: 5px; + box-sizing: border-box; } .bar .title { position: absolute; z-index: 0; - width: 100%; top: 0; left: 0; + right: 0; line-height: 44px; margin: 0; min-width: 30px; @@ -467,23 +460,22 @@ a { font-size: 18px; } .bar .title a { color: inherit; } - -.buttons { - position: absolute; - z-index: 1; - padding: 8px; - line-height: 6px; } - .buttons .button { - padding: 6px 12px; - line-height: 14px; } - -.buttons:first-child { - left: 0; - top: 0; } - -.buttons:last-child { - right: 0; - top: 0; } + .bar .button { + box-flex: 1; + -webkit-box-flex: 0; + -moz-box-flex: 0; + line-height: 23px; + font-size: 12px; } + .bar .button-bar { + line-height: 18px; } + .bar .button-bar + .button, .bar .button + .button-bar { + margin-left: 5px; } + .bar .title + .button:last-child, + .bar > .button + .button:last-child, + .bar > .button.pull-right { + position: absolute; + top: 5px; + right: 5px; } .bar-header { top: 0; } @@ -595,15 +587,15 @@ a { box-flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1; - width: 0; - line-height: 8px; + line-height: 15px; border-radius: 0; overflow: hidden; text-align: center; white-space: nowrap; display: block; text-overflow: ellipsis; - border-width: 1px 0px 1px 1px; } + border-width: 1px 0px 1px 1px; + padding: 8px 16px; } .button-bar > .button:last-child { border-right-width: 1px; } @@ -1985,7 +1977,7 @@ main { border-radius: 2px; border-width: 1px; border-style: solid; - padding: 10px 15px; } + padding: 4px 12px; } .button.button-default { color: #333333; background-color: white; diff --git a/example/headers.html b/example/headers.html index 1d1703ecfc..e612e3b08f 100644 --- a/example/headers.html +++ b/example/headers.html @@ -20,36 +20,25 @@
-
- Back - This -
+ Back

Really really really really really really really really long title!

-
- Forward -
+ This
-
+
Success Warning Danger
-
-
- Back - This -
+
+ Back
Success Warning Danger
-
- Back - This -
+ This
diff --git a/scss/ionic/_structure-variables.scss b/scss/ionic/_structure-variables.scss index b8c98dc8dc..4756d45361 100644 --- a/scss/ionic/_structure-variables.scss +++ b/scss/ionic/_structure-variables.scss @@ -20,14 +20,19 @@ $roundedRadius: 5px; // ------------------------------- $barHeight: 44px !default; $barLineHeight: 44px !default; -$barButtonsLineHeight: 6px !default; +$barButtonLineHeight: 23px !default; +$barButtonBarLineHeight: 18px !default; $barTitleFontSize: $fontSizeLarge; $barTitleLineHeightComputed: 26px;//$barHeight - 2; -$barPaddingVertical: (($barHeight - $baseLineHeightComputed) / 2); -$barPaddingPortrait: 8px; +$barPaddingPortrait: 5px; $barPaddingLandscape: 5px; +// Button bar stuff +// ------------------------------- +$buttonBarButtonLineHeight: 15px !default; + + // Forms // ------------------------------- $textInputBorderRadius: 2px; diff --git a/scss/ionic/_theme-variables.scss b/scss/ionic/_theme-variables.scss index 0af62b1454..90f4dc95de 100644 --- a/scss/ionic/_theme-variables.scss +++ b/scss/ionic/_theme-variables.scss @@ -65,7 +65,7 @@ $darkColor: #333; // Buttons // ------------------------------- $buttonColor: #222; -$buttonPadding: 10px 15px; +$buttonPadding: 4px 12px; $buttonClearPadding: 10px 0px; $buttonBorderRadius: 2px; $buttonBorderWidth: 1px; diff --git a/scss/ionic/structure/_bar.scss b/scss/ionic/structure/_bar.scss index 3c31130559..ff5d88ae53 100644 --- a/scss/ionic/structure/_bar.scss +++ b/scss/ionic/structure/_bar.scss @@ -3,6 +3,9 @@ .bar { @include disable-user-select(); + display: -webkit-box; + display: box; + position: fixed; left: 0; right: 0; @@ -19,9 +22,9 @@ position: absolute; z-index: 0; - width: 100%; top: 0; left: 0; + right: 0; line-height: $barHeight; @@ -44,41 +47,30 @@ color: inherit; } + .button { + @include box-flex(0); + line-height: $barButtonLineHeight; + font-size: 12px; + } + + .button-bar { + line-height: $barButtonBarLineHeight; + } + + .button-bar + .button, .button + .button-bar { + margin-left: 5px; + } + // Place the last button in a bar on the right of the bar - /* .title + .button:last-child, - .button + .button:last-child, - .button.pull-right { + > .button + .button:last-child, + > .button.pull-right { position: absolute; top: 5px; right: 5px; } - */ } -.buttons { - position: absolute; - - // Lift the buttons container above the title - z-index: 1; - - padding: $barPaddingPortrait; - line-height: $barButtonsLineHeight; - - - .button { - padding: 6px 12px; - line-height: 14px; - } -} -.buttons:first-child { - left: 0; - top: 0; -} -.buttons:last-child { - right: 0; - top: 0; -} // Header at top .bar-header { diff --git a/scss/ionic/structure/_button-group.scss b/scss/ionic/structure/_button-group.scss index f601dec10d..38e4bfcff0 100644 --- a/scss/ionic/structure/_button-group.scss +++ b/scss/ionic/structure/_button-group.scss @@ -75,9 +75,8 @@ .button-bar > .button { @include box-flex(1); // Fix for box-flex width issue - width: 0; - line-height: 8px; + line-height: $buttonBarButtonLineHeight; border-radius: 0; overflow: hidden; @@ -88,6 +87,8 @@ border-width: 1px 0px 1px 1px; + padding: 8px 16px; + &:last-child { border-right-width: 1px; }