@dnb/eufemia 9.16.0 → 9.17.0

package/style/dnb-ui-components.css

@@ -972,11 +972,10 @@
   .dnb-breadcrumb__bar.dnb-section {
     display: -webkit-box;
     display: -ms-flexbox;
-    display: flex;
-    padding: 1rem 1rem;
-    padding: var(--spacing-small) var(--spacing-small);
-    padding-bottom: 0.5rem;
-    padding-bottom: var(--spacing-x-small); }
+    display: flex; }
+  .dnb-breadcrumb--spacing .dnb-breadcrumb__bar.dnb-section {
+    padding: 0.5rem 0;
+    padding: var(--spacing-x-small) 0; }
   .dnb-breadcrumb__list {
     list-style: none;
     margin: 0;
@@ -1002,9 +1001,7 @@
             align-items: center;
     line-height: normal;
     padding: 0.5rem 0;
-    padding: var(--spacing-x-small) 0;
-    color: #333;
-    color: var(--color-black-80); }
+    padding: var(--spacing-x-small) 0; }
     .dnb-breadcrumb__item__span__icon {
       margin-left: 0.5rem;
       margin-left: calc(1rem / 2);
@@ -1019,8 +1016,8 @@
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    padding: 0.5rem 2rem;
-    padding: var(--spacing-x-small) var(--spacing-large); }
+    padding: 0 2rem;
+    padding: 0 var(--spacing-large); }
   .dnb-breadcrumb__collapse .dnb-breadcrumb__list {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
@@ -1029,6 +1026,9 @@
     -webkit-box-align: start;
         -ms-flex-align: start;
             align-items: flex-start; }
+  .dnb-breadcrumb--spacing .dnb-breadcrumb__collapse {
+    padding: 0.5rem 2rem;
+    padding: var(--spacing-x-small) var(--spacing-large); }
 
 /*
 * Button component
@@ -2543,7 +2543,7 @@ legend.dnb-form-label {
   .dnb-form-status[hidden] {
     display: none; }
   .dnb-form-status--no-animation,
-  .dnb-form-status html[data-visual-test] {
+  html[data-visual-test] .dnb-form-status {
     -webkit-transition-duration: 1ms !important;
             transition-duration: 1ms !important; }
   @media screen and (-ms-high-contrast: none) {
@@ -2674,7 +2674,7 @@ html[data-visual-test] .dnb-global-status__shell {
 .dnb-global-status__title {
   position: relative;
   cursor: text;
-  min-height: 3.5rem; }
+  min-height: 4.5rem; }
   .dnb-global-status__title.dnb-p {
     display: -webkit-box;
     display: -ms-flexbox;
@@ -2684,10 +2684,9 @@ html[data-visual-test] .dnb-global-status__shell {
             align-items: center;
     padding-top: 1rem;
     padding-bottom: 1rem;
-    padding-left: 3rem;
     padding-right: 5rem;
-    font-size: 1.25rem;
-    font-size: var(--font-size-medium); }
+    padding-left: 2.5rem;
+    margin-bottom: 0.5rem; }
   .dnb-spacing .dnb-global-status__title.dnb-p,
   .dnb-spacing .dnb-global-status__title.dnb-p:not([class*='dnb-space']) {
     margin: 0; }
@@ -2703,7 +2702,7 @@ html[data-visual-test] .dnb-global-status__shell {
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    padding: 2rem 0 2.5rem; }
+    padding: 0.5rem 0 2.5rem 2.5rem; }
     .dnb-global-status__message__content .dnb-p,
     .dnb-spacing .dnb-global-status__message__content .dnb-p,
     .dnb-spacing .dnb-global-status__message__content .dnb-p:not([class*='dnb-space']) {
@@ -2715,15 +2714,13 @@ html[data-visual-test] .dnb-global-status__shell {
   position: absolute;
   top: 0;
   left: 0;
-  margin-top: 0.75rem; }
+  margin-top: 1.5rem; }
 
 .dnb-global-status__close-button, .dnb-global-status__close-button.dnb-button--tertiary {
   position: absolute;
   z-index: 1;
-  top: -0.25rem;
   right: 1rem;
-  left: auto;
-  margin-top: 0.75rem; }
+  left: auto; }
 
 .dnb-modal__content__inner .dnb-global-status__close-button {
   right: 0; }
@@ -2736,15 +2733,14 @@ html[data-visual-test] .dnb-global-status__shell {
     margin: 0;
     margin-top: 0.5rem;
     padding-left: 1rem; }
-    .dnb-global-status__content .dnb-ul > li,
-    .dnb-spacing .dnb-global-status__content .dnb-ul > li,
-    .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*='dnb-space']) > li {
-      margin: 0;
-      padding-left: 0; }
-      .dnb-global-status__content .dnb-ul > li .dnb-anchor:last-of-type,
-      .dnb-spacing .dnb-global-status__content .dnb-ul > li .dnb-anchor:last-of-type,
-      .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*='dnb-space']) > li .dnb-anchor:last-of-type {
-        margin-left: 0.5rem; }
+    .dnb-global-status__content .dnb-ul .dnb-anchor:last-of-type,
+    .dnb-spacing .dnb-global-status__content .dnb-ul .dnb-anchor:last-of-type,
+    .dnb-spacing .dnb-global-status__content .dnb-ul:not([class*='dnb-space']) .dnb-anchor:last-of-type {
+      margin-left: 0.5rem; }
+  .dnb-global-status__content .dnb-hr,
+  .dnb-spacing .dnb-global-status__content .dnb-hr,
+  .dnb-spacing .dnb-global-status__content .dnb-hr:not([class*='dnb-space']) {
+    margin: 0; }
 
 @media screen and (-ms-high-contrast: none) {
   .dnb-global-status__icon > .dnb-icon {
@@ -3229,6 +3225,9 @@ html[data-visual-test] .dnb-global-status__shell {
   .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input,
   .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder {
     padding-right: 3rem; }
+  html[data-visual-test] .dnb-input__input {
+    caret-color: #fff;
+    caret-color: var(--color-white); }
   @media screen and (max-width: 40em) {
     .dnb-responsive-component .dnb-input {
       display: -webkit-box;
@@ -3265,7 +3264,7 @@ html[data-visual-test] .dnb-global-status__shell {
 * InputMasked component
 *
 */
