diff --git a/src/app/app.scss b/src/app/app.scss index cf34c2ee7..8bbc87959 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -649,13 +649,16 @@ ion-app.app-root { .toolbar img.core-bar-button-image, .toolbar .core-bar-button-image img { padding: 0; - width: 100%; - height: 100%; - max-width: $core-toolbar-button-image-width - 1; - max-height: $core-toolbar-button-image-width - 1; + width: $core-toolbar-button-image-width; + height: $core-toolbar-button-image-width; + max-width: $core-toolbar-button-image-width; border-radius: 50%; } + .toolbar-ios { + height: 52px; + } + // Footer with auto height. .footer.footer-adjustable { height: auto; @@ -1152,3 +1155,10 @@ ion-app.platform-desktop { .ion-md-funnel::before { content: "\f182"; } + +// Fix icon size in lists, to prevent them scaling with text. +.item, .item-inner { + > ion-icon { + font-size: 28px; + } +} diff --git a/src/components/ion-tabs/ion-tabs.scss b/src/components/ion-tabs/ion-tabs.scss index 31f667650..6b16d9401 100644 --- a/src/components/ion-tabs/ion-tabs.scss +++ b/src/components/ion-tabs/ion-tabs.scss @@ -3,6 +3,7 @@ $core-sidetab-size: 60px !default; ion-app.app-root core-ion-tabs { .tabbar { z-index: 101; // For some reason, the regular z-index isn't enough with our tabs, use a higher one. + height: 56px; .core-ion-tabs-loading { height: 100%; diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index ac4b2ac54..01568394d 100644 --- a/src/components/tabs/tabs.scss +++ b/src/components/tabs/tabs.scss @@ -74,7 +74,7 @@ ion-app.app-root.ios .core-tabs-bar .tab-slide { max-width: $tabs-ios-tab-max-width; min-height: $tabs-ios-tab-min-height; - font-size: $tabs-ios-tab-font-size + 4; + font-size: $tabs-ios-tab-font-size; font-weight: $tabs-ios-tab-font-weight; color: $tabs-ios-tab-text-color; } diff --git a/src/core/settings/pages/general/general.ts b/src/core/settings/pages/general/general.ts index b752f8d5e..9befe638a 100644 --- a/src/core/settings/pages/general/general.ts +++ b/src/core/settings/pages/general/general.ts @@ -68,7 +68,7 @@ export class CoreSettingsGeneralPage { this.selectedLanguage = currentLanguage; }); - this.configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0]).then((fontSize) => { + this.configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0].toString()).then((fontSize) => { this.selectedFontSize = fontSize; this.fontSizes = CoreConfigConstants.font_sizes.map((size) => { return { diff --git a/src/theme/variables.scss b/src/theme/variables.scss index a094ae0ff..1727a6d28 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -229,6 +229,29 @@ $popover-wp-width: $popover-width; $item-wp-divider-background: $item-divider-background; $item-wp-divider-color: $item-divider-color; +// Font sizes +// --------------------------------------------------- +// Some font sizes are defined in absolute pixels by ionic, +// override these with relative sizes so they are resizable. +$alert-ios-message-font-size: 1.4rem; +$alert-ios-title-font-size: 2.2rem; +$alert-ios-sub-title-font-size: 1.6rem; +$alert-md-message-font-size: 1.4rem; +$alert-md-title-font-size: 2.2rem; +$alert-md-sub-title-font-size: 1.6rem; +$alert-button-font-size: 1.4rem; +$tabs-ios-tab-font-size: 1.4rem; +$chip-ios-font-size: 1.3rem; +$chip-md-font-size: 1.3rem; + +// Icon sizes +// --------------------------------------------------- +// Some font icons have relative sizes set by ionic, +// define absolute sizes so they aren't scaled with text. +$tabs-md-tab-icon-size: 24px; +$tabs-md-tab-min-height: 56px; +$tabs-ios-tab-min-height: 56px; + // App Theme // -------------------------------------------------- // Ionic apps can have different themes applied, which can