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

fix(segment): fix css var + host-context()

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-09-13 19:23:34 +02:00
parent 44364198b8
commit 49ab065be7
6 changed files with 70 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,6 +16,19 @@
opacity: $segment-md-opacity-disabled;
}
// Material Design Segment Button Color
// --------------------------------------------------
:host-context(ion-toolbar.ion-color):not(.ion-color) {
--color: currentColor;
--color-checked: currentColor;
}
:host(.ion-color)::slotted(.segment-button-checked) {
color: #{current-color(base)};
}
// Material Design Segment Button
// --------------------------------------------------
@ -26,7 +39,6 @@
--padding-start: #{$segment-button-md-padding-start};
--border-width: #{0 0 $segment-button-md-border-bottom-width 0};
--border-style: solid;
--opacity: #{$segment-button-md-opacity};
--transition: #{$segment-button-md-transition};
--icon-size: #{$segment-button-md-icon-size};
@ -45,11 +57,6 @@
// Checked Segment Button
// --------------------------------------------------
:host(.ion-color) ::slotted(.segment-button-checked) {
--background: transparent;
--color: #{current-color(base)};
}
::slotted(.activated),
::slotted(.segment-button-checked) {
opacity: $segment-button-md-opacity-activated;
@ -61,11 +68,3 @@
::slotted(.segment-button-disabled) {
opacity: $segment-button-md-opacity-disabled;
}
// In Toolbar
// --------------------------------------------------
:host(.in-color-toolbar:not(.ion-color)) {
--color: #{current-color(contrast)};
--color-checked: #{current-color(contrast)};
}