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

fix(segment): add styles for in a color toolbar

Browse Source
This commit is contained in:
Cam Wiegert
2018-07-13 15:22:46 -05:00
parent 124b87ced4
commit d9e4ca7a22
3 changed files with 24 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -71,4 +71,21 @@
font-size: $segment-button-ios-toolbar-font-size;
line-height: $segment-button-ios-toolbar-line-height;
}
}
:host(.in-color-toolbar) {
--ion-color-base: inherit;
}
:host(.in-color-toolbar) ::slotted(ion-segment-button) {
--border-color: currentColor;
color: inherit;
}
:host(.in-color-toolbar) ::slotted(ion-segment-button.segment-checked) {
--background: #{current-color(contrast)};
--border-color: #{current-color(contrast)};
color: #{current-color(base)};
}

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

@ -14,6 +14,10 @@
color: #{current-color(base)} !important;
}
:host(.in-color-toolbar) {
color: inherit;
}
:host(.segment-disabled) {
opacity: $segment-md-opacity-disabled;

3
core/src/components/segment/segment.tsx
View File

@ -81,7 +81,8 @@ export class Segment {
...createColorClasses(this.color),
'segment-disabled': this.disabled,
'in-toolbar': hostContext('ion-toolbar', this.el)
'in-toolbar': hostContext('ion-toolbar', this.el),
'in-color-toolbar': hostContext('ion-toolbar.ion-color', this.el)
}
};
}