@dnb/eufemia 10.19.0 → 10.20.0

package/es/style/themes/theme-eiendom/eiendom-theme-components.css

@@ -698,12 +698,21 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   max-width: 14ch;
 }
 
+/*
+ * Utilities
+ */
 .dnb-forms-field-postal-code-and-city__fields {
   display: flex;
   flex-flow: row;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+@media screen and (max-width: 25em) {
+  .dnb-forms-field-postal-code-and-city__fields {
+    row-gap: var(--spacing-x-small);
+    flex-flow: column;
+  }
+}
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;
 }
@@ -721,15 +730,22 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   line-height: 2.5rem;
 }
 
+/*
+ * Utilities
+ */
 :root {
   --forms-field-width--small: 5rem;
   --forms-field-width--medium: 11rem;
   --forms-field-width--large: 21rem;
 }
 
-/*
- * Utilities
- */
+@media screen and (max-width: 15em) {
+  .dnb-forms-field-string .dnb-input__shell,
+  .dnb-forms-field-number .dnb-input__shell {
+    width: 90%;
+  }
+}
+
 fieldset.dnb-forms-field-block {
   padding: 0;
   border: none;
@@ -747,6 +763,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-left: 0;
 }
 
+.dnb-forms-field-block {
+  width: 100%;
+}
 .dnb-forms-field-block__grid {
   display: grid;
 }
@@ -770,7 +789,7 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-field-block--width-stretch {
   flex-grow: 1;
 }
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 25em) {
   .dnb-forms-field-block--width-small {
     width: var(--forms-field-width--small);
   }
@@ -794,13 +813,17 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-field-block__status {
   grid-area: status;
 }
+.dnb-forms-field-block__status .dnb-form-status__shell {
+  margin-top: 0.5rem;
+}
 .dnb-forms-field-block__contents {
   grid-area: contents;
+  width: 100%;
 }
 .dnb-forms-field-block__contents--width-stretch {
   width: 100%;
 }
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 25em) {
   .dnb-forms-field-block__contents--width-small {
     width: var(--forms-field-width--small);
   }
@@ -861,8 +884,14 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   -moz-column-gap: var(--spacing-medium);
        column-gap: var(--spacing-medium);
 }
+.dnb-forms-steps-layout--drawer {
+  flex-direction: column;
+  justify-content: stretch;
+  align-items: stretch;
+}
 .dnb-forms-steps-layout__sidebar {
   flex: 0;
+  margin-bottom: 2rem;
 }
 .dnb-forms-steps-layout__contents {
   flex: 1 0 25rem;
@@ -1032,9 +1061,6 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   width: 100%;
   margin-top: 1rem;
 }
-.dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner {
-  display: none;
-}
 .dnb-accordion-group--single-container {
   transition: min-height 1s var(--accordion-easing);
 }
@@ -2116,6 +2142,9 @@ button.dnb-button::-moz-focus-inner {
   border: none;
 }
 
