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-collapsed-height: 0px;
--collapsible-header-expanded-y-delta: 0px;
@ -27,10 +27,10 @@
&:not(.collapsible-header-page-is-collapsed) .collapsible-header-collapsed {
--core-header-toolbar-border-width: 0;
ion-toolbar {
--background: transparent;
--core-header-buttons-background: var(--ion-background-color);
--core-header-buttons-color: var(--text-color);
ion-toolbar {
--background: transparent;
}
h1 {

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

@ -154,9 +154,6 @@ ion-header {
z-index: 12; // To hide ion-slides on scroll.
ion-toolbar {
--core-header-buttons-background: var(--core-header-toolbar-background);
--core-header-buttons-color: var(--core-header-toolbar-color);
ion-spinner {
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-color: white;
--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;
ion-header ion-toolbar {
ion-toolbar {
h1, ion-back-button {
display: none;
}
}
}
@media screen and (orientation: landscape) {
// 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-background: transparent;
--core-header-shadow: none !important;
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.

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

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