npm - @dnb/eufemia - Versions diffs - 10.31.0 → 10.33.0 - Mend

@dnb/eufemia 10.31.0 → 10.33.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 (846) hide show

package/style/themes/theme-sbanken/sbanken-theme-components.css CHANGED Viewed

@@ -695,9 +695,6 @@ 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;
 }
@@ -973,7 +970,6 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 }
 .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing] {
   border-radius: 0.375rem;
-  box-shadow: inset 0 0 0 2px var(--block-outline-color);
 }
 .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small {
   --space: var(--spacing-small);
@@ -984,6 +980,9 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large {
   --space: var(--spacing-large);
 }
+.dnb-forms-iterate-block--variant-outline .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing] {
+  box-shadow: inset 0 0 0 2px var(--block-outline-color);
+}
 .dnb-forms-iterate-block__inner .dnb-dl .dnb-dd {
   margin-bottom: 0;
 }
@@ -1119,7 +1118,6 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   outline: none;
 }
 .dnb-forms-wizard-layout__contents .dnb-card {
-  --border-color: var(--color-pistachio);
   max-width: var(--forms-card-max-width);
 }
 .dnb-forms-wizard-layout__contents .dnb-forms-step > .appear-fx,
@@ -2517,8 +2515,7 @@ button.dnb-button::-moz-focus-inner {
   flex-wrap: nowrap;
 }
 .dnb-card--filled .dnb-scroll-view {
-  -webkit-clip-path: inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner));
-          clip-path: inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner));
+  clip-path: inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner));
 }
 .dnb-card > .dnb-flex-container > .dnb-space:has(> .dnb-scroll-view) {
   width: 100%;
@@ -2723,7 +2720,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   background-color: var(--checkbox-color-background-on);
   border-color: var(--checkbox-color-border-on);
 }
-.dnb-checkbox__input:not([disabled]):not(:checked):not([data-checked=true]) ~ .dnb-checkbox__gfx {
+.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__gfx {
   opacity: 0;
   transform: scale(0.8);
   color: var(--checkbox-color-gfx-off);
@@ -2794,7 +2791,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   border-color: var(--checkbox-color-border-off--hover);
   background-color: var(--checkbox-color-background--hover);
 }
-.dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__gfx {
+.dnb-checkbox__input:hover ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx--hover);
 }
 .dnb-checkbox__input:not([disabled]):checked:hover ~ .dnb-checkbox__button, .dnb-checkbox__input:not([disabled])[data-checked=true]:hover ~ .dnb-checkbox__button {
@@ -4733,6 +4730,9 @@ button .dnb-form-status__text {
        column-gap: var(--column-gap, 0);
   --grid-columns: var(--small-columns, 4);
 }
+.dnb-grid-container--row-gap-x-small {
+  --row-gap: var(--spacing-x-small);
+}
 .dnb-grid-container--row-gap-small {
   --row-gap: var(--spacing-small);
 }
@@ -4742,6 +4742,9 @@ button .dnb-form-status__text {
 .dnb-grid-container--row-gap-large {
   --row-gap: var(--spacing-large);
 }
+.dnb-grid-container--column-gap-x-small {
+  --column-gap: var(--spacing-x-small);
+}
 .dnb-grid-container--column-gap-small {
   --column-gap: var(--spacing-small);
 }
@@ -6660,8 +6663,7 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
   background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
   background-repeat: repeat !important;
   background-size: 100% !important;
-  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-          clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
   animation: skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);
 }
 .dnb-skeleton--code pre,
