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

fix(buttons): use theme/color toolbar colors for buttons (#18191)

Browse Source 
- Updates the iOS buttons in a toolbar to use the proper global theming variables
- Updates the iOS segment to use the correct background variable when checked
- Updates the iOS back button and menu button to use the proper color in a toolbar
- Updates the iOS buttons in a toolbar w/ color to use the proper contrast colors (background, borders, text, hover, focus), mostly solid and outline buttons were affected
- Updates the CSS that applies the global toolbar variables so that it won't affect toolbars w/ a color

fixes #18184, fixes #17840
This commit is contained in:
Brandy Carney
2019-05-14 18:02:30 -04:00
committed by GitHub
parent 578108d586
commit 051198928e
9 changed files with 106 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/segment/segment.ios.scss
View File

@ -64,14 +64,16 @@
line-height: $segment-button-ios-toolbar-line-height;
}
:host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) {
:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(ion-segment-button) {
border-color: #{var(--ion-toolbar-color-checked, var(--border-color))};
color: #{var(--ion-toolbar-color-unchecked, var(--color))};
}
:host-context(ion-toolbar):not(.ion-color)::slotted(.segment-button-checked) {
color: #{var(--ion-toolbar-color-checked, var(--color-checked))};
:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(.segment-button-checked) {
background: #{var(--ion-toolbar-color-checked, var(--background-checked))};
color: #{var(--ion-toolbar-background, var(--color-checked))};
}
// Segment: Color Toolbar

4
core/src/components/segment/segment.md.scss
View File

@ -44,11 +44,11 @@
// Segment: Default Toolbar
// --------------------------------------------------
:host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) {
:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(ion-segment-button) {
color: #{var(--ion-toolbar-color-unchecked, var(--color))};
}
:host-context(ion-toolbar):not(.ion-color)::slotted(.segment-button-checked) {
:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(.segment-button-checked) {
--indicator-color-checked: #{var(--ion-toolbar-color-checked, var(--color-checked))};
color: #{var(--ion-toolbar-color-checked, var(--color-checked))};