npm - @dnb/eufemia - Versions diffs - 10.54.1 → 10.55.0 - Mend

@dnb/eufemia 10.54.1 → 10.55.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1106) hide show

package/cjs/style/themes/theme-eiendom/eiendom-theme-components.css CHANGED Viewed

@@ -479,6 +479,9 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 .dnb-forms-field-array-selection {
   --row-gap: var(--spacing-x-small);
 }
+.dnb-forms-field-array-selection--variant-button {
+  --row-gap: var(--spacing-small);
+}
 .dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
@@ -487,9 +490,6 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 .dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
   align-items: flex-start;
 }
-.dnb-forms-field-array-selection--variant-checkbox.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
-  row-gap: 0;
-}
 .dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
   line-height: 2.5rem;
 }
@@ -502,7 +502,6 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 }
 @media screen and (min-width: 40.00625em) {
   .dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label {
-    line-height: 2.5rem;
     margin-bottom: 0;
   }
 }
@@ -541,9 +540,6 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
     var(--number-control-button-width--large) * 2
   );
 }
-.dnb-forms-field-number__contents {
-  display: flex;
-}
 .dnb-forms-field-number__contents--has-controls .dnb-input__input {
   align-items: center;
 }
@@ -727,25 +723,46 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-left: 0;
 }
