diff --git a/packages/ember-promise-modals/src/components/epm-modal-container.css b/packages/ember-promise-modals/src/components/epm-modal-container.css index 517ebe49..b2e5af84 100644 --- a/packages/ember-promise-modals/src/components/epm-modal-container.css +++ b/packages/ember-promise-modals/src/components/epm-modal-container.css @@ -1,18 +1,20 @@ -:root { - /* The named -duration and -delay variables will be lowered to near zero when using the setupPromiseModals test helper */ - --epm-animation-backdrop-in-duration: 0.3s; - --epm-animation-backdrop-out-duration: 0.18s; - --epm-animation-modal-in-duration: 0.3s; - --epm-animation-modal-out-duration: 0.18s; - --epm-animation-backdrop-in-delay: 0s; - --epm-animation-backdrop-out-delay: 0s; - --epm-animation-modal-in-delay: 0s; - --epm-animation-modal-out-delay: 0s; - --epm-animation-backdrop-in: var(--epm-animation-backdrop-in-duration) ease var(--epm-animation-backdrop-in-delay) forwards epm-backdrop-in; - --epm-animation-backdrop-out: var(--epm-animation-backdrop-out-duration) ease var(--epm-animation-backdrop-out-delay) forwards epm-backdrop-out; - --epm-animation-modal-in: var(--epm-animation-modal-in-duration) ease-out var(--epm-animation-modal-in-delay) forwards epm-modal-in; - --epm-animation-modal-out: var(--epm-animation-modal-out-duration) ease-out var(--epm-animation-modal-out-delay) forwards epm-modal-out; - --epm-backdrop-background: #2d3748CD; +@layer ember-promise-modals { + :root { + /* The named -duration and -delay variables will be lowered to near zero when using the setupPromiseModals test helper */ + --epm-animation-backdrop-in-duration: 0.3s; + --epm-animation-backdrop-out-duration: 0.18s; + --epm-animation-modal-in-duration: 0.3s; + --epm-animation-modal-out-duration: 0.18s; + --epm-animation-backdrop-in-delay: 0s; + --epm-animation-backdrop-out-delay: 0s; + --epm-animation-modal-in-delay: 0s; + --epm-animation-modal-out-delay: 0s; + --epm-animation-backdrop-in: var(--epm-animation-backdrop-in-duration) ease var(--epm-animation-backdrop-in-delay) forwards epm-backdrop-in; + --epm-animation-backdrop-out: var(--epm-animation-backdrop-out-duration) ease var(--epm-animation-backdrop-out-delay) forwards epm-backdrop-out; + --epm-animation-modal-in: var(--epm-animation-modal-in-duration) ease-out var(--epm-animation-modal-in-delay) forwards epm-modal-in; + --epm-animation-modal-out: var(--epm-animation-modal-out-duration) ease-out var(--epm-animation-modal-out-delay) forwards epm-modal-out; + --epm-backdrop-background: #2d3748CD; + } } @media (prefers-reduced-motion: reduce) {