EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3833 styles: Adapt button color to toolbar

main
Pau Ferrer Ocaña 2022-03-23 16:33:00 +01:00
parent ea8664f8ba
commit cd660513d9
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/theme/components/collapsible-header.scss
View File

@ -29,6 +29,8 @@
--core-header-toolbar-border-width: 0; --core-header-toolbar-border-width: 0;
ion-toolbar { ion-toolbar {
--background: transparent; --background: transparent;
--core-header-buttons-background: var(--ion-background-color);
--core-header-buttons-color: var(--text-color);
} }
h1 { h1 {

16
src/theme/theme.base.scss
View File

@ -152,9 +152,11 @@ ion-toolbar {
// Header. // Header.
ion-header { ion-header {
z-index: 12; // To hide ion-slides on scroll. z-index: 12; // To hide ion-slides on scroll.
--core-header-buttons-background: var(--core-header-toolbar-background);
ion-toolbar { ion-toolbar {
--core-header-buttons-background: var(--core-header-toolbar-background);
--core-header-buttons-color: var(--core-header-toolbar-color);
ion-spinner { ion-spinner {
margin: 10px; margin: 10px;
} }
@ -164,11 +166,11 @@ ion-header {
.in-toolbar.button-solid, .in-toolbar.button-solid,
.button.button-clear, .button.button-clear,
.button.button-solid { .button.button-solid {
--color: var(--core-header-toolbar-color); --color: var(--core-header-buttons-color);
--background: var(--core-header-buttons-background); --background: var(--core-header-buttons-background);
--ion-toolbar-color: var(--core-header-toolbar-color); --ion-toolbar-color: var(--core-header-buttons-color);
--border-radius: var(--huge-radius); --border-radius: var(--huge-radius);
--primary: var(--core-header-toolbar-color); --primary: var(--core-header-buttons-color);
} }
ion-back-button::part(text) { ion-back-button::part(text) {
display: none; display: none;
@ -1490,7 +1492,11 @@ ion-header.no-title {
--core-header-toolbar-border-width: 0; --core-header-toolbar-border-width: 0;
--core-header-toolbar-background: transparent; --core-header-toolbar-background: transparent;
--core-header-shadow: none !important; --core-header-shadow: none !important;
--core-header-buttons-background: var(--ion-background-color); ion-toolbar {
--core-header-buttons-background: var(--ion-background-color);
--core-header-buttons-color: var(--text-color);
}
} }
// To make core-swipe-slides fill the remaining height. // To make core-swipe-slides fill the remaining height.