-.dnb-input-masked--guide input {
+.dnb-input-masked--guide {
   font-family: 'DNBMono', 'Menlo', 'Consolas', 'Roboto Mono',
     'Ubuntu Monospace', 'Noto Mono', 'Oxygen Mono', 'Liberation Mono',
     monospace;
@@ -3437,35 +3436,31 @@ html[data-visual-test] .dnb-global-status__shell {
 
 @-webkit-keyframes show-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); }
+    opacity: 0; }
   to {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); } }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); } }
 
 @keyframes show-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); }
+    opacity: 0; }
   to {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); } }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); } }
 
 @-webkit-keyframes hide-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); }
   to {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); } }
+    opacity: 0; } }
 
 @keyframes hide-modal-overlay {
   from {
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); }
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); }
   to {
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent); } }
+    opacity: 0; } }
 
 :root {
   --modal-z-index: 3000;
@@ -3479,10 +3474,10 @@ html[data-visual-test] .dnb-global-status__shell {
   --modal-drawer-min-width: 25rem;
   --modal-drawer-max-width: 40rem;
   --modal-drawer-header-min-height: 6rem;
-  --modal-overlay-transparent: rgba(0, 0, 0, 0);
-  --modal-overlay-bg: rgba(0, 0, 0, 0.32); }
+  --modal-overlay-bg: black;
+  --modal-overlay-opacity: 0.32; }
 
