@navikt/ds-css 7.35.3 → 7.37.0

package/dist/darkside/components.css

@@ -3238,6 +3238,215 @@
     }
   }
 
+  .aksel-dialog__popup {
+    --__axc-dialog-transform: ;
+    --__axc-dialog-p-b: var(--ax-space-16);
+    --__axc-dialog-p-i: var(--ax-space-20);
+    background-color: var(--ax-bg-raised);
+    border-radius: var(--ax-radius-12);
+    color: var(--ax-text-neutral);
+    box-shadow: var(--ax-shadow-dialog);
+    outline: 1px solid var(--ax-border-neutral-subtleA);
+    z-index: 2000;
+    flex-direction: column;
+    transition: transform .2s cubic-bezier(.25, .46, .45, .94), opacity .2s cubic-bezier(.25, .46, .45, .94), translate .2s cubic-bezier(.25, .46, .45, .94);
+    display: flex;
+    position: fixed;
+    overflow: hidden;
+  }
+
+  .light:not(:has(.dark)) .aksel-dialog__backdrop ~ .aksel-dialog__popup {
+    outline: none;
+  }
+
+  .light:not(:has(.dark)) .aksel-dialog__backdrop ~ .aksel-dialog__popup:focus {
+    outline: none;
+  }
+
+  .aksel-dialog__popup[data-size="small"] {
+    --__axc-dialog-p-b: var(--ax-space-12);
+    --__axc-dialog-p-i: var(--ax-space-16);
+  }
+
+  .aksel-dialog__popup[data-entering-style], .aksel-dialog__popup[data-exiting-style] {
+    opacity: .001;
+    transform: var(--__axc-dialog-transform);
+  }
+
+  .aksel-dialog__popup[data-exiting-style] {
+    transition-duration: .1s;
+  }
+
+  .aksel-dialog__popup[data-exiting-style]:after {
+    transition-timing-function: cubic-bezier(.55, .09, .68, .53);
+  }
+
+  .aksel-dialog__popup[data-nested-dialog-open="true"] {
+    box-shadow: none;
+  }
+
+  .aksel-dialog__popup[data-nested-dialog-open="true"]:after {
+    opacity: .9;
+  }
+
+  .aksel-dialog__popup:after {
+    content: "";
+    border-radius: inherit;
+    background-color: var(--ax-bg-overlay);
+    opacity: 0;
+    z-index: 1;
+    pointer-events: none;
+    transition: opacity cubic-bezier(.25, .46, .45, .94);
+    position: absolute;
+    inset: 0;
+  }
+
+  .aksel-dialog__popup[data-position="center"] {
+    --__axc-dialog-center-margin: 3rem;
+    --__axc-dialog-transform: scale(.98);
+    max-width: calc(100dvw - 3rem);
+    max-height: calc(90dvh - var(--__axc-dialog-center-margin));
+    margin-inline: auto;
+    margin-block: max(var(--__axc-dialog-center-margin), 10dvh) auto;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .aksel-dialog__popup[data-position="center"][data-nested="true"][data-entering-style], .aksel-dialog__popup[data-position="center"][data-nested="true"][data-exiting-style] {
+    opacity: 1;
+    transition-duration: 0s;
+    transform: scale(1);
+  }
+
+  .aksel-dialog__popup[data-position="center"][data-nested-dialog-open="true"] {
+    transform: translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)));
+  }
+
+  @media (max-width: 768px) or (max-height: 479px) {
+    .aksel-dialog__popup[data-position="center"] {
+      --__axc-dialog-transform: translateY(35%);
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+      max-width: 95dvw;
+      height: auto;
+      max-height: calc(100dvh - max(16px, 10dvh));
+      margin-block: 0;
+      margin-inline: auto;
+      inset: auto 0 0;
+    }
+  }
+
+  .aksel-dialog__popup[data-position="right"], .aksel-dialog__popup[data-position="left"] {
+    max-width: calc(100vw - max(16px, 10vw));
+    top: 0;
+    bottom: 0;
+  }
+
+  :is(.aksel-dialog__popup[data-position="right"], .aksel-dialog__popup[data-position="left"])[data-nested-dialog-open="true"]:after {
+    opacity: 1;
+    transition-duration: .1s;
+  }
+
+  .aksel-dialog__popup[data-position="right"] {
+    --__axc-dialog-transform: translateX(35%);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    right: 0;
+  }
+
+  .aksel-dialog__popup[data-position="left"] {
+    --__axc-dialog-transform: translateX(-35%);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    left: 0;
+  }
+
+  .aksel-dialog__popup[data-position="bottom"] {
+    --__axc-dialog-transform: translateY(35%);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    max-width: 95dvw;
+    height: auto;
+    max-height: calc(100dvh - max(16px, 10dvh));
+    margin-inline: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .aksel-dialog__popup[data-position="bottom"][data-nested-dialog-open="true"] {
+    transform: translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)));
+  }
+
+  .aksel-dialog__popup[data-position="fullscreen"] {
+    --__axc-dialog-transform: scale(.98);
+    border-radius: 0;
+    width: 100%;
+    max-width: 100dvw;
+    height: 100%;
+    max-height: 100dvh;
+    inset: 0;
+  }
+
+  .aksel-dialog__backdrop {
+    background-color: var(--ax-bg-overlay);
+    z-index: 1000;
+    min-height: 100dvh;
+    transition: opacity .2s cubic-bezier(.25, .46, .45, .94);
+    position: fixed;
+    inset: 0;
+  }
+
+  @supports (-webkit-touch-callout: none) {
+    .aksel-dialog__backdrop {
+      position: absolute;
+    }
+  }
+
+  .aksel-dialog__backdrop[data-entering-style], .aksel-dialog__backdrop[data-exiting-style] {
+    opacity: .001;
+  }
+
+  .aksel-dialog__header {
+    padding-block: var(--__axc-dialog-p-b);
+    padding-inline: var(--__axc-dialog-p-i);
+  }
+
+  .aksel-dialog__title {
+    margin-block-end: var(--ax-space-4);
+  }
+
+  .aksel-dialog__close-button {
+    float: right;
+    align-self: start;
+  }
+
+  .aksel-dialog__body {
+    padding-block: var(--__axc-dialog-p-b);
+    padding-inline: var(--__axc-dialog-p-i);
+    overflow: auto;
+  }
+
+  .aksel-dialog__header ~ .aksel-dialog__body {
+    padding-block-start: 0;
+  }
+
+  .aksel-dialog__footer {
+    justify-content: flex-end;
+    gap: var(--ax-space-8);
+    padding-block: var(--__axc-dialog-p-b);
+    padding-inline: var(--__axc-dialog-p-i);
+    flex-flow: wrap;
+    display: flex;
+  }
+
+  @media (forced-colors: active) {
+    .aksel-dialog__popup {
+      outline: 2px solid var(--ax-border-neutral-strong) !important;
+    }
+  }
+
   .aksel-dropdown__menu {
     padding: var(--ax-space-8);
     color: var(--ax-text-neutral);