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

fix(segment): update indicator and border based on theme (#16821)

Browse Source 
adds an example to the custom e2e test

fixes #16820
This commit is contained in:
Brandy Carney
2018-12-19 12:40:12 -05:00
committed by GitHub
parent 45ef6c10fb
commit 74587db672
3 changed files with 29 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,6 +65,8 @@
} }
:host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) { :host-context(ion-toolbar):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))}; color: #{var(--ion-toolbar-color-unchecked, var(--color))};
} }

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

@ -49,6 +49,8 @@
} }
:host-context(ion-toolbar):not(.ion-color)::slotted(.segment-button-checked) { :host-context(ion-toolbar):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))}; color: #{var(--ion-toolbar-color-checked, var(--color-checked))};
} }

25
core/src/components/segment/test/custom/index.html
View File

@ -43,6 +43,23 @@
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
</ion-toolbar> </ion-toolbar>
<ion-toolbar class="themed">
<ion-segment value="delete">
<ion-segment-button value="create">
<ion-label>Create</ion-label>
<ion-icon name="create"></ion-icon>
</ion-segment-button>
<ion-segment-button value="delete">
<ion-label>Delete</ion-label>
<ion-icon name="trash"></ion-icon>
</ion-segment-button>
<ion-segment-button value="upload">
<ion-label>Upload</ion-label>
<ion-icon name="cloud-upload"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
@ -180,6 +197,14 @@
color: #314361; color: #314361;
} }
.themed {
--ion-toolbar-background: #3880ff;
--ion-toolbar-color: #fff;
--ion-toolbar-color-activated: #fff;
--ion-toolbar-color-unchecked: rgba(255, 255, 255, .6);
--ion-toolbar-color-checked: #fff;
}
.custom { .custom {
--background: papayawhip; --background: papayawhip;
--background-checked: navy; --background-checked: navy;