+/*
+ * Utilities
+ */
 .dnb-card__heading {
   font-size: var(--font-size-basis);
   font-weight: var(--font-weight-medium);
@@ -2123,6 +2152,32 @@ button.dnb-button::-moz-focus-inner {
 .dnb-card + .dnb-card__heading {
   margin-top: var(--spacing-small);
 }
+.dnb-card.dnb-section {
+  background-color: var(--background-color);
+}
+@media screen and (max-width: 40em) {
+  .dnb-card.dnb-section::before {
+    left: -100vw;
+    right: -100vw;
+  }
+}
+@media screen and (max-width: 40em) {
+  .dnb-card + .dnb-card:not([class*=space__top]) {
+    background: linear-gradient(to left, var(--background-color), var(--background-color)) no-repeat 0 var(--outline-width);
+  }
+  .dnb-card + .dnb-card:not([class*=space__top])::before {
+    top: var(--outline-width);
+  }
+}
+@media screen and (max-width: 40em) {
+  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card {
+    margin-top: 0;
+  }
+  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card::before {
+    top: var(--outline-width);
+    z-index: 0;
+  }
+}
 
 /*
 * Checkbox component
@@ -3842,6 +3897,9 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
 .dnb-flex-container--wrap {
   flex-wrap: wrap;
 }
+.dnb-flex-container--row-gap-off {
+  --gap: 0;
+}
 .dnb-flex-container--row-gap-small {
   --gap: var(--spacing-small);
 }
@@ -4032,21 +4090,6 @@ legend.dnb-form-label {
   --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
-  transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
-}
-.dnb-form-status--hidden {
-  will-change: height, opacity, margin, padding;
-  width: 0;
-  height: 0;
-  opacity: 0;
-}
-.dnb-form-status--is-animating {
-  overflow: hidden;
-  width: auto;
-}
-.dnb-form-status--disappear, .dnb-form-status--hidden {
-  margin: 0 !important;
-  padding: 0 !important;
 }
 .dnb-form-status__shell {
   display: flex;
@@ -4098,9 +4141,6 @@ button .dnb-form-status__text {
 .dnb-form-status[hidden] {
   display: none;
 }
-.dnb-form-status--no-animation, html[data-visual-test] .dnb-form-status {
-  transition-duration: 1ms !important;
-}
 
 /*
  * GlobalError component
@@ -4168,30 +4208,20 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-.dnb-global-status {
-  --global-status-easing: var(--easing-default);
-}
 .dnb-global-status.dnb-section {
   display: block;
 }
 .dnb-global-status__shell {
   width: 100%;
-  opacity: 1;
-  will-change: height;
-  transition: height 800ms var(--global-status-easing), opacity 600ms var(--global-status-easing);
-}
-.dnb-global-status--hidden .dnb-global-status__shell {
-  height: 0;
-  opacity: 0;
 }
-.dnb-global-status--no-animation .dnb-global-status__shell, html[data-visual-test] .dnb-global-status__shell {
-  transition-duration: 1ms !important;
+.dnb-global-status__shell.dnb-height-animation--hidden {
+  overflow-y: clip;
 }
-.dnb-global-status, .dnb-global-status--no-animation.dnb-global-status--visible {
-  display: flex;
+.dnb-global-status__shell .dnb-hr, .dnb-spacing .dnb-global-status__shell .dnb-hr:not([class*=dnb-space__bottom]) {
+  margin: 0 0 0 1rem;
 }
-.dnb-global-status--no-animation.dnb-global-status--hidden {
-  display: none;
+.dnb-global-status__shell .dnb-hr::after, .dnb-spacing .dnb-global-status__shell .dnb-hr:not([class*=dnb-space__bottom])::after {
+  top: calc(var(--thickness) * -1);
 }
 .dnb-global-status__title {
   position: relative;
@@ -4355,10 +4385,24 @@ button .dnb-form-status__text {
  * Utilities
  */
 .dnb-height-animation {
-  transition: height var(--duration, 400ms) var(--easing-default);
+  --height-animation: height var(--duration, 400ms) var(--easing-default)
+    var(--delay, 0ms);
+  will-change: height;
+  transition: var(--height-animation);
+}
+html[data-visual-test] .dnb-height-animation {
+  transition: none;
 }
 .dnb-height-animation--animating {
-  overflow: hidden;
+  overflow-y: hidden;
+}
+@supports (overflow-y: clip) {
+  .dnb-height-animation--animating {
+    overflow-y: clip;
+  }
+}
+.dnb-height-animation--hidden {
+  display: none;
 }
 .dnb-height-animation--show-overflow {
   overflow: visible;
@@ -7122,8 +7166,6 @@ span.dnb-space--no-collapse > span {
   overflow: hidden;
   justify-content: space-between;
   border-radius: 0.25rem;
-  will-change: height;
-  transition: height 400ms var(--easing-default);
 }
 .dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__text, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__text {
   text-align: left;
@@ -7134,9 +7176,6 @@ span.dnb-space--no-collapse > span {
 .dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button .dnb-button__alignment, .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button .dnb-button__alignment {
   order: 2;
 }
-html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button, html[data-visual-test] .dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button {
-  transition-duration: 1ms !important;
-}
 .dnb-step-indicator-wrapper .dnb-step-indicator__trigger button.dnb-step-indicator-wrapper .dnb-step-indicator__trigger__button {
   margin-top: 0.5rem;
 }
@@ -7908,7 +7947,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 }
 .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
   color: var(--color-sea-green);
-  transition: transform 500ms var(--accordion-easing);
+  transition: transform 500ms var(--easing-default);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--no-animation .dnb-table__toggle-button .dnb-icon, html[data-visual-test] .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
   transition: none !important;
@@ -8041,17 +8080,20 @@ html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-ta
 .dnb-table__tr__accordion_content__inner {
   overflow: hidden;
   will-change: height;
-  transition: height 400ms var(--accordion-easing);
+  transition: height 400ms var(--easing-default);
   position: relative;
 }
 .dnb-table__tr__accordion_content__inner__spacing {
   padding: 1rem;
   transform: translateY(-10px);
-  transition: transform 500ms var(--accordion-easing);
+  transition: transform 500ms var(--easing-default);
 }
 .dnb-table__tr__accordion_content--parallax .dnb-table__tr__accordion_content__inner__spacing {
   transform: translateY(0);
 }
+html[data-visual-test] .dnb-table__tr__accordion_content--parallax .dnb-table__tr__accordion_content__inner__spacing {
+  transition: none;
+}
 .dnb-table__tr__accordion_content > td.dnb-table__td {
   padding: 0;
 }
@@ -10338,27 +10380,9 @@ html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:n
  * Utilities
  */
 .dnb-card.dnb-section {
-  --background-color: var(--color-white);
   --outline-color: var(--border-color, var(--color-lavender));
   --outline-width: 0.25rem;
-}
-@media screen and (max-width: 40em) {
-  .dnb-card::before {
-    left: -100%;
-    right: -100%;
-  }
-}
-.dnb-card + .dnb-card:not([class*=space__top])::before {
-  top: var(--outline-width);
-}
-@media screen and (max-width: 40em) {
-  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card {
-    margin-top: 0;
-  }
-  .dnb-flex-container.dnb-flex-container--divider-space .dnb-card + .dnb-card::before {
-    top: var(--outline-width);
-    z-index: 0;
-  }
+  --background-color: var(--color-white);
 }
 
 /*
@@ -10666,9 +10690,6 @@ html:not([data-whatintent=touch]) .dnb-dropdown__trigger:hover:not([disabled]) {
 /*
  * Utilities
  */
-.dnb-global-status:not(.dnb-global-status--no-animation).dnb-global-status--fade-in.dnb-global-status.dnb-section::after {
-  box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor, 0 0.0625rem 0 0 var(--color-black-80), 100vw 0.0625rem 0 0 var(--color-black-80);
-}
 .dnb-global-status__icon {
   font-size: 1rem;
 }
@@ -12180,12 +12201,21 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   max-width: 14ch;
 }
 
+/*
+ * Utilities
+ */
 .dnb-forms-field-postal-code-and-city__fields {
   display: flex;
   flex-flow: row;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+@media screen and (max-width: 25em) {
+  .dnb-forms-field-postal-code-and-city__fields {
+    row-gap: var(--spacing-x-small);
+    flex-flow: column;
+  }
+}
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;
 }
@@ -12203,15 +12233,22 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
   line-height: 2.5rem;
 }
 
+/*
+ * Utilities
+ */
 :root {
   --forms-field-width--small: 5rem;
   --forms-field-width--medium: 11rem;
   --forms-field-width--large: 21rem;
 }
 
-/*
- * Utilities
- */
+@media screen and (max-width: 15em) {
+  .dnb-forms-field-string .dnb-input__shell,
+  .dnb-forms-field-number .dnb-input__shell {
+    width: 90%;
+  }
+}
+
 fieldset.dnb-forms-field-block {
   padding: 0;
   border: none;
@@ -12229,6 +12266,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-left: 0;
 }
 
+.dnb-forms-field-block {
+  width: 100%;
+}
 .dnb-forms-field-block__grid {
   display: grid;
 }
@@ -12252,7 +12292,7 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-field-block--width-stretch {
   flex-grow: 1;
 }
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 25em) {
   .dnb-forms-field-block--width-small {
     width: var(--forms-field-width--small);
   }
@@ -12276,13 +12316,17 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-field-block__status {
   grid-area: status;
 }
+.dnb-forms-field-block__status .dnb-form-status__shell {
+  margin-top: 0.5rem;
+}
 .dnb-forms-field-block__contents {
   grid-area: contents;
+  width: 100%;
 }
 .dnb-forms-field-block__contents--width-stretch {
   width: 100%;
 }
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 25em) {
   .dnb-forms-field-block__contents--width-small {
     width: var(--forms-field-width--small);
   }
@@ -12343,8 +12387,14 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   -moz-column-gap: var(--spacing-medium);
        column-gap: var(--spacing-medium);
 }
+.dnb-forms-steps-layout--drawer {
+  flex-direction: column;
+  justify-content: stretch;
+  align-items: stretch;
+}
 .dnb-forms-steps-layout__sidebar {
   flex: 0;
+  margin-bottom: 2rem;
 }
 .dnb-forms-steps-layout__contents {
   flex: 1 0 25rem;