javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(nav): back button and title not aligned on baseline

Browse Source 
fixes #8983
This commit is contained in:
Manu Mtz.-Almeida
2016-11-27 18:09:23 +01:00
parent 78e1e97975
commit d82bb01505
10 changed files with 12 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/toolbar/toolbar.ios.scss
View File

@ -14,7 +14,6 @@ $toolbar-order-ios: (
menu-toggle-end: 7, menu-toggle-end: 7,
); );
$toolbar-ios-padding: 4px !default;
$toolbar-ios-button-font-size: 1.7rem !default; $toolbar-ios-button-font-size: 1.7rem !default;
$toolbar-ios-title-font-size: 1.7rem !default; $toolbar-ios-title-font-size: 1.7rem !default;
@ -80,8 +79,6 @@ $navbar-ios-height: $toolbar-ios-height !default;
} }
.toolbar-title-ios { .toolbar-title-ios {
margin-top: 1px;
font-size: $toolbar-ios-title-font-size; font-size: $toolbar-ios-title-font-size;
font-weight: $toolbar-ios-title-font-weight; font-weight: $toolbar-ios-title-font-weight;
text-align: $toolbar-ios-title-text-align; text-align: $toolbar-ios-title-text-align;
@ -157,7 +154,7 @@ $navbar-ios-height: $toolbar-ios-height !default;
// -------------------------------------------------- // --------------------------------------------------
.bar-button-ios { .bar-button-ios {
padding: 0 5px; padding: 0 4px;
height: 32px; height: 32px;

1
src/components/toolbar/toolbar.md.scss
View File

@ -14,7 +14,6 @@ $toolbar-order-md: (
menu-toggle-end: 7, menu-toggle-end: 7,
); );
$toolbar-md-padding: 4px !default;
$toolbar-md-title-font-size: 2rem !default; $toolbar-md-title-font-size: 2rem !default;
$toolbar-md-title-text-color: color-contrast($colors-md, $toolbar-md-background, md) !default; $toolbar-md-title-text-color: color-contrast($colors-md, $toolbar-md-background, md) !default;

1
src/components/toolbar/toolbar.wp.scss
View File

@ -14,7 +14,6 @@ $toolbar-order-wp: (
menu-toggle-end: 7, menu-toggle-end: 7,
); );
$toolbar-wp-padding: 4px !default;
$toolbar-wp-title-padding: 0 6px !default; $toolbar-wp-title-padding: 0 6px !default;
$toolbar-wp-title-font-size: 1.5rem !default; $toolbar-wp-title-font-size: 1.5rem !default;
$toolbar-wp-title-font-weight: bold !default; $toolbar-wp-title-font-weight: bold !default;

2
src/platform/cordova.ios.scss
View File

@ -11,5 +11,5 @@ $cordova-ios-statusbar-padding-modal-max-width: $cordova-statusbar-paddi
// Cordova mixins are in the main cordova file // Cordova mixins are in the main cordova file
.ios { .ios {
@include statusbar-padding($toolbar-ios-height, $content-ios-padding, $cordova-ios-statusbar-padding, $cordova-ios-statusbar-padding-modal-max-width, true); @include statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $cordova-ios-statusbar-padding, $cordova-ios-statusbar-padding-modal-max-width, true);
} }

2
src/platform/cordova.md.scss
View File

@ -11,6 +11,6 @@ $cordova-md-statusbar-padding-modal-max-width: $cordova-statusbar-paddin
// Cordova mixins are in the main cordova file // Cordova mixins are in the main cordova file
.md { .md {
@include statusbar-padding($toolbar-md-height, $content-md-padding, $cordova-md-statusbar-padding, $cordova-md-statusbar-padding-modal-max-width); @include statusbar-padding($toolbar-md-height, $toolbar-md-padding, $content-md-padding, $cordova-md-statusbar-padding, $cordova-md-statusbar-padding-modal-max-width);
} }

10
src/platform/cordova.scss
View File

@ -7,7 +7,7 @@
$cordova-statusbar-padding-modal-max-width: 767px !default; $cordova-statusbar-padding-modal-max-width: 767px !default;
@mixin statusbar-padding($toolbar-height, $content-padding, $cordova-statusbar-padding, $modal-max-width, $style-title: false) { @mixin statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding, $modal-max-width, $style-title: false) {
ion-nav > .ion-page, ion-nav > .ion-page,
ion-nav > .ion-page > ion-header, ion-nav > .ion-page > ion-header,
@ -16,7 +16,7 @@ $cordova-statusbar-padding-modal-max-width: 767px !default;
ion-menu > .menu-inner, ion-menu > .menu-inner,
ion-menu > .menu-inner > ion-header { ion-menu > .menu-inner > ion-header {
@include toolbar-statusbar-padding($toolbar-height, $content-padding, $cordova-statusbar-padding); @include toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding);
// If we should style the title elements in the toolbar // If we should style the title elements in the toolbar
@if ($style-title) { @if ($style-title) {
@ -26,7 +26,7 @@ $cordova-statusbar-padding-modal-max-width: 767px !default;
@media only screen and (max-width: $modal-max-width) { @media only screen and (max-width: $modal-max-width) {
.modal-wrapper > .ion-page > ion-header { .modal-wrapper > .ion-page > ion-header {
@include toolbar-statusbar-padding($toolbar-height, $content-padding, $cordova-statusbar-padding); @include toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding);
// If we should style the title elements in the toolbar // If we should style the title elements in the toolbar
@if ($style-title) { @if ($style-title) {
@ -40,10 +40,10 @@ $cordova-statusbar-padding-modal-max-width: 767px !default;
// The first-child should get modified padding-top for the status bar // The first-child should get modified padding-top for the status bar
// -------------------------------------------------------------------------------- // --------------------------------------------------------------------------------
@mixin toolbar-statusbar-padding($toolbar-height, $content-padding, $cordova-statusbar-padding) { @mixin toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding) {
> .toolbar.statusbar-padding:first-child { > .toolbar.statusbar-padding:first-child {
padding-top: $cordova-statusbar-padding; padding-top: calc(#{$cordova-statusbar-padding} + #{$toolbar-padding});
height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding}); height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
min-height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding}); min-height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});

2
src/platform/cordova.wp.scss
View File

@ -11,5 +11,5 @@ $cordova-wp-statusbar-padding-modal-max-width: $cordova-statusbar-paddin
// Cordova mixins are in the main cordova file // Cordova mixins are in the main cordova file
.wp { .wp {
@include statusbar-padding($toolbar-wp-height, $content-wp-padding, $cordova-wp-statusbar-padding, $cordova-wp-statusbar-padding-modal-max-width); @include statusbar-padding($toolbar-wp-height, $toolbar-wp-padding, $content-wp-padding, $cordova-wp-statusbar-padding, $cordova-wp-statusbar-padding-modal-max-width);
} }

1
src/themes/ionic.theme.default.ios.scss
View File

@ -21,6 +21,7 @@ $content-ios-margin: $content-margin !default;
// -------------------------------------------------- // --------------------------------------------------
$toolbar-ios-height: 44px !default; $toolbar-ios-height: 44px !default;
$toolbar-ios-padding: 4px !default;
$toolbar-ios-background: $toolbar-background !default; $toolbar-ios-background: $toolbar-background !default;
$toolbar-ios-border-color: rgba(0, 0, 0, .3) !default; $toolbar-ios-border-color: rgba(0, 0, 0, .3) !default;
$toolbar-ios-text-color: $toolbar-text-color !default; $toolbar-ios-text-color: $toolbar-text-color !default;

1
src/themes/ionic.theme.default.md.scss
View File

@ -21,6 +21,7 @@ $content-md-margin: $content-margin !default;
// -------------------------------------------------- // --------------------------------------------------
$toolbar-md-height: 56px !default; $toolbar-md-height: 56px !default;
$toolbar-md-padding: 4px !default;
$toolbar-md-background: $toolbar-background !default; $toolbar-md-background: $toolbar-background !default;
$toolbar-md-border-color: $toolbar-border-color !default; $toolbar-md-border-color: $toolbar-border-color !default;
$toolbar-md-text-color: #424242 !default; $toolbar-md-text-color: #424242 !default;

1
src/themes/ionic.theme.default.wp.scss
View File

@ -21,6 +21,7 @@ $content-wp-margin: $content-margin !default;
// -------------------------------------------------- // --------------------------------------------------
$toolbar-wp-height: 46px !default; $toolbar-wp-height: 46px !default;
$toolbar-wp-padding: 4px !default;
$toolbar-wp-background: $toolbar-background !default; $toolbar-wp-background: $toolbar-background !default;
$toolbar-wp-border-color: $toolbar-border-color !default; $toolbar-wp-border-color: $toolbar-border-color !default;
$toolbar-wp-text-color: $toolbar-text-color !default; $toolbar-wp-text-color: $toolbar-text-color !default;