@navikt/ds-css 7.36.0 → 7.37.0

package/dist/darkside/version/7.37.0/component/dialog.css

@@ -0,0 +1,210 @@
+@layer aksel.components {
+  .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;
+    }
+  }
+}

package/dist/darkside/version/7.37.0/component/dialog.min.css

@@ -0,0 +1 @@
+@layer aksel.components{.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}}}

package/dist/darkside/version/{7.36.0 → 7.37.0}/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);