@dnb/eufemia 9.15.2 → 9.16.3

package/style/dnb-ui-components.css

@@ -955,6 +955,79 @@
       .dnb-autocomplete__options {
         display: block; } }
 
+/*
+* Breadcrumb component
+*
+*/
+.dnb-breadcrumb {
+  margin: 0;
+  padding: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column; }
+  .dnb-breadcrumb__bar.dnb-section {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    padding: 1rem 0 0.5rem 0;
+    padding: var(--spacing-small) 0 var(--spacing-x-small) 0; }
+  .dnb-breadcrumb__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center; }
+  .dnb-breadcrumb__item__span {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    line-height: normal;
+    padding: 0.5rem 0;
+    padding: var(--spacing-x-small) 0;
+    color: #333;
+    color: var(--color-black-80); }
+    .dnb-breadcrumb__item__span__icon {
+      margin-left: 0.5rem;
+      margin-left: calc(1rem / 2);
+      margin-left: calc(var(--button-icon-size)/2);
+      margin-left: calc(var(--button-icon-size) / 2);
+      margin-right: 0.5rem; }
+  .dnb-breadcrumb__collapse {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    padding: 0.5rem 2rem;
+    padding: var(--spacing-x-small) var(--spacing-large); }
+  .dnb-breadcrumb__collapse .dnb-breadcrumb__list {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start; }
+
 /*
 * Button component
 *
@@ -1106,6 +1179,8 @@
     padding-left: 1rem; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
     padding-right: 1rem; }
+  .dnb-button--tertiary .dnb-button__text {
+    margin: 0; }
   .dnb-button--has-text {
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {
@@ -2468,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) {
@@ -2645,10 +2720,8 @@ html[data-visual-test] .dnb-global-status__shell {
 .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; }
@@ -3154,6 +3227,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;
@@ -3190,7 +3266,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;
@@ -3407,7 +3483,7 @@ html[data-visual-test] .dnb-global-status__shell {
   --modal-overlay-transparent: rgba(0, 0, 0, 0);
   --modal-overlay-bg: rgba(0, 0, 0, 0.32); }
 
-[data-dnb-modal-active] {
+html[data-dnb-modal-active] {
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
@@ -3742,7 +3818,7 @@ html[data-visual-test] .dnb-global-status__shell {
         padding-bottom: calc(-2rem * 8);
         padding-bottom: calc(var(--modal-spacing-minus)*8);
         padding-bottom: calc(var(--modal-spacing-minus) * 8); } }
-  .dnb-modal__content--spacing .dnb-modal__header__bar.dnb-section {
+  .dnb-modal__header__bar.dnb-section {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -3752,7 +3828,8 @@ html[data-visual-test] .dnb-global-status__shell {
             flex-direction: row;
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
-            justify-content: space-between;
+            justify-content: space-between; }
+  .dnb-modal__content--spacing .dnb-modal__header__bar.dnb-section {
     margin-top: 3.5rem;
     margin-top: calc(2rem * 1.75);
     margin-top: calc(var(--modal-spacing)*1.75);
@@ -3862,6 +3939,10 @@ html[data-visual-test] .dnb-global-status__shell {
     z-index: 3004;
     z-index: calc(3000 + 4);
     z-index: calc(var(--modal-z-index) + 4); }
+  .dnb-modal__close-button {
+    z-index: 3001;
+    z-index: calc(3000 + 1);
+    z-index: calc(var(--modal-z-index) + 1); }
 
 [data-visual-test].hide-page-content #___gatsby {
   opacity: 0; }
@@ -4575,16 +4656,22 @@ html[data-visual-test] .dnb-global-status__shell {
     background-color: currentColor;
     -webkit-box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor;
             box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor; }
-  .dnb-section > .dnb-section::after {
+  .dnb-section .dnb-section::after {
     z-index: -14; }
-  .dnb-section > .dnb-section > .dnb-section::after {
+  .dnb-section .dnb-section .dnb-section::after {
     z-index: -13; }
-  .dnb-section > .dnb-section > .dnb-section > .dnb-section::after {
+  .dnb-section .dnb-section .dnb-section .dnb-section::after {
     z-index: -12; }
-  .dnb-section > .dnb-section > .dnb-section > .dnb-section > .dnb-section::after {
+  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
     z-index: -11; }
-  .dnb-section > .dnb-section > .dnb-section > .dnb-section > .dnb-section > .dnb-section::after {
+  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
     z-index: -10; }
+  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+    z-index: -9; }
+  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+    z-index: -8; }
+  .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
+    z-index: -7; }
   .dnb-section--spacing-small {
     padding-top: 1rem;
     padding-top: var(--spacing-small);
@@ -6141,6 +6228,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; }
@@ -6151,6 +6242,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; }
@@ -6607,7 +6701,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;
@@ -6618,6 +6712,7 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
   font-size: var(--font-size-basis);
   line-height: 1.5rem;
   line-height: var(--line-height-basis);
+  text-decoration: none;
   white-space: nowrap; }
   .dnb-tabs__button__title .dnb-icon,
   .dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon {
@@ -6637,6 +6732,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: '';