javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 14:19:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ios): update toolbar and tabbar default background colors (#22852)

Browse Source 
resolves #22780

BREAKING CHANGE: The tab bar and toolbar default background colors have been updated to better reflect the latest iOS styles.
This commit is contained in:
Liam DeBeasi
2021-02-09 15:46:45 -05:00
committed by GitHub
parent acf0422ca9
commit 3d615cb3c7
2 changed files with 21 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
BREAKING.md
View File

@ -14,7 +14,9 @@ This is a comprehensive list of the breaking changes introduced in the major ver
- [Components](#components) - [Components](#components)
* [Header](#header) * [Header](#header)
* [Tab Bar](#tab-bar)
* [Toast](#toast) * [Toast](#toast)
* [Toolbar](#toolbar)
- [Config](#config) - [Config](#config)
* [Transition Shadow](#transition-shadow) * [Transition Shadow](#transition-shadow)
@ -34,10 +36,26 @@ ion-header.header-collapse-condense ion-toolbar:last-of-type {
} }
``` ```
#### Tab Bar
The default iOS tab bar background color has been updated to better reflect the latest iOS styles. The new default value is:
```css
var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7));
```
#### Toast #### Toast
The `--white-space` CSS variable now defaults to `normal` instead of `pre-wrap`. The `--white-space` CSS variable now defaults to `normal` instead of `pre-wrap`.
#### Toolbar
The default iOS toolbar background color has been updated to better reflect the latest iOS styles. The new default value is:
```css
var(--ion-toolbar-background, var(--ion-color-step-50, #f7f7f7));
```
### Config ### Config
@ -46,6 +64,7 @@ The `--white-space` CSS variable now defaults to `normal` instead of `pre-wrap`.
The `experimentalTransitionShadow` config option has been removed. The transition shadow is now enabled when running in `ios` mode. The `experimentalTransitionShadow` config option has been removed. The transition shadow is now enabled when running in `ios` mode.
## Version 5.x ## Version 5.x
- [CSS](#css) - [CSS](#css)

4
core/src/themes/ionic.theme.default.ios.scss
View File

@ -13,7 +13,7 @@ $overlay-ios-background-color: var(--ion-overlay-background-color,
// iOS Tabs & Tab bar // iOS Tabs & Tab bar
// -------------------------------------------------- // --------------------------------------------------
$tabbar-ios-background: var(--ion-tab-bar-background, $background-color) !default; $tabbar-ios-background: var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7)) !default;
$tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default; $tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
$tabbar-ios-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default; $tabbar-ios-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
$tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-600) !default; $tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-600) !default;
@ -21,7 +21,7 @@ $tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, io
// iOS Toolbar // iOS Toolbar
// -------------------------------------------------- // --------------------------------------------------
$toolbar-ios-background: var(--ion-toolbar-background, var(--ion-color-step-50, #fff)) !default; $toolbar-ios-background: var(--ion-toolbar-background, var(--ion-color-step-50, #f7f7f7)) !default;
$toolbar-ios-border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default; $toolbar-ios-border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
$toolbar-ios-color: var(--ion-toolbar-color, $text-color) !default; $toolbar-ios-color: var(--ion-toolbar-color, $text-color) !default;