+.dnb-forms-field-block {
+  --label-margin: 0.25rem;
+}
 .dnb-forms-field-block__grid {
   display: grid;
+  grid-template-columns: minmax(min-content, var(--block-content-width, auto));
+  grid-template-areas: "label" "contents" "status";
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical {
+  flex-wrap: wrap;
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-forms-field-block__label > .dnb-form-label {
+  margin-bottom: 0.5rem;
 }
 @media screen and (max-width: 40em) {
-  .dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid {
-    flex-wrap: wrap;
-  }
-  .dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid > .dnb-form-label {
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-forms-field-block__label > .dnb-form-label {
     margin-bottom: 0.5rem;
-    margin-top: 0.5rem;
   }
 }
-.dnb-forms-field-block--layout-vertical {
-  grid-template-columns: auto;
-  grid-template-areas: "label" "contents" "status";
+@media screen and (min-width: 40.00625em) {
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal {
+    grid-template-columns: minmax(var(--dnb-forms-field-block-layout-width-min, min-content), var(--dnb-forms-field-block-layout-width-max, max-content)) auto;
+    grid-template-areas: "label contents" ". status";
+  }
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-forms-field-block__label > .dnb-form-label {
+    margin-top: var(--label-margin);
+    margin-bottom: var(--label-margin);
+  }
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents {
+    align-self: end;
+  }
+}
+.dnb-forms-field-block--label-height-small {
+  --label-margin: 0;
+}
+.dnb-forms-field-block--label-height-medium {
+  --label-margin: 0.5rem;
 }
-.dnb-forms-field-block--layout-horizontal {
-  grid-template-columns: fit-content(100%) auto;
-  grid-template-areas: "label contents" "status status";
+.dnb-forms-field-block--label-height-large {
+  --label-margin: 0.7rem;
 }
 .dnb-forms-field-block--width-stretch {
   flex-grow: 1;
@@ -779,6 +796,7 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 }
 .dnb-forms-field-block__status .dnb-form-status__shell {
   margin-top: 0.5rem;
+  max-width: 60ch;
 }
 @media screen and (max-width: 15em) {
   .dnb-forms-field-block__status {
@@ -787,6 +805,7 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 }
 .dnb-forms-field-block__contents {
   grid-area: contents;
+  display: flex;
   width: 100%;
 }
 .dnb-forms-field-block__contents--width-stretch {
@@ -882,32 +901,25 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   display: flex;
   flex-direction: column;
 }
+.dnb-forms-section-block--variant-basic {
+  --border-color: transparent;
+}
 .dnb-forms-section-block__inner {
   flex: 1;
   outline: none;
   margin-bottom: var(--space);
-  padding: var(--padding, 1rem);
   transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
   transform: translateY(-2.5rem);
 }
-.dnb-forms-section-block--variant-basic .dnb-forms-section-block__inner, .dnb-forms-section-block__inner:not([class*=dnb-flex-container--spacing]) {
-  --padding: 0;
-}
-.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing] {
-  border-radius: 0.375rem;
-}
-.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small {
+.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-small) {
   --space: var(--spacing-small);
 }
-.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium {
+.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-medium) {
   --space: var(--spacing-medium);
 }
-.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large {
+.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-large) {
   --space: var(--spacing-large);
 }
-.dnb-forms-section-block--variant-outline .dnb-forms-section-block__inner[class*=dnb-flex-container--spacing] {
-  box-shadow: inset 0 0 0 2px var(--block-outline-color);
-}
 .dnb-forms-section-block__inner .dnb-dl .dnb-dd {
   margin-bottom: 0;
 }
@@ -1058,12 +1070,6 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   display: inline-block;
   font-size: inherit;
 }
-.dnb-forms-value-block--inline:not([class*=__composition])::before, .dnb-forms-value-block--inline:not([class*=__composition])::after {
-  content: " ";
-}
-.dnb-forms-value-block + .dnb-forms-value-block--inline:not([class*=__composition])::before {
-  content: none;
-}
 .dnb-forms-value-block__label, .dnb-forms-value-block__label strong {
   font-weight: var(--font-weight-medium);
 }
@@ -1197,6 +1203,8 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   }
 }
 .dnb-forms-test-element {
+  display: flex;
+  width: 100%;
   border: 1px dashed #808080;
   border-radius: 0.5rem;
   color: #909090;
@@ -2574,6 +2582,9 @@ button.dnb-button::-moz-focus-inner {
 .dnb-card > .dnb-flex-container--align-stretch > .dnb-button {
   align-self: flex-start;
 }
+.dnb-card .dnb-card {
+  --outline-width: 0.125rem;
+}
 /*
 * Checkbox component
@@ -4485,10 +4496,21 @@ html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus {
   visibility: hidden;
 }
 .dnb-date-picker__fieldset, .dnb-core-style .dnb-date-picker__fieldset {
-  margin: 0;
   padding: 0;
   border: none;
 }
+.dnb-date-picker__fieldset:not([class*=space__top]), .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__top]) {
+  margin-top: 0;
+}
+.dnb-date-picker__fieldset:not([class*=space__right]), .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__right]) {
+  margin-right: 0;
+}
+.dnb-date-picker__fieldset:not([class*=space__bottom]), .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__bottom]) {
+  margin-bottom: 0;
+}
+.dnb-date-picker__fieldset:not([class*=space__left]), .dnb-core-style .dnb-date-picker__fieldset:not([class*=space__left]) {
+  margin-left: 0;
+}
 @keyframes date-picker-slide-down {
   from {
@@ -5700,11 +5722,22 @@ legend.dnb-form-label {
   margin: 0;
 }
 .dnb-form-row__fieldset, .dnb-core-style .dnb-form-row__fieldset {
-  margin: 0;
   padding: 0;
   border: none;
   width: 100%;
 }
+.dnb-form-row__fieldset:not([class*=space__top]), .dnb-core-style .dnb-form-row__fieldset:not([class*=space__top]) {
+  margin-top: 0;
+}
+.dnb-form-row__fieldset:not([class*=space__right]), .dnb-core-style .dnb-form-row__fieldset:not([class*=space__right]) {
+  margin-right: 0;
+}
+.dnb-form-row__fieldset:not([class*=space__bottom]), .dnb-core-style .dnb-form-row__fieldset:not([class*=space__bottom]) {
+  margin-bottom: 0;
+}
+.dnb-form-row__fieldset:not([class*=space__left]), .dnb-core-style .dnb-form-row__fieldset:not([class*=space__left]) {
+  margin-left: 0;
+}
 /*
  * FormSet component
@@ -6220,10 +6253,21 @@ p > .dnb-icon {
 }
 .dnb-multi-input-mask__fieldset {
-  margin: 0;
   padding: 0;
   border: none;
 }
+.dnb-multi-input-mask__fieldset:not([class*=space__top]) {
+  margin-top: 0;
+}
+.dnb-multi-input-mask__fieldset:not([class*=space__right]) {
+  margin-right: 0;
+}
+.dnb-multi-input-mask__fieldset:not([class*=space__bottom]) {
+  margin-bottom: 0;
+}
+.dnb-multi-input-mask__fieldset:not([class*=space__left]) {
+  margin-left: 0;
+}
 .dnb-multi-input-mask__fieldset--horizontal {
   display: inline-flex;
   flex-flow: row wrap;
@@ -7566,10 +7610,21 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   flex-grow: 1;
 }
 .dnb-radio-group fieldset {
-  margin: 0;
   padding: 0;
   border: none;
 }
+.dnb-radio-group fieldset:not([class*=space__top]) {
+  margin-top: 0;
+}
+.dnb-radio-group fieldset:not([class*=space__right]) {
+  margin-right: 0;
+}
+.dnb-radio-group fieldset:not([class*=space__bottom]) {
+  margin-bottom: 0;
+}
+.dnb-radio-group fieldset:not([class*=space__left]) {
+  margin-left: 0;
+}
 .dnb-radio-group--column .dnb-radio {
   display: flex;
   margin-right: 0;
@@ -10855,10 +10910,21 @@ html[data-visual-test] .dnb-textarea__textarea {
   flex-grow: 1;
 }
 .dnb-toggle-button-group fieldset {
-  margin: 0;
   padding: 0;
   border: none;
 }
+.dnb-toggle-button-group fieldset:not([class*=space__top]) {
+  margin-top: 0;
+}
+.dnb-toggle-button-group fieldset:not([class*=space__right]) {
+  margin-right: 0;
+}
+.dnb-toggle-button-group fieldset:not([class*=space__bottom]) {
+  margin-bottom: 0;
+}
+.dnb-toggle-button-group fieldset:not([class*=space__left]) {
+  margin-left: 0;
+}
 .dnb-toggle-button-group--column .dnb-toggle-button {
   display: flex;
   margin-right: 0;
@@ -12227,6 +12293,11 @@ html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:n
   --card-outline-width: 0.25rem;
   --card-background-color: var(--color-white);
 }
+.dnb-card .dnb-card {
+  --card-outline-color: var(--color-black-8);
+  --outline-width: 0.0625rem;
+  --rounded-corner: 0.375rem;
+}
 /*
 * Checkbox theme
@@ -13803,6 +13874,9 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected .dnb-drawer-lis
 .dnb-forms-field-array-selection {
   --row-gap: var(--spacing-x-small);
 }
+.dnb-forms-field-array-selection--variant-button {
+  --row-gap: var(--spacing-small);
+}
 .dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
@@ -13811,9 +13885,6 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected .dnb-drawer-lis
 .dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
   align-items: flex-start;
 }
-.dnb-forms-field-array-selection--variant-checkbox.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
-  row-gap: 0;
-}
 .dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
   line-height: 2.5rem;
 }
@@ -13826,7 +13897,6 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected .dnb-drawer-lis
 }
 @media screen and (min-width: 40.00625em) {
   .dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label {
-    line-height: 2.5rem;
     margin-bottom: 0;
   }
 }
@@ -13865,9 +13935,6 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected .dnb-drawer-lis
     var(--number-control-button-width--large) * 2
   );
 }
-.dnb-forms-field-number__contents {
-  display: flex;
-}
 .dnb-forms-field-number__contents--has-controls .dnb-input__input {
   align-items: center;
 }
@@ -14051,25 +14118,46 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   margin-left: 0;
 }
+.dnb-forms-field-block {
+  --label-margin: 0.25rem;
+}
 .dnb-forms-field-block__grid {
   display: grid;
+  grid-template-columns: minmax(min-content, var(--block-content-width, auto));
+  grid-template-areas: "label" "contents" "status";
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical {
+  flex-wrap: wrap;
+}
+.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical > .dnb-forms-field-block__label > .dnb-form-label {
+  margin-bottom: 0.5rem;
 }
 @media screen and (max-width: 40em) {
-  .dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid {
-    flex-wrap: wrap;
-  }
-  .dnb-forms-field-block--layout-vertical .dnb-forms-field-block__grid > .dnb-form-label {
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-forms-field-block__label > .dnb-form-label {
     margin-bottom: 0.5rem;
-    margin-top: 0.5rem;
   }
 }
-.dnb-forms-field-block--layout-vertical {
-  grid-template-columns: auto;
-  grid-template-areas: "label" "contents" "status";
+@media screen and (min-width: 40.00625em) {
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal {
+    grid-template-columns: minmax(var(--dnb-forms-field-block-layout-width-min, min-content), var(--dnb-forms-field-block-layout-width-max, max-content)) auto;
+    grid-template-areas: "label contents" ". status";
+  }
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-form-label, .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal > .dnb-forms-field-block__label > .dnb-form-label {
+    margin-top: var(--label-margin);
+    margin-bottom: var(--label-margin);
+  }
+  .dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents {
+    align-self: end;
+  }
+}
+.dnb-forms-field-block--label-height-small {
+  --label-margin: 0;
 }
-.dnb-forms-field-block--layout-horizontal {
-  grid-template-columns: fit-content(100%) auto;
-  grid-template-areas: "label contents" "status status";
+.dnb-forms-field-block--label-height-medium {
+  --label-margin: 0.5rem;
+}
+.dnb-forms-field-block--label-height-large {
+  --label-margin: 0.7rem;
 }
 .dnb-forms-field-block--width-stretch {
   flex-grow: 1;
@@ -14103,6 +14191,7 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 }
 .dnb-forms-field-block__status .dnb-form-status__shell {
   margin-top: 0.5rem;
+  max-width: 60ch;
 }
 @media screen and (max-width: 15em) {
   .dnb-forms-field-block__status {
@@ -14111,6 +14200,7 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 }
 .dnb-forms-field-block__contents {
   grid-area: contents;
+  display: flex;
   width: 100%;
 }
 .dnb-forms-field-block__contents--width-stretch {
@@ -14206,32 +14296,25 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   display: flex;
   flex-direction: column;
 }
+.dnb-forms-section-block--variant-basic {
+  --border-color: transparent;
+}
 .dnb-forms-section-block__inner {
   flex: 1;
   outline: none;
   margin-bottom: var(--space);
-  padding: var(--padding, 1rem);
   transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
   transform: translateY(-2.5rem);
 }
-.dnb-forms-section-block--variant-basic .dnb-forms-section-block__inner, .dnb-forms-section-block__inner:not([class*=dnb-flex-container--spacing]) {
-  --padding: 0;
-}
-.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing] {
-  border-radius: 0.375rem;
-}
-.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small {
+.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-small) {
   --space: var(--spacing-small);
 }
-.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium {
+.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-medium) {
   --space: var(--spacing-medium);
 }
-.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large {
+.dnb-forms-section-block__inner:has(.dnb-flex-container--spacing-large) {
   --space: var(--spacing-large);
 }
-.dnb-forms-section-block--variant-outline .dnb-forms-section-block__inner[class*=dnb-flex-container--spacing] {
-  box-shadow: inset 0 0 0 2px var(--block-outline-color);
-}
 .dnb-forms-section-block__inner .dnb-dl .dnb-dd {
   margin-bottom: 0;
 }
@@ -14382,12 +14465,6 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   display: inline-block;
   font-size: inherit;
 }
-.dnb-forms-value-block--inline:not([class*=__composition])::before, .dnb-forms-value-block--inline:not([class*=__composition])::after {
-  content: " ";
-}
-.dnb-forms-value-block + .dnb-forms-value-block--inline:not([class*=__composition])::before {
-  content: none;
-}
 .dnb-forms-value-block__label, .dnb-forms-value-block__label strong {
   font-weight: var(--font-weight-medium);
 }
@@ -14521,6 +14598,8 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   }
 }
 .dnb-forms-test-element {
+  display: flex;
+  width: 100%;
   border: 1px dashed #808080;
   border-radius: 0.5rem;
   color: #909090;