@navikt/ds-css 7.17.3 → 7.17.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css
 
+## 7.17.4
+
+### Patch Changes
+
+- Modal: Updated animations for reduced movement. ([#3671](https://github.com/navikt/aksel/pull/3671))
+
 ## 7.17.3
 
 ### Patch Changes

package/darkside/modal.darkside.css

@@ -19,7 +19,7 @@
   &[open] {
     display: flex;
     flex-direction: column;
-    animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+    animation: akselModalFadeIn 0.7s cubic-bezier(0.15, 1, 0.3, 1);
   }
 }
 
@@ -100,12 +100,12 @@
    * TODO: Consider adding `::backdrop` to global token definitions.
    * TODO: Check that overlay-color is correct after the new colors is set in stone.
    */
-  background: #0214317d;
-  animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+  background: rgb(2 20 49 /0.8);
+  animation: akselModalBackdropFadeIn 0.7s cubic-bezier(0.15, 1, 0.3, 1);
 }
 
 .aksel-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
-  background: #0214317d;
+  background: rgb(2 20 49 /0.8);
 
   /* From polyfill: */
   position: fixed;
@@ -183,7 +183,7 @@
 @keyframes akselModalFadeIn {
   0% {
     opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
-    transform: translate3d(0, calc(2% + 4px), 0);
+    transform: translate3d(0, 4px, 0);
   }
 
   50% {
@@ -196,11 +196,15 @@
 }
 
 @keyframes akselModalBackdropFadeIn {
-  from {
-    opacity: 0;
+  0% {
+    opacity: 0.0001;
+  }
+
+  50% {
+    opacity: 1;
   }
 
-  to {
+  100% {
     opacity: 1;
   }
 }

package/dist/component/modal.css

@@ -24,7 +24,7 @@
 .navds-modal[open] {
   display: flex;
   flex-direction: column;
-  animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+  animation: akselModalFadeIn 0.7s cubic-bezier(0.15, 1, 0.3, 1);
 }
 
 .navds-modal--polyfilled {
@@ -94,7 +94,7 @@
    * We can add ::backdrop to tokens.css when we remove the polyfill.
    */
   background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
-  animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+  animation: akselModalBackdropFadeIn 0.7s cubic-bezier(0.15, 1, 0.3, 1);
 }
 
 .navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
@@ -190,7 +190,7 @@
 @keyframes akselModalFadeIn {
   0% {
     opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
-    transform: translate3d(0, calc(5% + 4px), 0);
+    transform: translate3d(0, 4px, 0);
   }
 
   50% {
@@ -203,11 +203,15 @@
 }
 
 @keyframes akselModalBackdropFadeIn {
-  from {
-    opacity: 0;
+  0% {
+    opacity: 0.0001;
+  }
+
+  50% {
+    opacity: 1;
   }
 
-  to {
+  100% {
     opacity: 1;
   }
 }

package/dist/component/modal.min.css

@@ -1 +1 @@
-.navds-modal__document-body{overflow:hidden}.navds-modal{--__ac-modal-bg:var(--ac-modal-bg,var(--a-surface-default));background-color:var(--__ac-modal-bg);border:none;border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-xlarge);color:var(--a-text-default);inset:0;margin:auto;max-height:100%;max-width:100%;padding:0;position:fixed;z-index:9999}.navds-modal[open]{animation:akselModalFadeIn .35s cubic-bezier(.15,1,.3,1);display:flex;flex-direction:column}.navds-modal--polyfilled{bottom:unset;height:fit-content;left:0;margin:auto;right:0;top:50%;transform:translateY(-50%);width:fit-content}.navds-modal--polyfilled .navds-modal--polyfilled{overflow:auto}.navds-modal--polyfilled:not([open]){display:none}._dialog_overlay{bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal--small{width:var(--ac-modal-width-small,450px)}.navds-modal--medium{width:var(--ac-modal-width-medium,700px)}@media (min-width:480px){.navds-modal{max-width:calc(100% - 2em)}.navds-modal--autowidth{max-width:min(700px,calc(100% - 2em))}}@media (min-height:480px){.navds-modal{max-height:calc(100% - 2em)}.navds-modal--top{margin-top:2em;max-height:calc(100% - 4em)}}.navds-modal::backdrop{animation:akselModalBackdropFadeIn .35s cubic-bezier(.15,1,.3,1);background:var(--ac-modal-backdrop,#0214317d)}.navds-modal--polyfilled+.backdrop{background:var(--ac-modal-backdrop,#0214317d);bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal__button{float:right;margin-left:var(--a-spacing-4)}.navds-modal__header{padding:var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6)}.navds-modal--small .navds-modal__header{padding:var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4)}.navds-modal__header-icon svg{display:inline;margin-right:var(--a-spacing-1);vertical-align:-.25rem}.navds-modal__label{color:var(--a-text-subtle);font-weight:600}.navds-modal__body{overflow:auto;overscroll-behavior:contain;padding:var(--a-spacing-6);position:relative}.navds-modal:not(.navds-modal--polyfilled) .navds-modal__body{background:linear-gradient(var(--__ac-modal-bg) 30%,#0000) top,linear-gradient(#0000,var(--__ac-modal-bg) 60%) bottom,radial-gradient(farthest-side at 50% 0,#0000004d,#0000) top,radial-gradient(farthest-side at 50% 100%,#0000004d,#0000) bottom;background-attachment:local,local,scroll,scroll;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px}.navds-modal--small .navds-modal__body{padding:var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4)}.navds-modal__header+.navds-modal__body{padding-top:var(--a-spacing-0)}.navds-modal__footer{display:flex;flex-flow:row-reverse wrap;gap:var(--a-spacing-4);padding:var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6)}.navds-modal--small .navds-modal__footer{padding:var(--a-spacing-4)}.navds-modal__footer :nth-of-type(2){margin-left:auto}.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal{animation:none;max-height:100vh;max-width:100vw;min-width:fit-content}@keyframes akselModalFadeIn{0%{opacity:.0001;transform:translate3d(0,calc(5% + 4px),0)}50%{opacity:1}to{transform:none}}@keyframes akselModalBackdropFadeIn{0%{opacity:0}to{opacity:1}}@media (forced-colors:active){.navds-modal{outline:2px solid #0000}}
+.navds-modal__document-body{overflow:hidden}.navds-modal{--__ac-modal-bg:var(--ac-modal-bg,var(--a-surface-default));background-color:var(--__ac-modal-bg);border:none;border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-xlarge);color:var(--a-text-default);inset:0;margin:auto;max-height:100%;max-width:100%;padding:0;position:fixed;z-index:9999}.navds-modal[open]{animation:akselModalFadeIn .7s cubic-bezier(.15,1,.3,1);display:flex;flex-direction:column}.navds-modal--polyfilled{bottom:unset;height:fit-content;left:0;margin:auto;right:0;top:50%;transform:translateY(-50%);width:fit-content}.navds-modal--polyfilled .navds-modal--polyfilled{overflow:auto}.navds-modal--polyfilled:not([open]){display:none}._dialog_overlay{bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal--small{width:var(--ac-modal-width-small,450px)}.navds-modal--medium{width:var(--ac-modal-width-medium,700px)}@media (min-width:480px){.navds-modal{max-width:calc(100% - 2em)}.navds-modal--autowidth{max-width:min(700px,calc(100% - 2em))}}@media (min-height:480px){.navds-modal{max-height:calc(100% - 2em)}.navds-modal--top{margin-top:2em;max-height:calc(100% - 4em)}}.navds-modal::backdrop{animation:akselModalBackdropFadeIn .7s cubic-bezier(.15,1,.3,1);background:var(--ac-modal-backdrop,#0214317d)}.navds-modal--polyfilled+.backdrop{background:var(--ac-modal-backdrop,#0214317d);bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal__button{float:right;margin-left:var(--a-spacing-4)}.navds-modal__header{padding:var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6)}.navds-modal--small .navds-modal__header{padding:var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4)}.navds-modal__header-icon svg{display:inline;margin-right:var(--a-spacing-1);vertical-align:-.25rem}.navds-modal__label{color:var(--a-text-subtle);font-weight:600}.navds-modal__body{overflow:auto;overscroll-behavior:contain;padding:var(--a-spacing-6);position:relative}.navds-modal:not(.navds-modal--polyfilled) .navds-modal__body{background:linear-gradient(var(--__ac-modal-bg) 30%,#0000) top,linear-gradient(#0000,var(--__ac-modal-bg) 60%) bottom,radial-gradient(farthest-side at 50% 0,#0000004d,#0000) top,radial-gradient(farthest-side at 50% 100%,#0000004d,#0000) bottom;background-attachment:local,local,scroll,scroll;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px}.navds-modal--small .navds-modal__body{padding:var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4)}.navds-modal__header+.navds-modal__body{padding-top:var(--a-spacing-0)}.navds-modal__footer{display:flex;flex-flow:row-reverse wrap;gap:var(--a-spacing-4);padding:var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6)}.navds-modal--small .navds-modal__footer{padding:var(--a-spacing-4)}.navds-modal__footer :nth-of-type(2){margin-left:auto}.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal{animation:none;max-height:100vh;max-width:100vw;min-width:fit-content}@keyframes akselModalFadeIn{0%{opacity:.0001;transform:translate3d(0,4px,0)}50%{opacity:1}to{transform:none}}@keyframes akselModalBackdropFadeIn{0%{opacity:.0001}50%{opacity:1}to{opacity:1}}@media (forced-colors:active){.navds-modal{outline:2px solid #0000}}

package/dist/components.css

@@ -5044,7 +5044,7 @@ button.navds-internalheader__title:active,
 .navds-modal[open] {
   display: flex;
   flex-direction: column;
-  animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+  animation: akselModalFadeIn 0.7s cubic-bezier(0.15, 1, 0.3, 1);
 }
 
 .navds-modal--polyfilled {
@@ -5114,7 +5114,7 @@ button.navds-internalheader__title:active,
    * We can add ::backdrop to tokens.css when we remove the polyfill.
    */
   background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
-  animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+  animation: akselModalBackdropFadeIn 0.7s cubic-bezier(0.15, 1, 0.3, 1);
 }
 
 .navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
@@ -5210,7 +5210,7 @@ button.navds-internalheader__title:active,
 @keyframes akselModalFadeIn {
   0% {
     opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
-    transform: translate3d(0, calc(5% + 4px), 0);
+    transform: translate3d(0, 4px, 0);
   }
 
   50% {
@@ -5223,11 +5223,15 @@ button.navds-internalheader__title:active,
 }
 
 @keyframes akselModalBackdropFadeIn {
-  from {
-    opacity: 0;
+  0% {
+    opacity: 0.0001;
   }
 
-  to {
+  50% {
+    opacity: 1;
+  }
+
+  100% {
     opacity: 1;
   }
 }