@navikt/ds-css 7.17.2 → 7.17.4

package/dist/darkside/components.css

@@ -771,7 +771,7 @@
     gap: var(--ax-space-16);
     text-align: center;
     width: 100%;
-    padding: var(--ax-space-16) var(--ax-space-20);
+    padding: var(--ax-space-20);
     border: 1px dashed var(--ax-border-neutral);
     border-radius: var(--ax-border-radius-xlarge);
     background-color: var(--__axc-dropzone-background);
@@ -908,7 +908,7 @@
     border: 1px solid var(--ax-border-neutral-subtleA);
     outline-offset: -1px;
     border-radius: var(--ax-border-radius-xlarge);
-    padding: var(--ax-space-12) var(--ax-space-16);
+    padding: var(--ax-space-20);
     gap: var(--ax-space-12);
     align-items: flex-start;
     transition: outline-color .25s cubic-bezier(0, .3, .15, 1);
@@ -1005,7 +1005,7 @@
 
   .aksel-error-summary {
     background-color: var(--ax-bg-default);
-    padding: var(--ax-space-16) var(--ax-space-20);
+    padding: var(--ax-space-20);
     border: 4px solid var(--ax-border-danger);
     border-radius: var(--ax-border-radius-xlarge);
     outline-offset: 3px;
@@ -1022,7 +1022,7 @@
   }
 
   .aksel-error-summary--small {
-    padding: var(--ax-space-12) var(--ax-space-16);
+    padding: var(--ax-space-16);
   }
 
   .aksel-error-summary--small .aksel-error-summary__heading {
@@ -2516,7 +2516,7 @@
 
   .aksel-form-summary__value .aksel-form-summary__answers {
     margin-top: var(--ax-space-8);
-    padding: var(--ax-space-16) var(--ax-space-20);
+    padding: var(--ax-space-16);
     background: var(--ax-bg-info-moderateA);
     border-radius: var(--ax-border-radius-large);
     border: 1px solid var(--ax-border-info-subtleA);
@@ -2553,7 +2553,7 @@
     margin-top: -2px;
     padding-block: 0;
     transition-property: margin-top, opacity, visibility, padding-block-start, grid-template-rows;
-    transition-duration: 1s;
+    transition-duration: .3s;
     transition-timing-function: cubic-bezier(.2, 0, 0, 1);
     display: grid;
     overflow: hidden;
@@ -2566,7 +2566,7 @@
   .aksel-form-progress__collapsible[data-state="open"] {
     margin-top: var(--ax-space-4);
     visibility: visible;
-    padding-block: var(--ax-space-16);
+    padding-block: var(--ax-space-20);
     opacity: 1;
     grid-template-rows: 1fr;
   }
@@ -2736,7 +2736,7 @@
 
   .aksel-alert {
     border-radius: var(--ax-border-radius-xlarge);
-    padding: var(--ax-space-16) var(--ax-space-20);
+    padding: var(--ax-space-20);
     gap: var(--ax-space-12);
     border: 1px solid;
     align-items: center;
@@ -2763,7 +2763,7 @@
   }
 
   .aksel-alert--small {
-    padding: var(--ax-space-12) var(--ax-space-16);
+    padding: var(--ax-space-16);
     gap: var(--ax-space-8);
   }
 
@@ -2892,7 +2892,7 @@
   }
 
   .aksel-chat__bubble {
-    padding: var(--ax-space-16) var(--ax-space-20);
+    padding: var(--ax-space-20);
     background-color: var(--ax-bg-raised);
     gap: var(--ax-space-8);
     border-radius: var(--ax-border-radius-xlarge);
@@ -2904,7 +2904,7 @@
   }
 
   .aksel-chat--small .aksel-chat__bubble {
-    padding: var(--ax-space-12) var(--ax-space-16);
+    padding: var(--ax-space-16);
   }
 
   .aksel-chat--info .aksel-chat__bubble, .aksel-chat--info .aksel-chat__avatar {
@@ -2963,7 +2963,7 @@
   }
 
   .aksel-date {
-    padding: var(--ax-space-16) var(--ax-space-12);
+    padding: var(--ax-space-16);
   }
 
   .aksel-date .rdp-day_range_middle.rdp-day_disabled {
@@ -3201,12 +3201,8 @@
   }
 
   @media (min-width: 480px) {
-    .aksel-date {
-      padding: var(--ax-space-20) var(--ax-space-16);
-    }
-
-    .aksel-date__modal-body {
-      padding: var(--ax-space-24);
+    .aksel-date, .aksel-date__modal-body {
+      padding: var(--ax-space-20);
     }
 
     .aksel-date__caption {
@@ -3710,7 +3706,7 @@
   }
 
   .aksel-guide-panel__content-inner {
-    padding: var(--ax-space-12) var(--ax-space-16);
+    padding: var(--ax-space-16);
     border-radius: var(--ax-border-radius-xlarge);
     background-color: var(--ax-bg-raised);
     height: 100%;
@@ -3723,7 +3719,7 @@
 
   @media (min-width: 480px) {
     .aksel-guide-panel__content-inner {
-      padding: var(--ax-space-16) var(--ax-space-20);
+      padding: var(--ax-space-20);
     }
 
     .aksel-guide-panel[data-responsive="true"] .aksel-guide-panel__content-inner {
@@ -4142,7 +4138,7 @@
 
   .aksel-modal[open] {
     flex-direction: column;
-    animation: .35s cubic-bezier(.15, 1, .3, 1) akselModalFadeIn;
+    animation: .7s cubic-bezier(.15, 1, .3, 1) akselModalFadeIn;
     display: flex;
   }
 
@@ -4177,10 +4173,18 @@
     width: 450px;
   }
 
-  .aksel-modal--small .aksel-modal__header, .aksel-modal--small .aksel-modal__body, .aksel-modal--small .aksel-modal__footer {
+  .aksel-modal--small .aksel-modal__header {
+    padding: var(--ax-space-16);
+  }
+
+  .aksel-modal--small .aksel-modal__body {
     padding: var(--ax-space-12) var(--ax-space-16);
   }
 
+  .aksel-modal--small .aksel-modal__footer {
+    padding: var(--ax-space-16);
+  }
+
   @media (min-width: 480px) {
     .aksel-modal {
       max-width: calc(100% - 2em);
@@ -4203,12 +4207,12 @@
   }
 
   .aksel-modal::backdrop {
-    background: rgba(2, 20, 49, .49);
-    animation: .35s cubic-bezier(.15, 1, .3, 1) akselModalBackdropFadeIn;
+    background: rgba(2, 20, 49, .8);
+    animation: .7s cubic-bezier(.15, 1, .3, 1) akselModalBackdropFadeIn;
   }
 
   .aksel-modal--polyfilled + .backdrop {
-    background: rgba(2, 20, 49, .49);
+    background: rgba(2, 20, 49, .8);
     position: fixed;
     inset: 0;
   }
@@ -4219,7 +4223,7 @@
   }
 
   .aksel-modal__header {
-    padding: var(--ax-space-16) var(--ax-space-20);
+    padding: var(--ax-space-20);
   }
 
   .aksel-modal__header-icon svg {
@@ -4250,7 +4254,7 @@
 
   .aksel-modal__footer {
     gap: var(--ax-space-16);
-    padding: var(--ax-space-16) var(--ax-space-20);
+    padding: var(--ax-space-20);
     flex-flow: row-reverse wrap;
     display: flex;
   }
@@ -4269,7 +4273,7 @@
   @keyframes akselModalFadeIn {
     0% {
       opacity: .0001;
-      transform: translate3d(0, calc(2% + 4px), 0);
+      transform: translate3d(0, 4px, 0);
     }
 
     50% {
@@ -4282,11 +4286,15 @@
   }
 
   @keyframes akselModalBackdropFadeIn {
-    from {
-      opacity: 0;
+    0% {
+      opacity: .0001;
     }
 
-    to {
+    50% {
+      opacity: 1;
+    }
+
+    100% {
       opacity: 1;
     }
   }