fix(buttons): use proper button colors based on CSS variables when inside of a toolbar (#20633)

This commit is contained in:
Brandy Carney
2020-02-27 16:22:39 -05:00
committed by GitHub
parent 0e0e401d86
commit c1d7bf229d
11 changed files with 360 additions and 59 deletions

View File

@ -305,3 +305,19 @@ ion-ripple-effect {
background: transparent;
color: current-color(base);
}
// Button in Toolbar
// --------------------------------------------------
:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
color: #{var(--ion-toolbar-color, var(--color))};
}
:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
border-color: #{var(--ion-toolbar-color, var(--color, var(--border-color)))};
}
:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
background: #{var(--ion-toolbar-color, var(--background))};
color: #{var(--ion-toolbar-background, var(--color))};
}