mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
fix(buttons): use proper button colors based on CSS variables when inside of a toolbar (#20633)
This commit is contained in:
@ -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))};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user