@navikt/ds-css 7.17.2 → 7.17.4

package/dist/darkside/version/{7.17.2 → 7.17.4}/index.css

@@ -410,7 +410,7 @@
   }
 
   :root, :host, .light {
-    --ax-bg-overlay: rgba(2, 20, 49, .49);
+    --ax-bg-overlay: rgba(2, 20, 49, .8);
     --ax-bg-input: rgba(255, 255, 255, .85);
     --ax-bg-default: #fff;
     --ax-text-logo: #c30000;
@@ -422,7 +422,7 @@
   }
 
   .dark, .dark-theme {
-    --ax-bg-overlay: rgba(2, 20, 49, .49);
+    --ax-bg-overlay: rgba(2, 20, 49, .8);
     --ax-bg-sunken: #07090d;
     --ax-bg-input: rgba(7, 9, 13, .5);
     --ax-bg-default: #0e151f;
@@ -646,7 +646,7 @@
   }
 
   :root, :host {
-    --ax-version: "7.17.2";
+    --ax-version: "7.17.4";
     --ax-font-weight-regular: 400;
     --ax-font-weight-bold: 600;
     --ax-font-size-small: .875rem;
@@ -1934,7 +1934,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);
@@ -2071,7 +2071,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);
@@ -2168,7 +2168,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;
@@ -2185,7 +2185,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 {
@@ -3679,7 +3679,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);
@@ -3716,7 +3716,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;
@@ -3729,7 +3729,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;
   }
@@ -3899,7 +3899,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;
@@ -3926,7 +3926,7 @@
   }
 
   .aksel-alert--small {
-    padding: var(--ax-space-12) var(--ax-space-16);
+    padding: var(--ax-space-16);
     gap: var(--ax-space-8);
   }
 
@@ -4055,7 +4055,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);
@@ -4067,7 +4067,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 {
@@ -4126,7 +4126,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 {
@@ -4364,12 +4364,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 {
@@ -4873,7 +4869,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%;
@@ -4886,7 +4882,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 {
@@ -5305,7 +5301,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;
   }
 
@@ -5340,10 +5336,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);
@@ -5366,12 +5370,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;
   }
@@ -5382,7 +5386,7 @@
   }
 
   .aksel-modal__header {
-    padding: var(--ax-space-16) var(--ax-space-20);
+    padding: var(--ax-space-20);
   }
 
   .aksel-modal__header-icon svg {
@@ -5413,7 +5417,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;
   }
@@ -5432,7 +5436,7 @@
   @keyframes akselModalFadeIn {
     0% {
       opacity: .0001;
-      transform: translate3d(0, calc(2% + 4px), 0);
+      transform: translate3d(0, 4px, 0);
     }
 
     50% {
@@ -5445,11 +5449,15 @@
   }
 
   @keyframes akselModalBackdropFadeIn {
-    from {
-      opacity: 0;
+    0% {
+      opacity: .0001;
     }
 
-    to {
+    50% {
+      opacity: 1;
+    }
+
+    100% {
       opacity: 1;
     }
   }