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

MOBILE-3947 styles: Fix new Ionic shadow DOM styles

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2023-11-16 15:22:30 +01:00
parent 730c26e5d8
commit 8e65abcd48
3 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/core/classes/modal-lateral-transition.ts
View File

@ -27,7 +27,7 @@ export function CoreModalLateralTransitionEnter(baseEl: HTMLElement): Animation
const otherAnimations: Animation[] = []; const otherAnimations: Animation[] = [];
const backdrop = baseEl.querySelector('ion-backdrop'); const backdrop = baseEl.shadowRoot?.querySelector('ion-backdrop');
if (backdrop) { if (backdrop) {
const backdropAnimation = createAnimation() const backdropAnimation = createAnimation()
.addElement(backdrop) .addElement(backdrop)
@ -36,7 +36,7 @@ export function CoreModalLateralTransitionEnter(baseEl: HTMLElement): Animation
otherAnimations.push(backdropAnimation); otherAnimations.push(backdropAnimation);
} }
const wrapper = baseEl.querySelector('.modal-wrapper'); const wrapper = baseEl.shadowRoot?.querySelector('.modal-wrapper');
if (wrapper) { if (wrapper) {
const wrapperAnimation = createAnimation() const wrapperAnimation = createAnimation()
.addElement(wrapper) .addElement(wrapper)
@ -64,7 +64,7 @@ export function CoreModalLateralTransitionLeave(baseEl: HTMLElement): Animation
const otherAnimations: Animation[] = []; const otherAnimations: Animation[] = [];
const backdrop = baseEl.querySelector('ion-backdrop'); const backdrop = baseEl.shadowRoot?.querySelector('ion-backdrop');
if (backdrop) { if (backdrop) {
const backdropAnimation = createAnimation() const backdropAnimation = createAnimation()
.addElement(backdrop) .addElement(backdrop)
@ -73,7 +73,7 @@ export function CoreModalLateralTransitionLeave(baseEl: HTMLElement): Animation
otherAnimations.push(backdropAnimation); otherAnimations.push(backdropAnimation);
} }
const wrapper = baseEl.querySelector('.modal-wrapper'); const wrapper = baseEl.shadowRoot?.querySelector('.modal-wrapper');
if (wrapper) { if (wrapper) {
const wrapperAnimation = createAnimation() const wrapperAnimation = createAnimation()
.addElement(wrapper) .addElement(wrapper)

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

@ -680,7 +680,7 @@ body.core-iframe-fullscreen ion-router-outlet {
} }
// Modals. // Modals.
.core-modal-fullscreen .modal-wrapper { .core-modal-fullscreen::part(content) {
position: absolute; position: absolute;
@include position(0 !important, null, null, 0 !important); @include position(0 !important, null, null, 0 !important);
display: block; display: block;
@ -690,11 +690,11 @@ body.core-iframe-fullscreen ion-router-outlet {
.core-modal-transparent { .core-modal-transparent {
ion-backdrop { &::part(backdrop) {
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
} }
.modal-wrapper { &::part(content) {
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
--background: rgba(10, 10, 10, 0.2); --background: rgba(10, 10, 10, 0.2);
@ -717,7 +717,7 @@ body.core-iframe-fullscreen ion-router-outlet {
--ion-safe-area-left: 0px; --ion-safe-area-left: 0px;
--ion-safe-area-right: 0px; --ion-safe-area-right: 0px;
.modal-wrapper { &::part(content) {
@include margin-horizontal(var(--modal-lateral-margin), null); @include margin-horizontal(var(--modal-lateral-margin), null);
position: absolute; position: absolute;
@ -729,7 +729,7 @@ body.core-iframe-fullscreen ion-router-outlet {
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
} }
ion-backdrop { &::part(backdrop) {
visibility: visible; visibility: visible;
} }
@ -740,10 +740,10 @@ body.core-iframe-fullscreen ion-router-outlet {
.core-modal-transparent-no-filter { .core-modal-transparent-no-filter {
@extend .core-modal-transparent; @extend .core-modal-transparent;
ion-backdrop { &::part(backdrop) {
backdrop-filter: none; backdrop-filter: none;
} }
.modal-wrapper { &::part(content) {
backdrop-filter: none; backdrop-filter: none;
} }
} }
@ -1107,7 +1107,7 @@ ion-checkbox,
input[type=checkbox] { input[type=checkbox] {
--border-radius: 2px; --border-radius: 2px;
--border-color-checked: var(--text-color); --border-color-checked: var(--text-color);
--background-checked: var(--text-color); --checkbox-background-checked: var(--text-color);
--checkmark-color: var(--contrast-background); --checkmark-color: var(--contrast-background);
--border-width: 2px; --border-width: 2px;
--outer-border-width: 2px; --outer-border-width: 2px;
@ -1318,7 +1318,7 @@ mark, .matchtext {
} }
.core-scanning-qr { .core-scanning-qr {
.ion-page, .modal-wrapper { .ion-page, ion-modal::part(content) {
background-color: transparent !important; background-color: transparent !important;
--background: transparent; --background: transparent;
} }
@ -1887,14 +1887,14 @@ ion-modal {
--box-shadow: none !important; --box-shadow: none !important;
pointer-events: none; pointer-events: none;
ion-backdrop { &::part(backdrop) {
display: none; display: none;
} }
} }
} }
ion-popover { ion-popover {
.popover-wrapper .popover-content { &::part(content) {
border-radius: var(--modal-radius); border-radius: var(--modal-radius);
} }
&.md { &.md {
@ -1903,7 +1903,7 @@ ion-popover {
// Never show backdrop on popovers on Android // Never show backdrop on popovers on Android
// @todo Apply box shadow on ios and make it transparent too. The main problem is the box arrow. // @todo Apply box shadow on ios and make it transparent too. The main problem is the box arrow.
ion-backdrop { &::part(backdrop) {
background: transparent; background: transparent;
} }
} }

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

@ -146,7 +146,7 @@ html {
--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-buttons-color: var(--core-header-toolbar-color);
ion-header { ion-header, ion-header.header-md {
box-shadow: var(--core-header-shadow, none); box-shadow: var(--core-header-shadow, none);
transition: box-shadow 0.5s; transition: box-shadow 0.5s;