@dnb/eufemia 9.23.1 → 9.24.0

package/cjs/style/dnb-ui-components.css

@@ -2284,30 +2284,36 @@ button.dnb-button::-moz-focus-inner {
 :root {
   --dialog-min-width: 320px;
   --dialog-avg-width: 60vw;
-  --dialog-max-width: 60rem;
+  --dialog-max-width: 49rem;
+  --dialog-confirm-max-width: 40rem;
   --dialog-spacing: 2rem;
   --dialog-spacing-minus: -2rem; }
 
 .dnb-dialog {
   position: relative;
-  width: 60vw;
-  width: var(--dialog-avg-width);
-  min-width: 320px;
-  min-width: var(--dialog-min-width);
-  max-width: 60rem;
-  max-width: var(--dialog-max-width);
   max-height: 100vh;
+  border-radius: 0.5rem;
   -webkit-box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
           box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
   -webkit-box-shadow: var(--shadow-default);
           box-shadow: var(--shadow-default);
-  border-radius: 0.5rem;
   -moz-user-select: text;
    -ms-user-select: text;
        user-select: text;
   -webkit-user-select: text;
   border: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+  .dnb-dialog--information {
+    min-width: 320px;
+    min-width: var(--dialog-min-width);
+    width: 60vw;
+    width: var(--dialog-avg-width);
+    max-width: 49rem;
+    max-width: var(--dialog-max-width); }
+  .dnb-dialog--confirmation {
+    max-width: 40rem;
+    max-width: var(--dialog-confirm-max-width);
+    margin: 0 1rem; }
   @media screen and (max-width: 40em) {
     .dnb-dialog--auto-fullscreen {
       width: 100%;
@@ -2323,10 +2329,68 @@ button.dnb-button::-moz-focus-inner {
     border-radius: 0;
     -webkit-box-shadow: none;
             box-shadow: none; }
-  @supports (-webkit-touch-callout: none) {
-    @media (max-height: 40em) and (orientation: landscape) {
-      .dnb-dialog:not(.dnb-dialog--fullscreen) {
-        max-height: 80vh; } } }
+  .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content {
+    padding-bottom: 4rem;
+    padding-bottom: calc(2rem * 2);
+    padding-bottom: calc(var(--dialog-spacing)*2);
+    padding-bottom: calc(var(--dialog-spacing) * 2); }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content {
+        padding-bottom: 16rem;
+        padding-bottom: calc(2rem * 8);
+        padding-bottom: calc(var(--dialog-spacing)*8);
+        padding-bottom: calc(var(--dialog-spacing) * 8); } }
+  .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
+    padding-left: 3.5rem;
+    padding-left: calc(2rem * 1.75);
+    padding-left: calc(var(--dialog-spacing)*1.75);
+    padding-left: calc(var(--dialog-spacing) * 1.75);
+    padding-right: 3.5rem;
+    padding-right: calc(2rem * 1.75);
+    padding-right: calc(var(--dialog-spacing)*1.75);
+    padding-right: calc(var(--dialog-spacing) * 1.75); }
+    @media screen and (max-width: 60em) {
+      .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
+        padding-left: 2rem;
+        padding-left: calc(2rem);
+        padding-left: calc(var(--dialog-spacing));
+        padding-right: 2rem;
+        padding-right: calc(2rem);
+        padding-right: calc(var(--dialog-spacing)); } }
+    @media screen and (max-width: 40em) {
+      .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner {
+        padding-left: 1rem;
+        padding-left: calc(2rem / 2);
+        padding-left: calc(var(--dialog-spacing)/2);
+        padding-left: calc(var(--dialog-spacing) / 2);
+        padding-right: 1rem;
+        padding-right: calc(2rem / 2);
+        padding-right: calc(var(--dialog-spacing)/2);
+        padding-right: calc(var(--dialog-spacing) / 2); } }
+  .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section {
+    margin-top: 2rem;
+    margin-top: calc(2rem);
+    margin-top: calc(var(--dialog-spacing));
+    margin-bottom: 1rem;
+    margin-bottom: calc(2rem / 2);
+    margin-bottom: calc(var(--dialog-spacing)/2);
+    margin-bottom: calc(var(--dialog-spacing) / 2); }
+    @media screen and (max-width: 50em) {
+      .dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section {
+        margin-top: 1rem;
+        margin-top: calc(2rem / 2);
+        margin-top: calc(var(--dialog-spacing)/2);
+        margin-top: calc(var(--dialog-spacing) / 2); } }
+  .dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner {
+    padding: 2rem;
+    padding: calc(2rem);
+    padding: calc(var(--dialog-spacing)); }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner {
+        padding-bottom: 16rem;
+        padding-bottom: calc(2rem * 8);
+        padding-bottom: calc(var(--dialog-spacing)*8);
+        padding-bottom: calc(var(--dialog-spacing) * 8); } }
   .dnb-dialog__inner {
     position: relative;
     display: -webkit-box;
@@ -2347,27 +2411,6 @@ button.dnb-button::-moz-focus-inner {
       top: 0;
       width: 100vw;
       height: 100%; }
-  .dnb-dialog--spacing .dnb-dialog__inner {
-    padding: 0 2rem 0;
-    padding: 0 var(--dialog-spacing) 0; }
-    @media screen and (min-width: 72em) {
-      .dnb-dialog--spacing .dnb-dialog__inner {
-        padding: 0 3.5rem 0;
-        padding: 0 calc(2rem * 1.75) 0;
-        padding: 0 calc(var(--dialog-spacing)*1.75) 0;
-        padding: 0 calc(var(--dialog-spacing) * 1.75) 0; } }
-    @media screen and (max-width: 50em) {
-      .dnb-dialog--spacing .dnb-dialog__inner {
-        padding: 0 1.5rem 0;
-        padding: 0 calc(2rem / 1.333333) 0;
-        padding: 0 calc(var(--dialog-spacing)/1.33333) 0;
-        padding: 0 calc(var(--dialog-spacing) / 1.333333) 0; } }
-    @media screen and (max-width: 40em) {
-      .dnb-dialog--spacing .dnb-dialog__inner {
-        padding: 0 1rem 0;
-        padding: 0 calc(2rem / 2) 0;
-        padding: 0 calc(var(--dialog-spacing)/2) 0;
-        padding: 0 calc(var(--dialog-spacing) / 2) 0; } }
   .dnb-dialog__align--centered .dnb-dialog__inner {
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -2375,37 +2418,23 @@ button.dnb-button::-moz-focus-inner {
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center; }
-  html:not([data-visual-test]) .dnb-dialog {
-    -webkit-animation: show-modal 300ms ease-out forwards;
-            animation: show-modal 300ms ease-out forwards;
-    -webkit-animation: show-modal var(--modal-animation-duration) ease-out forwards;
-            animation: show-modal var(--modal-animation-duration) ease-out forwards; }
-  html:not([data-visual-test]) .dnb-dialog--hide {
-    -webkit-animation: hide-modal 220ms ease-in-out forwards;
-            animation: hide-modal 220ms ease-in-out forwards; }
-  .dnb-dialog--no-animation {
-    -webkit-animation-duration: 0ms !important;
-            animation-duration: 0ms !important; }
-  @media screen and (max-width: 40em) {
-    .dnb-dialog--no-animation-on-mobile {
-      -webkit-animation-delay: 0ms !important;
-              animation-delay: 0ms !important;
-      -webkit-animation-duration: 0ms !important;
-              animation-duration: 0ms !important; } }
+  .dnb-dialog__align--centered .dnb-dialog__title,
+  .dnb-dialog__align--centered.dnb-dialog--confirmation .dnb-dialog__content {
+    text-align: center; }
   .dnb-dialog__content {
     position: relative;
     z-index: 1; }
-  .dnb-dialog--spacing .dnb-dialog__content {
-    padding-bottom: 4rem;
-    padding-bottom: calc(2rem * 2);
-    padding-bottom: calc(var(--dialog-spacing)*2);
-    padding-bottom: calc(var(--dialog-spacing) * 2); }
-    @supports (-webkit-touch-callout: none) {
-      .dnb-dialog--spacing .dnb-dialog__content {
-        padding-bottom: 16rem;
-        padding-bottom: calc(2rem * 8);
-        padding-bottom: calc(var(--dialog-spacing)*8);
-        padding-bottom: calc(var(--dialog-spacing) * 8); } }
+  .dnb-dialog__actions {
+    padding-top: 1.5rem;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    width: 100%; }
+    .dnb-dialog__actions > :not(:last-child) {
+      margin-right: 1rem; }
   .dnb-dialog__align--center .dnb-dialog__content {
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -2421,29 +2450,25 @@ button.dnb-button::-moz-focus-inner {
     padding-top: calc(2rem / 2);
     padding-top: calc(var(--dialog-spacing)/2);
     padding-top: calc(var(--dialog-spacing) / 2); }
-  .dnb-dialog .dnb-dialog__header [class*='dnb-h--'],
-  .dnb-dialog .dnb-dialog__header .dnb-modal__title {
-    padding: 0; }
-    .dnb-dialog .dnb-dialog__header [class*='dnb-h--']:not([class*='__top']),
-    .dnb-dialog .dnb-dialog__header .dnb-modal__title:not([class*='__top']) {
-      margin-top: 0; }
-    .dnb-dialog .dnb-dialog__header [class*='dnb-h--']:not([class*='__bottom']),
-    .dnb-dialog .dnb-dialog__header .dnb-modal__title:not([class*='__bottom']) {
-      margin-bottom: 0; }
-  .dnb-dialog .dnb-dialog__header::after {
-    top: -500%;
-    height: 600%; }
-  .dnb-dialog--spacing .dnb-dialog__header .dnb-tabs {
-    margin-top: 3.5rem; }
-  .dnb-dialog__body {
-    padding-bottom: 4rem;
-    padding-bottom: calc(2rem * 2);
-    padding-bottom: calc(var(--dialog-spacing)*2);
-    padding-bottom: calc(var(--dialog-spacing) * 2);
-    margin-bottom: -4rem;
-    margin-bottom: calc(-2rem * 2);
-    margin-bottom: calc(var(--dialog-spacing-minus)*2);
-    margin-bottom: calc(var(--dialog-spacing-minus) * 2); }
+  @media screen and (max-width: 50em) {
+    .dnb-dialog__title {
+      font-size: 1.625rem !important;
+      font-size: var(--font-size-large) !important;
+      line-height: 2rem !important;
+      line-height: var(--line-height-medium) !important; } }
+  @media screen and (max-width: 40em) {
+    .dnb-dialog__title {
+      font-size: 1.25rem !important;
+      font-size: var(--font-size-medium) !important;
+      line-height: 1.75rem !important;
+      line-height: calc(2rem - 0.25rem) !important;
+      line-height: calc(var(--line-height-medium) - 0.25rem) !important; } }
+  .dnb-dialog--information .dnb-dialog__title {
+    margin-bottom: 1rem !important;
+    margin-bottom: var(--spacing-small) !important; }
+  .dnb-dialog--confirmation .dnb-dialog__title {
+    margin-bottom: 0.5rem !important;
+    margin-bottom: var(--spacing-x-small) !important; }
   .dnb-dialog__navigation.dnb-section {
     display: -webkit-box;
     display: -ms-flexbox;
@@ -2455,21 +2480,72 @@ button.dnb-button::-moz-focus-inner {
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between; }
-  .dnb-dialog--spacing .dnb-dialog__navigation.dnb-section {
-    margin-top: 3.5rem;
-    margin-top: calc(2rem * 1.75);
-    margin-top: calc(var(--dialog-spacing)*1.75);
-    margin-top: calc(var(--dialog-spacing) * 1.75);
-    margin-bottom: 1rem;
-    margin-bottom: calc(2rem / 2);
-    margin-bottom: calc(var(--dialog-spacing)/2);
-    margin-bottom: calc(var(--dialog-spacing) / 2); }
-    @media screen and (max-width: 50em) {
-      .dnb-dialog--spacing .dnb-dialog__navigation.dnb-section {
-        margin-top: 1rem;
-        margin-top: calc(2rem / 2);
-        margin-top: calc(var(--dialog-spacing)/2);
-        margin-top: calc(var(--dialog-spacing) / 2); } }
+  .dnb-dialog__icon__primary.dnb-icon--border::after {
+    left: -50%;
+    right: -50%;
+    top: -50%;
+    bottom: -50%;
+    border: none;
+    background-color: currentColor;
+    opacity: 0.1; }
+  .dnb-dialog__icon__primary.dnb-dialog__icon--warning {
+    color: #dc2a2a;
+    color: var(--color-fire-red); }
+    .dnb-dialog__icon__primary.dnb-dialog__icon--warning ::after {
+      background-color: #fdeeee;
+      background-color: var(--color-fire-red-8); }
+  .dnb-dialog__icon__primary.dnb-dialog__icon--info {
+    color: #14555a;
+    color: var(--color-emerald-green); }
+    .dnb-dialog__icon__primary.dnb-dialog__icon--info ::after {
+      background-color: #f2f4ec;
+      background-color: var(--color-pistachio); }
+  html:not([data-visual-test]) .dnb-dialog {
+    -webkit-animation: show-modal 300ms ease-out forwards;
+            animation: show-modal 300ms ease-out forwards;
+    -webkit-animation: show-modal var(--modal-animation-duration) ease-out forwards;
+            animation: show-modal var(--modal-animation-duration) ease-out forwards; }
+  html:not([data-visual-test]) .dnb-dialog--hide {
+    -webkit-animation: hide-modal 220ms ease-in-out forwards;
+            animation: hide-modal 220ms ease-in-out forwards; }
+  .dnb-dialog--no-animation {
+    -webkit-animation-duration: 0ms !important;
+            animation-duration: 0ms !important; }
+  @media screen and (max-width: 40em) {
+    .dnb-dialog--no-animation-on-mobile {
+      -webkit-animation-delay: 0ms !important;
+              animation-delay: 0ms !important;
+      -webkit-animation-duration: 0ms !important;
+              animation-duration: 0ms !important; } }
+  .dnb-dialog__body {
+    padding-bottom: 4rem;
+    padding-bottom: calc(2rem * 2);
+    padding-bottom: calc(var(--dialog-spacing)*2);
+    padding-bottom: calc(var(--dialog-spacing) * 2);
+    margin-bottom: -4rem;
+    margin-bottom: calc(-2rem * 2);
+    margin-bottom: calc(var(--dialog-spacing-minus)*2);
+    margin-bottom: calc(var(--dialog-spacing-minus) * 2); }
+  .dnb-dialog__header::after {
+    top: -500%;
+    height: 600%; }
+  .dnb-dialog__header [class*='dnb-h--'],
+  .dnb-dialog__header .dnb-modal__title {
+    padding: 0; }
+    .dnb-dialog__header [class*='dnb-h--']:not([class*='__top']),
+    .dnb-dialog__header .dnb-modal__title:not([class*='__top']) {
+      margin-top: 0; }
+    .dnb-dialog__header [class*='dnb-h--']:not([class*='__bottom']),
+    .dnb-dialog__header .dnb-modal__title:not([class*='__bottom']) {
+      margin-bottom: 0; }
+  .dnb-dialog--spacing .dnb-dialog__header .dnb-tabs {
+    margin-top: 3.5rem; }
+  .dnb-dialog__icon ~ .dnb-dialog__header {
+    margin-top: 1.5rem; }
+  @supports (-webkit-touch-callout: none) {
+    @media (max-height: 40em) and (orientation: landscape) {
+      .dnb-dialog:not(.dnb-dialog--fullscreen) {
+        max-height: 80vh; } } }
 
 [data-visual-test].hide-page-content #___gatsby {
   opacity: 0; }
@@ -4306,7 +4382,8 @@ html[data-dnb-modal-active] {
             flex-direction: row;
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
-            justify-content: space-between; }
+            justify-content: space-between;
+    width: 100%; }
     @media screen and (-ms-high-contrast: none) {
       .dnb-modal__header__bar.dnb-section {
         -webkit-box-align: center;