@@ -6724,16 +6726,13 @@ html[data-visual-test] .dnb-skeleton--font, html[data-visual-test] .dnb-skeleton
 @keyframes skeletonLinearAnimation {
   0% {
-    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
   }
   50% {
-    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }
   100% {
-    -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
-            clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
+    clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
   }
 }
 @keyframes skeletonFontAnimation {
@@ -8033,8 +8032,7 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
 }
 .dnb-table--outline {
   position: relative;
-  -webkit-clip-path: inset(0 0 -10rem 0 round var(--table-outline-radius) var(--table-outline-radius) 0 0);
-          clip-path: inset(0 0 -10rem 0 round var(--table-outline-radius) var(--table-outline-radius) 0 0);
+  clip-path: inset(0 0 -10rem 0 round var(--table-outline-radius) var(--table-outline-radius) 0 0);
   z-index: 1;
 }
 .dnb-table--outline, .dnb-table--outline::after {
@@ -8057,8 +8055,7 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
 }
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child,
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last {
-  -webkit-clip-path: none;
-          clip-path: none;
+  clip-path: none;
 }
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th, .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::before, .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::after,
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td,
@@ -8371,8 +8368,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 }
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child,
 .dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last {
-  -webkit-clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
-          clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
+  clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
 }
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::before, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::after,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child,
@@ -8453,8 +8449,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   bottom: 0;
   height: 6px;
   box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
-  -webkit-clip-path: inset(6px 0 -48px 0);
-          clip-path: inset(6px 0 -48px 0);
+  clip-path: inset(6px 0 -48px 0);
 }
 /*
@@ -8529,8 +8524,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   min-height: 1rem;
 }
 .dnb-table__container .dnb-table__scroll-view {
-  -webkit-clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
-          clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
+  clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
 }
 @supports (-webkit-appearance: none) and (not (-moz-appearance: meterbar)) {
   .dnb-table__container::after {
@@ -9936,8 +9930,7 @@ html[data-visual-test] .dnb-tooltip--hide {
   -webkit-touch-callout: none !important;
   pointer-events: none !important;
   position: absolute !important;
-  -webkit-clip-path: inset(50%) !important;
-          clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
   max-width: 1px !important;
   max-height: 1px !important;
   overflow: hidden !important;
@@ -10796,6 +10789,12 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disab
   --button-tertiary-border: var(--sb-color-green);
 }
+.dnb-card.dnb-section {
+  --outline-color: var(--border-color, var(--sb-color-gray-light));
+  --outline-width: 0.0625rem;
+  --background-color: var(--sb-color-white);
+}
 /*
 * Checkbox theme for Sbanken
 *
@@ -11292,6 +11291,77 @@ html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-i
   background-color: var(--sb-color-violet);
 }
+/*
+* StepIndicator theme
+* Warning, this is just a stop-gap theming to avoid dnb brand colors. This component is not fully "Sbanken-ready"
+*/
+/*
+ * Utilities
+ */
+.dnb-step-indicator-wrapper .dnb-step-indicator__item .dnb-button {
+  --border-color: var(--sb-color-gray-light);
+}
+.dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button {
+  --border-color: var(--sb-color-purple-alternative);
+  color: var(--sb-color-white);
+  background-color: var(--sb-color-purple-alternative);
+}
+.dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button {
+  --border-color: var(--sb-color-purple-alternative);
+  color: var(--sb-color-purple-alternative);
+  background-color: var(--sb-color-green-light-2);
+}
+.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button {
+  cursor: text;
+  pointer-events: initial;
+  -webkit-user-select: initial;
+          user-select: initial;
+}
+.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
+  color: var(--color-black-80);
+  background-color: var(--color-white);
+  --border-color: var(--color-black-20);
+  --border-width: 0.0625rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
+  --border-color: var(--color-black-80);
+  --border-width: 0.125rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-step-indicator-wrapper .dnb-step-indicator__label, .dnb-step-indicator-wrapper .dnb-step-indicator__label.dnb-p {
+  font-size: var(--font-size-small);
+  margin-bottom: 0.5rem;
+}
+.dnb-step-indicator-wrapper .dnb-step-indicator__button__status.dnb-button--secondary {
+  color: var(--sb-color-text);
+  background-color: var(--sb-color-yellow-light-3);
+}
+.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary {
+  color: var(--sb-color-text);
+  background-color: var(--sb-color-magenta-light-2);
+}
+.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary {
+  color: var(--sb-color-text);
+  background-color: var(--sb-color-gray-light-2);
+}
+.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon {
+  align-self: flex-start;
+  margin-top: 1rem;
+  margin-right: 0.25rem;
+}
+.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number, .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
+  font-weight: var(--font-weight-basis);
+}
+.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
+  margin-top: 0.5rem;
+  font-size: var(--font-size-x-small);
+  line-height: var(--font-size-basis);
+  color: var(--color-black-80);
+}
 /*
 * Switch theme for Sbanken
 *
@@ -12089,15 +12159,6 @@ html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover:not([disabled])
   background-color: var(--color-fire-red);
 }
-/*
- * Utilities
- */
-.dnb-card.dnb-section {
-  --outline-color: var(--border-color, var(--color-lavender));
-  --outline-width: 0.25rem;
-  --background-color: var(--color-white);
-}
 /*
 * DatePicker theme
 *
@@ -12270,75 +12331,6 @@ html:not([data-whatintent=touch]) .dnb-date-picker__day--inactive .dnb-button[di
  * Np theme is provided
  *
  */