-[data-dnb-modal-active] {
+html[data-dnb-modal-active] {
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
@@ -3879,37 +3874,23 @@ html[data-visual-test] .dnb-global-status__shell {
     top: 0;
     width: 100%;
     height: 100%;
-    will-change: background-color;
-    background-color: rgba(0, 0, 0, 0);
-    background-color: var(--modal-overlay-transparent);
-    -webkit-box-shadow: 0 100vh 0 0 rgba(0, 0, 0, 0.32);
-            box-shadow: 0 100vh 0 0 rgba(0, 0, 0, 0.32);
-    -webkit-box-shadow: 0 100vh 0 0 var(--modal-overlay-bg);
-            box-shadow: 0 100vh 0 0 var(--modal-overlay-bg); }
-    .dnb-modal__overlay--modal {
-      -webkit-animation: show-modal-overlay 300ms ease-out forwards 0ms;
-              animation: show-modal-overlay 300ms ease-out forwards 0ms;
-      -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms;
-              animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
-    .dnb-modal__overlay--drawer {
-      -webkit-animation: show-modal-overlay 300ms ease-out forwards 100ms;
-              animation: show-modal-overlay 300ms ease-out forwards 100ms;
-      -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 100ms;
-              animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 100ms; }
-    .dnb-modal__overlay--hide {
+    background-color: black;
+    background-color: var(--modal-overlay-bg); }
+  .dnb-modal-root__inner .dnb-modal__overlay {
+    -webkit-animation: hide-modal-overlay 300ms ease-in-out forwards;
+            animation: hide-modal-overlay 300ms ease-in-out forwards;
+    -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards;
+            animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
+  .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
+    -webkit-animation: show-modal-overlay 300ms ease-out forwards 0ms;
+            animation: show-modal-overlay 300ms ease-out forwards 0ms;
+    -webkit-animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms;
+            animation: show-modal-overlay var(--modal-animation-duration) ease-out forwards 0ms; }
+    .dnb-modal-root__inner:last-of-type .dnb-modal__overlay--hide {
       -webkit-animation: hide-modal-overlay 300ms ease-in-out forwards;
               animation: hide-modal-overlay 300ms ease-in-out forwards;
       -webkit-animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards;
               animation: hide-modal-overlay var(--modal-animation-duration) ease-in-out forwards; }
-  .dnb-modal-root__inner .dnb-modal__overlay {
-    opacity: 0;
-    -webkit-transition: opacity 300ms ease-in-out;
-    transition: opacity 300ms ease-in-out; }
-  .dnb-modal-root__inner:last-of-type .dnb-modal__overlay {
-    opacity: 1; }
-  html[data-visual-test] .dnb-modal-root__inner .dnb-modal__overlay {
-    -webkit-transition: none;
-    transition: none; }
   html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
     -webkit-animation-delay: 0ms !important;
             animation-delay: 0ms !important;
@@ -6178,12 +6159,20 @@ span.dnb-space--no-collapse > span {
     -webkit-box-shadow: 100vw 0 0 0 currentColor;
             box-shadow: 100vw 0 0 0 currentColor; }
 
-.dnb-step-indicator__sidebar {
-  max-width: 20rem;
-  margin-right: 3rem;
-  margin-right: var(--spacing-x-large); }
-  .dnb-step-indicator__sidebar .dnb-step-indicator__item {
-    min-width: 320px; }
+@media screen and (min-width: 50.1em) {
+  .dnb-step-indicator__sidebar {
+    max-width: 20rem;
+    margin-right: 3rem;
+    margin-right: var(--spacing-x-large); }
+    .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+      min-width: 320px; } }
+
+@media screen and (max-width: 50.1em) {
+  .dnb-step-indicator__sidebar--ssr-skeleton {
+    visibility: hidden;
+    overflow: hidden;
+    width: 0;
+    height: 5.5rem; } }
 
 .dnb-step-indicator-v2 .dnb-step-indicator__list {
   display: -webkit-box;
@@ -6227,6 +6216,10 @@ span.dnb-space--no-collapse > span {
     -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
             order: 2; }
+  html[data-visual-test] .dnb-step-indicator-v2 .dnb-step-indicator__trigger__button, html[data-visual-test]
+  .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button {
+    -webkit-transition-duration: 1ms !important;
+            transition-duration: 1ms !important; }
 
 .dnb-step-indicator-v2 .dnb-step-indicator__trigger button.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button {
   margin-top: 0.5rem; }
@@ -6237,6 +6230,9 @@ span.dnb-space--no-collapse > span {
     opacity: 1;
     -webkit-transition: opacity 1400ms ease-in-out;
     transition: opacity 1400ms ease-in-out; }
+    html[data-visual-test] .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button__icon {
+      -webkit-transition-duration: 1ms !important;
+              transition-duration: 1ms !important; }
   .dnb-step-indicator-v2 .dnb-step-indicator__item:not(.dnb-step-indicator__item--visited) .dnb-button:not(.dnb-step-indicator__button__status)
 .dnb-button__icon {
     opacity: 0; }
@@ -6693,7 +6689,7 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
        user-select: none;
   -webkit-user-select: none;
   margin: 0;
-  padding: 0.25rem 0.125rem;
+  padding: 0 0.125rem;
   /* 1/16*4 */
   background-color: transparent;
   border-bottom: 1px solid transparent;
@@ -6724,6 +6720,9 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
     height: 0;
     visibility: hidden;
     overflow: hidden; }
+  .dnb-tabs__button .dnb-dummy,
+  .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy {
+    margin-top: 0.25rem; }
   .dnb-tabs__button::after,
   .dnb-core-style .dnb-tabs .dnb-tabs__button::after {
     content: '';
@@ -7011,6 +7010,9 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
       margin-bottom: 0.5rem; }
       .dnb-responsive-component .dnb-textarea > .dnb-form-label {
         margin-bottom: 0.5rem; } }
+  html[data-visual-test] .dnb-textarea__textarea {
+    caret-color: #fff;
+    caret-color: var(--color-white); }
   .dnb-textarea.dnb-skeleton .dnb-textarea__inner {
     margin: 0;
     border-radius: 0.25rem; }