CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-3833 iframe: Fix full screen header styles

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-03-30 14:13:33 +02:00
parent c6191229a0
commit c7a5b8589b
3 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
.collapsible-header-page { body:not(.core-iframe-fullscreen) .collapsible-header-page {
--collapsible-header-progress: 0; --collapsible-header-progress: 0;
--collapsible-header-collapsed-height: 0px; --collapsible-header-collapsed-height: 0px;
--collapsible-header-expanded-y-delta: 0px; --collapsible-header-expanded-y-delta: 0px;
@ -27,10 +27,10 @@
&:not(.collapsible-header-page-is-collapsed) .collapsible-header-collapsed { &:not(.collapsible-header-page-is-collapsed) .collapsible-header-collapsed {
--core-header-toolbar-border-width: 0; --core-header-toolbar-border-width: 0;
ion-toolbar {
--background: transparent;
--core-header-buttons-background: var(--ion-background-color); --core-header-buttons-background: var(--ion-background-color);
--core-header-buttons-color: var(--text-color); --core-header-buttons-color: var(--text-color);
ion-toolbar {
--background: transparent;
} }
h1 { h1 {

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

@ -154,9 +154,6 @@ ion-header {
z-index: 12; // To hide ion-slides on scroll. z-index: 12; // To hide ion-slides on scroll.
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;
} }
@ -579,16 +576,21 @@ body.core-iframe-fullscreen ion-router-outlet {
} }
} }
.ion-page ion-header {
--core-header-toolbar-height: 48px; --core-header-toolbar-height: 48px;
--core-header-toolbar-color: white; --core-header-toolbar-color: white;
--core-header-toolbar-background: black; --core-header-toolbar-background: black;
--core-header-buttons-background: var(--core-header-toolbar-background);
--core-header-buttons-background: var(--core-header-toolbar-background);
--core-header-buttons-color: var(--core-header-toolbar-color);
--core-header-toolbar-border-width: 0px; --core-header-toolbar-border-width: 0px;
ion-header ion-toolbar { ion-toolbar {
h1, ion-back-button { h1, ion-back-button {
display: none; display: none;
} }
} }
}
@media screen and (orientation: landscape) { @media screen and (orientation: landscape) {
// Place ion-header on the side and hide text // Place ion-header on the side and hide text
@ -1585,11 +1587,8 @@ 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;
ion-toolbar {
--core-header-buttons-background: var(--ion-background-color); --core-header-buttons-background: var(--ion-background-color);
--core-header-buttons-color: var(--text-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.

2
src/theme/theme.light.scss
View File

@ -148,6 +148,8 @@
--core-header-toolbar-color: var(--text-color); --core-header-toolbar-color: var(--text-color);
--core-header-toolbar-height: 48px; --core-header-toolbar-height: 48px;
--core-header-shadow: none; --core-header-shadow: none;
--core-header-buttons-background: var(--core-header-toolbar-background);
--core-header-buttons-color: var(--core-header-toolbar-color);
ion-header { ion-header {
box-shadow: var(--core-header-shadow, none); box-shadow: var(--core-header-shadow, none);