-/*
-* StepIndicator theme
-*
-*/
-/*
- * Utilities
- */
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button {
-  font-weight: var(--font-weight-medium);
-  --border-color: var(--color-sea-green);
-  --border-width: 0.125rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--visited .dnb-button {
-  background-color: var(--color-pistachio);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button {
-  cursor: text;
-  pointer-events: initial;
-  -webkit-user-select: initial;
-          user-select: initial;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
-  color: var(--color-black-80);
-  background-color: var(--color-white);
-  --border-color: var(--color-black-20);
-  --border-width: 0.0625rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-wrapper .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
-  --border-color: var(--color-black-80);
-  --border-width: 0.125rem;
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button:not([disabled]):not(:active):not(:hover):focus {
-  color: var(--color-emerald-green);
-  background-color: var(--color-mint-green);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__label, .dnb-step-indicator-wrapper .dnb-step-indicator__label.dnb-p {
-  font-size: var(--font-size-small);
-  margin-bottom: 0.5rem;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status.dnb-button--secondary {
-  background-color: var(--color-sand-yellow);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--error.dnb-button--secondary {
-  background-color: var(--color-fire-red-8);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary {
-  background-color: var(--color-pistachio);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon {
-  align-self: flex-start;
-  margin-top: 1rem;
-  margin-right: 0.25rem;
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number, .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
-  font-weight: var(--font-weight-basis);
-}
-.dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status {
-  margin-top: 0.5rem;
-  font-size: var(--font-size-x-small);
-  line-height: var(--font-size-basis);
-  color: var(--color-black-80);
-}
 /*
 * Timeline theme
 *
@@ -12685,9 +12677,6 @@ 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;
 }
@@ -12963,7 +12952,6 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 }
 .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing] {
   border-radius: 0.375rem;
-  box-shadow: inset 0 0 0 2px var(--block-outline-color);
 }
 .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small {
   --space: var(--spacing-small);
@@ -12974,6 +12962,9 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large {
   --space: var(--spacing-large);
 }
+.dnb-forms-iterate-block--variant-outline .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing] {
+  box-shadow: inset 0 0 0 2px var(--block-outline-color);
+}
 .dnb-forms-iterate-block__inner .dnb-dl .dnb-dd {
   margin-bottom: 0;
 }
@@ -13109,7 +13100,6 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   outline: none;
 }
 .dnb-forms-wizard-layout__contents .dnb-card {
-  --border-color: var(--color-pistachio);
   max-width: var(--forms-card-max-width);
 }
 .dnb-forms-wizard-layout__contents .dnb-forms-step > .appear-fx,
@@ -13240,6 +13230,7 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   background-color: var(--sb-color-gray-light);
 }
+/* Sbanken theme */
 .dnb-forms-field-block__label-description {
   color: var(--color-black-55);
   font-size: var(--font-size-small);