diff --git a/example/headers.html b/example/headers.html index ffefae5e12..1450755259 100644 --- a/example/headers.html +++ b/example/headers.html @@ -20,9 +20,9 @@ + Back Really really really really really really really really long title! - Back - This + This @@ -32,13 +32,13 @@ - Back + Back Success Warning Danger - This + This diff --git a/scss/ionic/_structure-variables.scss b/scss/ionic/_structure-variables.scss index 9f9d8a3e16..198137c5e0 100644 --- a/scss/ionic/_structure-variables.scss +++ b/scss/ionic/_structure-variables.scss @@ -20,14 +20,18 @@ $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; + // Horizontal forms & lists // ------------------------------- $horizontalComponentOffset: 180px !default; 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 46a574da79..8ba1996132 100644 --- a/scss/ionic/structure/_bar.scss +++ b/scss/ionic/structure/_bar.scss @@ -49,6 +49,16 @@ .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 diff --git a/scss/ionic/structure/_button-group.scss b/scss/ionic/structure/_button-group.scss index 4ff1f60320..38e4bfcff0 100644 --- a/scss/ionic/structure/_button-group.scss +++ b/scss/ionic/structure/_button-group.scss @@ -76,7 +76,7 @@ @include box-flex(1); // Fix for box-flex width issue - line-height: 8px; + line-height: $buttonBarButtonLineHeight; border-radius: 0; overflow: hidden; @@ -87,6 +87,8 @@ border-width: 1px 0px 1px 1px; + padding: 8px 16px; + &:last-child { border-right-width: 1px; }