npm - @dnb/eufemia - Versions diffs - 10.37.0 → 10.38.0 - Mend

@dnb/eufemia 10.37.0 → 10.38.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 (345) hide show

package/style/dnb-ui-components.css CHANGED Viewed

@@ -472,20 +472,29 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 /*
  * Utilities
  */
+.dnb-forms-field-array-selection {
+  --row-gap: var(--spacing-x-small);
+}
 .dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
-  row-gap: var(--spacing-x-small);
+  row-gap: var(--row-gap);
+}
+.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--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
+.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;
+}
 .dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
-  row-gap: var(--spacing-x-small);
+  row-gap: var(--row-gap);
 }
 @media screen and (min-width: 40em) {
   .dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label {
@@ -671,6 +680,15 @@ html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-control
 .dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label {
   line-height: 2.5rem;
 }
+.dnb-forms-field-selection .dnb-forms-field-block__contents {
+  display: flex;
+}
+.dnb-forms-field-selection .dnb-radio-group .dnb-height-animation, .dnb-forms-field-selection .dnb-radio-group > .dnb-flex-container,
+.dnb-forms-field-selection .dnb-toggle-button-group .dnb-height-animation,
+.dnb-forms-field-selection .dnb-toggle-button-group > .dnb-flex-container {
+  width: 100%;
+  flex-grow: 1;
+}
 /*
  * Utilities
@@ -2487,8 +2505,24 @@ button.dnb-button::-moz-focus-inner {
   padding: 1rem;
 }
 .dnb-card.dnb-section {
+  --outline-color: var(--card-outline-color);
+  --outline-width: var(--card-outline-width);
+  --background-color: var(--card-background-color);
   background-color: var(--background-color);
 }
+.dnb-card .dnb-section {
+  z-index: 1;
+}
+@media screen and (min-width: 40em) {
+  .dnb-card {
+    --nested-space-l: calc(var(--padding-left, 0px) * -1);
+    --nested-space-r: calc(var(--padding-right, 0px) * -1);
+  }
+  .dnb-card .dnb-section::after {
+    --left: var(--nested-space-l);
+    --width: calc(100% - var(--nested-space-r) * 2);
+  }
+}
 .dnb-card--filled.dnb-card.dnb-section {
   --background-color: var(--outline-color);
 }
@@ -4856,8 +4890,9 @@ button .dnb-form-status__text {
  * Utilities
  */
 .dnb-height-animation {
-  --height-animation: height var(--duration, 400ms) var(--easing-default)
-    var(--delay, 0ms);
+  --height-animation-duration: var(--duration, 400ms);
+  --height-animation: height var(--height-animation-duration)
+    var(--easing-default) var(--delay, 0ms);
   will-change: height;
   transition: var(--height-animation);
 }
@@ -6376,10 +6411,13 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   transform: translateY(0.25rem); /* 4/16 */
 }
 .dnb-radio-group {
-  --radio-group-margin-bottom: 0.5rem;
-  --radio-group-margin-right: 1rem;
+  --radio-group-row-gap: 0.5rem;
+  --radio-group-column-gap: 1rem;
   display: inline-flex;
 }
+.dnb-radio-group, .dnb-radio-group__fieldset, .dnb-radio-group__shell {
+  flex-grow: 1;
+}
 .dnb-radio-group fieldset {
   margin: 0;
   padding: 0;
@@ -6395,9 +6433,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-radio-group [role=radiogroup], .dnb-radio-group__shell {
   display: flex;
   flex-wrap: wrap;
-  -moz-column-gap: var(--radio-group-margin-right);
-       column-gap: var(--radio-group-margin-right);
-  row-gap: var(--radio-group-margin-bottom);
+  -moz-column-gap: var(--radio-group-column-gap);
+       column-gap: var(--radio-group-column-gap);
+  row-gap: var(--radio-group-row-gap);
 }
 .dnb-radio-group__shell > .dnb-form-status {
   margin-top: 0;
@@ -9672,6 +9710,9 @@ html[data-visual-test] .dnb-textarea__textarea {
   --toggle-button-group-row-gap: 1rem;
   display: inline-flex;
 }
+.dnb-toggle-button-group, .dnb-toggle-button-group__fieldset, .dnb-toggle-button-group__shell {
+  flex-grow: 1;
+}
 .dnb-toggle-button-group fieldset {
   margin: 0;
   padding: 0;
@@ -9708,9 +9749,6 @@ html[data-visual-test] .dnb-textarea__textarea {
   order: 2;
   transform: translateY(-0.5rem);
 }
-.dnb-toggle-button-group .dnb-flex-container {
-  margin-bottom: calc(var(--toggle-button-group-margin-bottom) * -1);
-}
 .dnb-toggle-button-group .dnb-flex-container--direction-horizontal .dnb-form-label {
   margin-top: 0.5rem;
   align-self: flex-start;