@dnb/eufemia 9.23.0 → 9.25.0

package/es/components/drawer/style/dnb-drawer.css

@@ -293,6 +293,11 @@
   html[data-visual-test] .dnb-tooltip--hide {
     -webkit-animation: hide-tooltip 1ms ease-out 1s forwards;
             animation: hide-tooltip 1ms ease-out 1s forwards; }
+  .dnb-tooltip__portal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0; }
   .dnb-tooltip__content {
     min-width: 2rem;
     min-height: 1.5rem;
@@ -810,7 +815,8 @@
     -moz-appearance: none;
     -webkit-appearance: none; }
   .dnb-button[disabled] {
-    cursor: not-allowed; }
+    cursor: not-allowed;
+    outline: none; }
   .dnb-form-row--vertical .dnb-form-row__content > .dnb-button {
     -ms-flex-item-align: start;
         align-self: flex-start; }
@@ -1108,7 +1114,6 @@ button.dnb-button::-moz-focus-inner {
   --drawer-width: 40vw;
   --drawer-min-width: 25rem;
   --drawer-max-width: 40rem;
-  --drawer-header-min-height: 6rem;
   --drawer-spacing: 2rem;
   --drawer-spacing-minus: -2rem; }
 
@@ -1297,6 +1302,12 @@ button.dnb-button::-moz-focus-inner {
     -webkit-box-pack: start;
         -ms-flex-pack: start;
             justify-content: flex-start; }
+  @media screen and (max-width: 50em) {
+    .dnb-drawer__title {
+      font-size: 1.625rem !important;
+      font-size: var(--font-size-large) !important;
+      line-height: 2rem !important;
+      line-height: var(--line-height-medium) !important; } }
   .dnb-drawer__title ~ .dnb-drawer__content {
     padding-top: 1.5rem;
     padding-top: calc(2rem / 1.333333);
@@ -1314,11 +1325,9 @@ button.dnb-button::-moz-focus-inner {
   .dnb-drawer .dnb-drawer__header::after {
     top: -500%;
     height: 600%; }
-  .dnb-drawer--spacing .dnb-drawer__header {
-    min-height: 6rem;
-    min-height: var(--drawer-header-min-height); }
-    .dnb-drawer--spacing .dnb-drawer__header .dnb-tabs {
-      margin-top: 3.5rem; }
+  .dnb-drawer--spacing .dnb-drawer__header .dnb-tabs {
+    margin-top: 2rem;
+    margin-top: var(--drawer-spacing); }
   .dnb-drawer__body {
     padding-bottom: 4rem;
     padding-bottom: calc(2rem * 2);
@@ -1349,14 +1358,8 @@ button.dnb-button::-moz-focus-inner {
     position: sticky;
     top: 0;
     z-index: 99;
-    margin: 3.5rem 0;
-    margin: calc(2rem * 1.75) 0;
-    margin: calc(var(--drawer-spacing)*1.75) 0;
-    margin: calc(var(--drawer-spacing) * 1.75) 0; }
-    @media screen and (max-width: 50em) {
-      .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
-        margin: 2rem 0;
-        margin: var(--drawer-spacing) 0; } }
+    margin: 2rem 0;
+    margin: var(--drawer-spacing) 0; }
   .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section.dnb-drawer__navigation--sticky {
     z-index: 2999; }
   .dnb-drawer .dnb-drawer__navigation--sticky::before {
@@ -1474,30 +1477,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%;
@@ -1513,10 +1522,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;
@@ -1537,27 +1604,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;
@@ -1565,37 +1611,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;
@@ -1611,29 +1643,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;
@@ -1645,21 +1673,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; }
@@ -1806,14 +1885,27 @@ html[data-dnb-modal-active] {
               justify-content: flex-start; }
     .dnb-modal__content--fullscreen .dnb-modal__content__content {
       height: auto; }
+    .dnb-modal__content--left, .dnb-modal__content--top {
+      -webkit-box-align: start;
+          -ms-flex-align: start;
+              align-items: flex-start;
+      -webkit-box-pack: start;
+          -ms-flex-pack: start;
+              justify-content: flex-start; }
     .dnb-modal__content--right {
+      -webkit-box-align: start;
+          -ms-flex-align: start;
+              align-items: flex-start;
       -webkit-box-pack: end;
           -ms-flex-pack: end;
               justify-content: flex-end; }
     .dnb-modal__content--bottom {
       -webkit-box-align: end;
           -ms-flex-align: end;
-              align-items: flex-end; }
+              align-items: flex-end;
+      -webkit-box-pack: start;
+          -ms-flex-pack: start;
+              justify-content: flex-start; }
   .dnb-modal__overlay {
     position: fixed;
     z-index: 3000;
@@ -1875,7 +1967,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;
@@ -2030,7 +2123,6 @@ html[data-dnb-modal-active] {
   --drawer-width: 40vw;
   --drawer-min-width: 25rem;
   --drawer-max-width: 40rem;
-  --drawer-header-min-height: 6rem;
   --drawer-spacing: 2rem;
   --drawer-spacing-minus: -2rem; }
 
@@ -2219,6 +2311,12 @@ html[data-dnb-modal-active] {
     -webkit-box-pack: start;
         -ms-flex-pack: start;
             justify-content: flex-start; }
+  @media screen and (max-width: 50em) {
+    .dnb-drawer__title {
+      font-size: 1.625rem !important;
+      font-size: var(--font-size-large) !important;
+      line-height: 2rem !important;
+      line-height: var(--line-height-medium) !important; } }
   .dnb-drawer__title ~ .dnb-drawer__content {
     padding-top: 1.5rem;
     padding-top: calc(2rem / 1.333333);
@@ -2236,11 +2334,9 @@ html[data-dnb-modal-active] {
   .dnb-drawer .dnb-drawer__header::after {
     top: -500%;
     height: 600%; }
-  .dnb-drawer--spacing .dnb-drawer__header {
-    min-height: 6rem;
-    min-height: var(--drawer-header-min-height); }
-    .dnb-drawer--spacing .dnb-drawer__header .dnb-tabs {
-      margin-top: 3.5rem; }
+  .dnb-drawer--spacing .dnb-drawer__header .dnb-tabs {
+    margin-top: 2rem;
+    margin-top: var(--drawer-spacing); }
   .dnb-drawer__body {
     padding-bottom: 4rem;
     padding-bottom: calc(2rem * 2);
@@ -2271,14 +2367,8 @@ html[data-dnb-modal-active] {
     position: sticky;
     top: 0;
     z-index: 99;
-    margin: 3.5rem 0;
-    margin: calc(2rem * 1.75) 0;
-    margin: calc(var(--drawer-spacing)*1.75) 0;
-    margin: calc(var(--drawer-spacing) * 1.75) 0; }
-    @media screen and (max-width: 50em) {
-      .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
-        margin: 2rem 0;
-        margin: var(--drawer-spacing) 0; } }
+    margin: 2rem 0;
+    margin: var(--drawer-spacing) 0; }
   .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section.dnb-drawer__navigation--sticky {
     z-index: 2999; }
   .dnb-drawer .dnb-drawer__navigation--sticky::before {