From 2e9c8665750fa1ac08d66eef0f018182975742fc Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 26 Sep 2022 18:25:28 +0200 Subject: [PATCH] fix(Modal): Safari Desktop fullscreen video issue --- .../dialog/__tests__/__snapshots__/Dialog.test.tsx.snap | 4 ++-- packages/dnb-eufemia/src/components/dialog/style/_dialog.scss | 2 +- .../drawer/__tests__/__snapshots__/Drawer.test.tsx.snap | 4 ++-- .../modal/__tests__/__snapshots__/Modal.test.tsx.snap | 4 ++-- packages/dnb-eufemia/src/components/modal/style/_modal.scss | 3 +-- 5 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap index da1366eeb65..97e0c71dd8d 100644 --- a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap @@ -2272,7 +2272,7 @@ button.dnb-button::-moz-focus-inner { .dnb-dialog__icon__primary.dnb-dialog__icon--info ::after { background-color: var(--color-pistachio); } html:not([data-visual-test]) .dnb-dialog { - animation: show-modal var(--modal-animation-duration) ease-out forwards; } + animation: show-modal var(--modal-animation-duration) ease-out; } html:not([data-visual-test]) .dnb-dialog--hide { animation: hide-modal 220ms ease-in-out forwards; } .dnb-dialog--no-animation { @@ -2367,7 +2367,7 @@ html[data-dnb-modal-active] { .dnb-modal-root__inner .dnb-modal__overlay { animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; } .dnb-modal-root__inner:last-of-type .dnb-modal__overlay { - animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards; } + animation: show-modal-overlay var(--modal-animation-duration) ease-out; } .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide { animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; } html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation { diff --git a/packages/dnb-eufemia/src/components/dialog/style/_dialog.scss b/packages/dnb-eufemia/src/components/dialog/style/_dialog.scss index e17eca9a1a4..32c3758bd8e 100644 --- a/packages/dnb-eufemia/src/components/dialog/style/_dialog.scss +++ b/packages/dnb-eufemia/src/components/dialog/style/_dialog.scss @@ -190,7 +190,7 @@ // Animation in html:not([data-visual-test]) & { - animation: show-modal var(--modal-animation-duration) ease-out forwards; + animation: show-modal var(--modal-animation-duration) ease-out; } // Animation out html:not([data-visual-test]) &--hide { diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap index 16586997e4a..ecd1c7ec548 100644 --- a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap @@ -2287,7 +2287,7 @@ button.dnb-button::-moz-focus-inner { .dnb-dialog__icon__primary.dnb-dialog__icon--info ::after { background-color: var(--color-pistachio); } html:not([data-visual-test]) .dnb-dialog { - animation: show-modal var(--modal-animation-duration) ease-out forwards; } + animation: show-modal var(--modal-animation-duration) ease-out; } html:not([data-visual-test]) .dnb-dialog--hide { animation: hide-modal 220ms ease-in-out forwards; } .dnb-dialog--no-animation { @@ -2382,7 +2382,7 @@ html[data-dnb-modal-active] { .dnb-modal-root__inner .dnb-modal__overlay { animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; } .dnb-modal-root__inner:last-of-type .dnb-modal__overlay { - animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards; } + animation: show-modal-overlay var(--modal-animation-duration) ease-out; } .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide { animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; } html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation { diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap index e9be771ddfb..366d3b2f66e 100644 --- a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap @@ -2259,7 +2259,7 @@ button.dnb-button::-moz-focus-inner { .dnb-dialog__icon__primary.dnb-dialog__icon--info ::after { background-color: var(--color-pistachio); } html:not([data-visual-test]) .dnb-dialog { - animation: show-modal var(--modal-animation-duration) ease-out forwards; } + animation: show-modal var(--modal-animation-duration) ease-out; } html:not([data-visual-test]) .dnb-dialog--hide { animation: hide-modal 220ms ease-in-out forwards; } .dnb-dialog--no-animation { @@ -2354,7 +2354,7 @@ html[data-dnb-modal-active] { .dnb-modal-root__inner .dnb-modal__overlay { animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; } .dnb-modal-root__inner:last-of-type .dnb-modal__overlay { - animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards; } + animation: show-modal-overlay var(--modal-animation-duration) ease-out; } .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide { animation: hide-modal-overlay var(--modal-animation-duration) ease-out forwards; } html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation { diff --git a/packages/dnb-eufemia/src/components/modal/style/_modal.scss b/packages/dnb-eufemia/src/components/modal/style/_modal.scss index d9974af357e..e6457f3dd5b 100644 --- a/packages/dnb-eufemia/src/components/modal/style/_modal.scss +++ b/packages/dnb-eufemia/src/components/modal/style/_modal.scss @@ -85,8 +85,7 @@ html[data-dnb-modal-active] { } &-root__inner:last-of-type &__overlay { - animation: show-modal-overlay var(--modal-animation-duration) ease-out - forwards; + animation: show-modal-overlay var(--modal-animation-duration) ease-out; &--hide { animation: hide-modal-overlay var(--modal-animation-duration)