@dnb/eufemia 10.7.0 → 10.9.0

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

@@ -25,17 +25,13 @@
   width: 100%;
 }
 .dnb-forms-field-phone-number--width-large {
-  width: 336px;
-}
-.dnb-forms-field-phone-number--width-medium {
-  width: 176px;
+  width: 21rem;
 }
 .dnb-forms-field-phone-number__country-code {
-  --autocomplete-width: 145px;
-  flex: 0 144px;
+  flex: 0 9rem;
 }
 .dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell {
-  width: 144px;
+  width: 9rem;
 }
 .dnb-forms-field-phone-number__number {
   flex: 1;
@@ -48,11 +44,14 @@
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+.dnb-forms-field-postal-code-and-city--width-small {
+  width: 5rem;
+}
 .dnb-forms-field-postal-code-and-city--width-medium {
-  width: 176px;
+  width: 11rem;
 }
 .dnb-forms-field-postal-code-and-city--width-large {
-  width: 336px;
+  width: 21rem;
 }
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;
@@ -62,10 +61,40 @@
 }
 
 .dnb-forms-field-selection--width-large .dnb-dropdown__shell {
-  width: 336px;
+  width: 21rem;
 }
 .dnb-forms-field-selection--width-medium .dnb-dropdown__shell {
-  width: 176px;
+  width: 11rem;
+}
+.dnb-forms-field-selection--width-small .dnb-dropdown__shell {
+  width: 5rem;
+}
+
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: column;
+  grid-row-gap: var(--spacing-x-small);
+  row-gap: var(--spacing-x-small);
+}
+.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: row wrap;
+  grid-column-gap: var(--spacing-small);
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
+}
+
+.dnb-forms-field-country-code .dnb-autocomplete__inner {
+  --autocomplete-width: 9rem;
+}
+.dnb-forms-field-country-code--width-small .dnb-autocomplete__inner {
+  --autocomplete-width: 5rem;
+}
+.dnb-forms-field-country-code--width-medium .dnb-autocomplete__inner {
+  --autocomplete-width: 11rem;
+}
+.dnb-forms-field-country-code--width-large .dnb-autocomplete__inner {
+  --autocomplete-width: 21rem;
 }
 
 .dnb-forms-button-row {
@@ -77,10 +106,10 @@
 }
 
 .dnb-forms-card {
-  background-color: var(--color-white);
-  border: 4px solid #F2F2F5;
-  border-radius: 0.5rem;
   padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium);
+  background-color: var(--color-white);
+  border: 0.25rem solid var(--color-pistachio);
+  border-radius: 0.75rem;
 }
 .dnb-forms-card__heading {
   font-size: var(--font-size-basis);
@@ -153,6 +182,15 @@
   -moz-column-gap: var(--spacing-medium);
        column-gap: var(--spacing-medium);
 }
+.dnb-forms-flex-container--width-small {
+  width: 5rem;
+}
+.dnb-forms-flex-container--width-medium {
+  width: 11rem;
+}
+.dnb-forms-flex-container--width-large {
+  width: 21rem;
+}
 
 .dnb-forms-flex-item--grow {
   flex-grow: 1;
@@ -160,6 +198,15 @@
 .dnb-forms-flex-item--shrink {
   flex-shrink: 1;
 }
+.dnb-forms-flex-item--width-small {
+  width: 5rem;
+}
+.dnb-forms-flex-item--width-medium {
+  width: 11rem;
+}
+.dnb-forms-flex-item--width-large {
+  width: 21rem;
+}
 
 .dnb-forms-section + .dnb-forms-section {
   margin-top: var(--spacing-large);
@@ -171,9 +218,9 @@
 .dnb-forms-steps-layout {
   display: flex;
   flex-flow: row wrap;
-  grid-column-gap: 3rem;
-  -moz-column-gap: 3rem;
-       column-gap: 3rem;
+  grid-column-gap: var(--spacing-medium);
+  -moz-column-gap: var(--spacing-medium);
+       column-gap: var(--spacing-medium);
 }
 @media (max-width: 60em) {
   .dnb-forms-steps-layout {
@@ -184,21 +231,47 @@
 }
 .dnb-forms-steps-layout__sidebar {
   flex: 0;
-  min-width: 320px;
+  min-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar {
+  max-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+  min-width: 336px;
 }
 .dnb-forms-steps-layout__contents {
   flex: 1;
-  min-width: 400px;
+  min-width: 25rem;
 }
 
 .dnb-forms-test-element {
   border: 1px dashed #808080;
-  border-radius: 6px;
+  border-radius: 0.5rem;
   color: #909090;
-  padding: 4px 8px;
+  padding: 0.5rem 1rem;
 }
 
-.dnb-forms-field-block__label-block {
+.dnb-forms-field-block--layout-vertical {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-areas: "label" "contents" "status";
+}
+.dnb-forms-field-block--layout-horizontal {
+  display: grid;
+  grid-template-columns: 11rem auto;
+  grid-template-areas: "label contents" "status status";
+}
+.dnb-forms-field-block--width-small {
+  width: 5rem;
+}
+.dnb-forms-field-block--width-medium {
+  width: 11rem;
+}
+.dnb-forms-field-block--width-large {
+  width: 21rem;
+}
+.dnb-forms-field-block__label {
+  grid-area: label;
   display: flex;
   flex-flow: row;
   justify-content: space-between;
@@ -213,20 +286,23 @@
   color: var(--color-black-55);
   font-size: var(--font-size-small);
 }
-.dnb-forms-field-block--width-large {
-  width: 336px;
+.dnb-forms-field-block__status {
+  grid-area: status;
 }
-.dnb-forms-field-block--width-medium {
-  width: 176px;
+.dnb-forms-field-block__contents {
+  grid-area: contents;
 }
 .dnb-forms-field-block__contents--width-stretch {
   width: 100%;
 }
-.dnb-forms-field-block__contents--width-large {
-  width: 336px;
+.dnb-forms-field-block__contents--width-small {
+  width: 5rem;
 }
 .dnb-forms-field-block__contents--width-medium {
-  width: 176px;
+  width: 11rem;
+}
+.dnb-forms-field-block__contents--width-large {
+  width: 21rem;
 }
 
 .dnb-forms-value-block {
@@ -302,10 +378,10 @@
 }
 .dnb-payment-card__card {
   position: relative;
-  width: 85.6mm;
-  height: 53.98mm;
-  padding: 4mm;
-  border-radius: 3.48mm;
+  width: 343px;
+  height: 216px;
+  padding: 16px;
+  border-radius: 12px;
   border: 1px solid;
   border-color: rgba(255, 255, 255, 0.1) transparent rgba(0, 0, 0, 0.2) transparent;
   color: var(--color-white);
@@ -443,7 +519,7 @@
 .dnb-payment-card--compact .dnb-payment-card__card {
   padding: 0;
   height: 32.8mm;
-  border-radius: 3.48mm 3.48mm 0 0;
+  border-radius: 12px 12px 0 0;
   box-shadow: var(--shadow-default);
 }
 .dnb-payment-card--compact .dnb-payment-card__card__top {
@@ -461,14 +537,14 @@
   background-color: var(--color-white);
 }
 .dnb-payment-card--compact .dnb-payment-card__card__wrapper {
-  padding: 1.5mm 6mm;
+  padding: 6px 22px;
   color: var(--color-black-80);
 }
 .dnb-payment-card--compact .dnb-payment-card__card__numbers {
   font-size: var(--font-size-basis);
 }
 .dnb-payment-card--compact .dnb-payment-card__card__credit-type {
-  top: 8px;
+  top: 10px;
   right: 4px;
   bottom: auto;
 }

package/es/style/themes/theme-eiendom/eiendom-theme-extensions.min.css

@@ -1 +1 @@
-.dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-stretch{width:100%}.dnb-forms-field-phone-number--width-large{width:336px}.dnb-forms-field-phone-number--width-medium{width:176px}.dnb-forms-field-phone-number__country-code{--autocomplete-width:145px;flex:0 144px}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:144px}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-medium{width:176px}.dnb-forms-field-postal-code-and-city--width-large{width:336px}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:336px}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:176px}.dnb-forms-button-row{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-card{background-color:var(--color-white);border:4px solid #f2f2f5;border-radius:.5rem;padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}.dnb-forms-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-forms-card+.dnb-forms-card__heading{margin-top:var(--spacing-small)}.dnb-forms-flex-container{display:flex}.dnb-forms-flex-container--direction-row{flex-direction:row}.dnb-forms-flex-container--direction-column{flex-direction:column}.dnb-forms-flex-container--justify-flex-start{justify-content:flex-start}.dnb-forms-flex-container--justify-flex-end{justify-content:flex-end}.dnb-forms-flex-container--justify-center{justify-content:center}.dnb-forms-flex-container--justify-space-between{justify-content:space-between}.dnb-forms-flex-container--justify-space-around{justify-content:space-around}.dnb-forms-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-forms-flex-container--align-flex-start{align-items:flex-start}.dnb-forms-flex-container--align-flex-end{align-items:flex-end}.dnb-forms-flex-container--align-center{align-items:center}.dnb-forms-flex-container--align-stretch{align-items:stretch}.dnb-forms-flex-container--align-baseline{align-items:baseline}.dnb-forms-flex-container--wrap{flex-wrap:wrap}.dnb-forms-flex-container__hr{border:none;border-top:1px solid var(--color-black-8);height:0;margin:0;padding:0;width:100%}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-small{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small)}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-medium{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium)}.dnb-forms-flex-item--grow{flex-grow:1}.dnb-forms-flex-item--shrink{flex-shrink:1}.dnb-forms-section+.dnb-forms-section{margin-top:var(--spacing-large)}.dnb-forms-steps-layout{grid-column-gap:3rem;-moz-column-gap:3rem;column-gap:3rem;display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:320px}.dnb-forms-steps-layout__contents{flex:1;min-width:400px}.dnb-forms-test-element{border:1px dashed grey;border-radius:6px;color:#909090;padding:4px 8px}.dnb-forms-field-block__label-block{align-items:center;display:flex;flex-flow:row;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block--width-large{width:336px}.dnb-forms-field-block--width-medium{width:176px}.dnb-forms-field-block__contents--width-stretch{width:100%}.dnb-forms-field-block__contents--width-large{width:336px}.dnb-forms-field-block__contents--width-medium{width:176px}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}.dnb-payment-card{--color-dark-cyan:#003b47;--dnb-payment-bg-default:linear-gradient(187.2deg,#008484 6.31%,var(--color-sea-green) 82.66%);--dnb-payment-bg-pluss:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-white:linear-gradient(184.55deg,var(--color-black-background) 4.63%,var(--color-white) 92.04%);--dnb-payment-bg-gold:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);--dnb-payment-bg-saga:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-private:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-business-no-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-business-with-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);margin:0}.dnb-payment-card__card{border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent rgba(0,0,0,.2);border-radius:3.48mm;border-style:solid;border-width:1px;box-shadow:var(--shadow-default);color:var(--color-white);height:53.98mm;padding:4mm;position:relative;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:85.6mm}.dnb-payment-card__card--design-default{background:var(--dnb-payment-bg-default);color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:var(--dnb-payment-bg-pluss);color:var(--color-white)}.dnb-payment-card__card--design-my-first,.dnb-payment-card__card--design-ung,.dnb-payment-card__card--design-youth{color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:var(--dnb-payment-bg-gold);color:var(--color-white)}.dnb-payment-card__card--design-saga{background:var(--dnb-payment-bg-saga);color:var(--color-white)}.dnb-payment-card__card--design-private{background:var(--dnb-payment-bg-private);color:var(--color-white)}.dnb-payment-card__card--design-black{background:var(--color-black);color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background:var(--dnb-payment-bg-business-no-visa);color:var(--color-white)}.dnb-payment-card__card--design-business-with-visa{background:var(--dnb-payment-bg-business-with-visa);color:var(--color-white)}.dnb-payment-card__card:after{background:radial-gradient(52.39% 52.39% at 50%,at 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);background:radial-gradient(52.39% 52.39% at 50% 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card__content{display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{font-weight:var(--font-weight-medium);text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.5rem!important;font-weight:var(--font-weight-medium)}.dnb-payment-card__card__credit-type{bottom:0;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:38px;left:70px;position:absolute;top:0}.dnb-payment-card__card__bank-axept{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay{align-items:center;background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__center{align-items:center;background:var(--color-black-80);border-radius:4px;color:var(--color-sand-yellow);display:flex;flex-direction:column;justify-content:center;padding:1rem}.dnb-payment-card__blocking svg{shape-rendering:geometricprecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:3.48mm 3.48mm 0 0;box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:var(--color-black-80);padding:1.5mm 6mm}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;right:4px;top:8px}.dnb-payment-card--compact .dnb-payment-card__blocking__center{grid-gap:var(--spacing-x-small);align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;gap:var(--spacing-x-small);height:100%;justify-content:center;width:100%}
+.dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-stretch{width:100%}.dnb-forms-field-phone-number--width-large{width:21rem}.dnb-forms-field-phone-number__country-code{flex:0 9rem}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:9rem}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-small{width:5rem}.dnb-forms-field-postal-code-and-city--width-medium{width:11rem}.dnb-forms-field-postal-code-and-city--width-large{width:21rem}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:21rem}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:11rem}.dnb-forms-field-selection--width-small .dnb-dropdown__shell{width:5rem}.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{grid-row-gap:var(--spacing-x-small);display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}.dnb-forms-field-country-code .dnb-autocomplete__inner{--autocomplete-width:9rem}.dnb-forms-field-country-code--width-small .dnb-autocomplete__inner{--autocomplete-width:5rem}.dnb-forms-field-country-code--width-medium .dnb-autocomplete__inner{--autocomplete-width:11rem}.dnb-forms-field-country-code--width-large .dnb-autocomplete__inner{--autocomplete-width:21rem}.dnb-forms-button-row{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-card{background-color:var(--color-white);border:.25rem solid var(--color-pistachio);border-radius:.75rem;padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}.dnb-forms-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-forms-card+.dnb-forms-card__heading{margin-top:var(--spacing-small)}.dnb-forms-flex-container{display:flex}.dnb-forms-flex-container--direction-row{flex-direction:row}.dnb-forms-flex-container--direction-column{flex-direction:column}.dnb-forms-flex-container--justify-flex-start{justify-content:flex-start}.dnb-forms-flex-container--justify-flex-end{justify-content:flex-end}.dnb-forms-flex-container--justify-center{justify-content:center}.dnb-forms-flex-container--justify-space-between{justify-content:space-between}.dnb-forms-flex-container--justify-space-around{justify-content:space-around}.dnb-forms-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-forms-flex-container--align-flex-start{align-items:flex-start}.dnb-forms-flex-container--align-flex-end{align-items:flex-end}.dnb-forms-flex-container--align-center{align-items:center}.dnb-forms-flex-container--align-stretch{align-items:stretch}.dnb-forms-flex-container--align-baseline{align-items:baseline}.dnb-forms-flex-container--wrap{flex-wrap:wrap}.dnb-forms-flex-container__hr{border:none;border-top:1px solid var(--color-black-8);height:0;margin:0;padding:0;width:100%}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-small{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small)}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-medium{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium)}.dnb-forms-flex-container--width-small{width:5rem}.dnb-forms-flex-container--width-medium{width:11rem}.dnb-forms-flex-container--width-large{width:21rem}.dnb-forms-flex-item--grow{flex-grow:1}.dnb-forms-flex-item--shrink{flex-shrink:1}.dnb-forms-flex-item--width-small{width:5rem}.dnb-forms-flex-item--width-medium{width:11rem}.dnb-forms-flex-item--width-large{width:21rem}.dnb-forms-section+.dnb-forms-section{margin-top:var(--spacing-large)}.dnb-forms-steps-layout{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar{max-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:336px}.dnb-forms-steps-layout__contents{flex:1;min-width:25rem}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}.dnb-forms-field-block--layout-vertical{display:grid;grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{display:grid;grid-template-areas:"label contents" "status status";grid-template-columns:11rem auto}.dnb-forms-field-block--width-small{width:5rem}.dnb-forms-field-block--width-medium{width:11rem}.dnb-forms-field-block--width-large{width:21rem}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}.dnb-forms-field-block__contents--width-small{width:5rem}.dnb-forms-field-block__contents--width-medium{width:11rem}.dnb-forms-field-block__contents--width-large{width:21rem}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}.dnb-payment-card{--color-dark-cyan:#003b47;--dnb-payment-bg-default:linear-gradient(187.2deg,#008484 6.31%,var(--color-sea-green) 82.66%);--dnb-payment-bg-pluss:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-white:linear-gradient(184.55deg,var(--color-black-background) 4.63%,var(--color-white) 92.04%);--dnb-payment-bg-gold:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);--dnb-payment-bg-saga:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-private:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-business-no-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-business-with-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);margin:0}.dnb-payment-card__card{border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent rgba(0,0,0,.2);border-radius:12px;border-style:solid;border-width:1px;box-shadow:var(--shadow-default);color:var(--color-white);height:216px;padding:16px;position:relative;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:343px}.dnb-payment-card__card--design-default{background:var(--dnb-payment-bg-default);color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:var(--dnb-payment-bg-pluss);color:var(--color-white)}.dnb-payment-card__card--design-my-first,.dnb-payment-card__card--design-ung,.dnb-payment-card__card--design-youth{color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:var(--dnb-payment-bg-gold);color:var(--color-white)}.dnb-payment-card__card--design-saga{background:var(--dnb-payment-bg-saga);color:var(--color-white)}.dnb-payment-card__card--design-private{background:var(--dnb-payment-bg-private);color:var(--color-white)}.dnb-payment-card__card--design-black{background:var(--color-black);color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background:var(--dnb-payment-bg-business-no-visa);color:var(--color-white)}.dnb-payment-card__card--design-business-with-visa{background:var(--dnb-payment-bg-business-with-visa);color:var(--color-white)}.dnb-payment-card__card:after{background:radial-gradient(52.39% 52.39% at 50%,at 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);background:radial-gradient(52.39% 52.39% at 50% 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card__content{display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{font-weight:var(--font-weight-medium);text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.5rem!important;font-weight:var(--font-weight-medium)}.dnb-payment-card__card__credit-type{bottom:0;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:38px;left:70px;position:absolute;top:0}.dnb-payment-card__card__bank-axept{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay{align-items:center;background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__center{align-items:center;background:var(--color-black-80);border-radius:4px;color:var(--color-sand-yellow);display:flex;flex-direction:column;justify-content:center;padding:1rem}.dnb-payment-card__blocking svg{shape-rendering:geometricprecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:12px 12px 0 0;box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:var(--color-black-80);padding:6px 22px}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;right:4px;top:10px}.dnb-payment-card--compact .dnb-payment-card__blocking__center{grid-gap:var(--spacing-x-small);align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;gap:var(--spacing-x-small);height:100%;justify-content:center;width:100%}

package/es/style/themes/theme-sbanken/customisations.scss

@@ -37,12 +37,8 @@
   --scrollbar-track-color: var(--sb-color-gray-light-2);
   --scrollbar-thumb-color: var(--sb-color-gray-dark-3);
   --scrollbar-thumb-hover-color: var(--sb-color-purple);
-}
 
-// change heading to use MaisonNeueHeadings
-@mixin headingDefaultsCustomisation() {
-  // WIP – should "probably" be moved inside an typography theme
-  .eufemia-theme__sbanken & {
-    --font-family-default: var(--sb-font-family-headings);
-  }
+  // Skeleton
+  --skeleton-color: var(--sb-color-gray-light-2);
+  --skeleton-color--contrast: var(--sb-color-white);
 }

package/es/style/themes/theme-sbanken/properties.js

@@ -12,18 +12,18 @@ export default {
   '--sb-font-size-basis--em': '1em',
   '--sb-font-size-lead': '1.25rem',
   '--sb-font-size-medium': '1.625rem',
-  '--sb-font-size-large': '2.125rem',
-  '--sb-font-size-x-large': '2.625rem',
-  '--sb-font-size-xx-large': '3.125rem',
+  '--sb-font-size-large': '2rem',
+  '--sb-font-size-x-large': '2.375rem',
+  '--sb-font-size-xx-large': '3rem',
   '--sb-line-height-x-small': '1.125rem',
   '--sb-line-height-small': '1.25rem',
   '--sb-line-height-basis': '1.5rem',
   '--sb-line-height-basis--em': '1.5em',
   '--sb-line-height-lead': '1.75rem',
   '--sb-line-height-medium': '2rem',
-  '--sb-line-height-large': '2.5rem',
-  '--sb-line-height-x-large': '3rem',
-  '--sb-line-height-xx-large': '3.5rem',
+  '--sb-line-height-large': '2.375rem',
+  '--sb-line-height-x-large': '2.75rem',
+  '--sb-line-height-xx-large': '3.375rem',
   '--sb-color-black': '#000',
   '--sb-color-text': '#18172a',
   '--sb-color-gray-dark-3': '#3a3970',

package/es/style/themes/theme-sbanken/properties.js.map

@@ -1 +1 @@
-{"version":3,"file":"properties.js","names":[],"sources":["../../../../../src/style/themes/theme-sbanken/properties.js"],"sourcesContent":["/** This file is auto generated by makePropertiesFile.js */\n\nexport default {\n  '--sb-font-family-default': '\"Roboto\", \"Helvetica\", \"Arial\", sans-serif',\n  '--sb-font-family-headings': '\"MaisonNeueHeadings\", \"Roboto\", \"Helvetica\",',\n  '--sb-font-weight-default': 'normal',\n  '--sb-font-weight-basis': 'normal',\n  '--sb-font-weight-regular': 'normal',\n  '--sb-font-weight-medium': '500',\n  '--sb-font-weight-bold': '700',\n  '--sb-font-size-x-small': '0.75rem',\n  '--sb-font-size-small': '0.875rem',\n  '--sb-font-size-basis': '1rem',\n  '--sb-font-size-basis--em': '1em',\n  '--sb-font-size-lead': '1.25rem',\n  '--sb-font-size-medium': '1.625rem',\n  '--sb-font-size-large': '2.125rem',\n  '--sb-font-size-x-large': '2.625rem',\n  '--sb-font-size-xx-large': '3.125rem',\n  '--sb-line-height-x-small': '1.125rem',\n  '--sb-line-height-small': '1.25rem',\n  '--sb-line-height-basis': '1.5rem',\n  '--sb-line-height-basis--em': '1.5em',\n  '--sb-line-height-lead': '1.75rem',\n  '--sb-line-height-medium': '2rem',\n  '--sb-line-height-large': '2.5rem',\n  '--sb-line-height-x-large': '3rem',\n  '--sb-line-height-xx-large': '3.5rem',\n  '--sb-color-black': '#000',\n  '--sb-color-text': '#18172a',\n  '--sb-color-gray-dark-3': '#3a3970',\n  '--sb-color-gray-dark-3-neutral': '#3e3e4a',\n  '--sb-color-gray-dark-2': '#62628e',\n  '--sb-color-gray-dark-2-neutral': '#656472',\n  '--sb-color-gray-dark': '#9292b0',\n  '--sb-color-gray-dark-neutral': '#9494a3',\n  '--sb-color-gray': '#bbbbce',\n  '--sb-color-gray-neutral': '#bdbdc6',\n  '--sb-color-gray-light': '#d9d9e4',\n  '--sb-color-gray-light-2': '#ebebf2',\n  '--sb-color-gray-light-3': '#f9f9fd',\n  '--sb-color-purple': '#262342',\n  '--sb-color-purple-alternative': '#222163',\n  '--sb-color-green': '#92eecd',\n  '--sb-color-white': '#fff',\n  '--sb-color-red': '#d8134b',\n  '--sb-color-magenta': '#ff3c64',\n  '--sb-color-orange': '#fe5038',\n  '--sb-color-yellow-dark': '#f7bf16',\n  '--sb-color-yellow': '#ffef57',\n  '--sb-color-green-dark-3': '#00785b',\n  '--sb-color-green-dark-2': '#009669',\n  '--sb-color-violet': '#4e08bc',\n  '--sb-color-violet-light': '#7129e2',\n  '--sb-color-blue-dark-2': '#044ccc',\n  '--sb-color-blue-dark': '#005cff',\n  '--sb-color-blue': '#008eff',\n  '--sb-color-orange-light': '#ff817b',\n  '--sb-color-orange-light-2': '#ffd7d5',\n  '--sb-color-orange-light-3': '#fff0ef',\n  '--sb-color-magenta-light': '#ffb6d2',\n  '--sb-color-magenta-light-2': '#ffdbe9',\n  '--sb-color-magenta-light-3': '#fff5f9',\n  '--sb-color-yellow-light': '#fff489',\n  '--sb-color-yellow-light-2': '#fff9c4',\n  '--sb-color-yellow-light-3': '#fffce5',\n  '--sb-color-green-dark': '#64d7b4',\n  '--sb-color-green-light': '#c8f6e5',\n  '--sb-color-green-light-2': '#e5fff4',\n  '--sb-color-violet-light-2': '#d2bbff',\n  '--sb-color-violet-light-3': '#ebe1ff',\n  '--sb-color-violet-light-4': '#f7f3ff',\n  '--sb-color-blue-light': '#61b9ff',\n  '--sb-color-blue-light-2': '#bfe3ff',\n  '--sb-color-blue-light-3': '#ebf6ff',\n  '--sb-spacing-x-small': '0.5rem',\n  '--sb-spacing-small': '1rem',\n  '--sb-spacing-medium': '1.5rem',\n  '--sb-spacing-large': '2rem',\n  '--sb-spacing-x-large': '3rem',\n  '--sb-spacing-xx-large': '3.5rem',\n  '--sb-layout-small': '40em',\n  '--sb-layout-medium': '60em',\n  '--sb-layout-large': '72em',\n  '--sb-layout-x-large': '80em',\n  '--sb-layout-xx-large': '90em',\n  '--sb-shadow-small': '0 2px 4px rgba(38 35 66 / 12%)',\n  '--sb-shadow-medium': '0 5px 20px rgba(38 35 66 / 10%)',\n  '--sb-shadow-large': '0 5px 20px rgba(38 35 66 / 20%)',\n  '--sb-shadow-hover': '0 20px 40px rgba(38 35 66 / 20%)',\n  '--sb-easing-default': 'cubic-bezier(0.42, 0, 0, 1)'\n}; // prettier-ignore\n"],"mappings":"AAEA,eAAe;EACb,0BAA0B,EAAE,4CAA4C;EACxE,2BAA2B,EAAE,8CAA8C;EAC3E,0BAA0B,EAAE,QAAQ;EACpC,wBAAwB,EAAE,QAAQ;EAClC,0BAA0B,EAAE,QAAQ;EACpC,yBAAyB,EAAE,KAAK;EAChC,uBAAuB,EAAE,KAAK;EAC9B,wBAAwB,EAAE,SAAS;EACnC,sBAAsB,EAAE,UAAU;EAClC,sBAAsB,EAAE,MAAM;EAC9B,0BAA0B,EAAE,KAAK;EACjC,qBAAqB,EAAE,SAAS;EAChC,uBAAuB,EAAE,UAAU;EACnC,sBAAsB,EAAE,UAAU;EAClC,wBAAwB,EAAE,UAAU;EACpC,yBAAyB,EAAE,UAAU;EACrC,0BAA0B,EAAE,UAAU;EACtC,wBAAwB,EAAE,SAAS;EACnC,wBAAwB,EAAE,QAAQ;EAClC,4BAA4B,EAAE,OAAO;EACrC,uBAAuB,EAAE,SAAS;EAClC,yBAAyB,EAAE,MAAM;EACjC,wBAAwB,EAAE,QAAQ;EAClC,0BAA0B,EAAE,MAAM;EAClC,2BAA2B,EAAE,QAAQ;EACrC,kBAAkB,EAAE,MAAM;EAC1B,iBAAiB,EAAE,SAAS;EAC5B,wBAAwB,EAAE,SAAS;EACnC,gCAAgC,EAAE,SAAS;EAC3C,wBAAwB,EAAE,SAAS;EACnC,gCAAgC,EAAE,SAAS;EAC3C,sBAAsB,EAAE,SAAS;EACjC,8BAA8B,EAAE,SAAS;EACzC,iBAAiB,EAAE,SAAS;EAC5B,yBAAyB,EAAE,SAAS;EACpC,uBAAuB,EAAE,SAAS;EAClC,yBAAyB,EAAE,SAAS;EACpC,yBAAyB,EAAE,SAAS;EACpC,mBAAmB,EAAE,SAAS;EAC9B,+BAA+B,EAAE,SAAS;EAC1C,kBAAkB,EAAE,SAAS;EAC7B,kBAAkB,EAAE,MAAM;EAC1B,gBAAgB,EAAE,SAAS;EAC3B,oBAAoB,EAAE,SAAS;EAC/B,mBAAmB,EAAE,SAAS;EAC9B,wBAAwB,EAAE,SAAS;EACnC,mBAAmB,EAAE,SAAS;EAC9B,yBAAyB,EAAE,SAAS;EACpC,yBAAyB,EAAE,SAAS;EACpC,mBAAmB,EAAE,SAAS;EAC9B,yBAAyB,EAAE,SAAS;EACpC,wBAAwB,EAAE,SAAS;EACnC,sBAAsB,EAAE,SAAS;EACjC,iBAAiB,EAAE,SAAS;EAC5B,yBAAyB,EAAE,SAAS;EACpC,2BAA2B,EAAE,SAAS;EACtC,2BAA2B,EAAE,SAAS;EACtC,0BAA0B,EAAE,SAAS;EACrC,4BAA4B,EAAE,SAAS;EACvC,4BAA4B,EAAE,SAAS;EACvC,yBAAyB,EAAE,SAAS;EACpC,2BAA2B,EAAE,SAAS;EACtC,2BAA2B,EAAE,SAAS;EACtC,uBAAuB,EAAE,SAAS;EAClC,wBAAwB,EAAE,SAAS;EACnC,0BAA0B,EAAE,SAAS;EACrC,2BAA2B,EAAE,SAAS;EACtC,2BAA2B,EAAE,SAAS;EACtC,2BAA2B,EAAE,SAAS;EACtC,uBAAuB,EAAE,SAAS;EAClC,yBAAyB,EAAE,SAAS;EACpC,yBAAyB,EAAE,SAAS;EACpC,sBAAsB,EAAE,QAAQ;EAChC,oBAAoB,EAAE,MAAM;EAC5B,qBAAqB,EAAE,QAAQ;EAC/B,oBAAoB,EAAE,MAAM;EAC5B,sBAAsB,EAAE,MAAM;EAC9B,uBAAuB,EAAE,QAAQ;EACjC,mBAAmB,EAAE,MAAM;EAC3B,oBAAoB,EAAE,MAAM;EAC5B,mBAAmB,EAAE,MAAM;EAC3B,qBAAqB,EAAE,MAAM;EAC7B,sBAAsB,EAAE,MAAM;EAC9B,mBAAmB,EAAE,gCAAgC;EACrD,oBAAoB,EAAE,iCAAiC;EACvD,mBAAmB,EAAE,iCAAiC;EACtD,mBAAmB,EAAE,kCAAkC;EACvD,qBAAqB,EAAE;AACzB,CAAC"}
+{"version":3,"file":"properties.js","names":[],"sources":["../../../../../src/style/themes/theme-sbanken/properties.js"],"sourcesContent":["/** This file is auto generated by makePropertiesFile.js */\n\nexport default {\n  '--sb-font-family-default': '\"Roboto\", \"Helvetica\", \"Arial\", sans-serif',\n  '--sb-font-family-headings': '\"MaisonNeueHeadings\", \"Roboto\", \"Helvetica\",',\n  '--sb-font-weight-default': 'normal',\n  '--sb-font-weight-basis': 'normal',\n  '--sb-font-weight-regular': 'normal',\n  '--sb-font-weight-medium': '500',\n  '--sb-font-weight-bold': '700',\n  '--sb-font-size-x-small': '0.75rem',\n  '--sb-font-size-small': '0.875rem',\n  '--sb-font-size-basis': '1rem',\n  '--sb-font-size-basis--em': '1em',\n  '--sb-font-size-lead': '1.25rem',\n  '--sb-font-size-medium': '1.625rem',\n  '--sb-font-size-large': '2rem',\n  '--sb-font-size-x-large': '2.375rem',\n  '--sb-font-size-xx-large': '3rem',\n  '--sb-line-height-x-small': '1.125rem',\n  '--sb-line-height-small': '1.25rem',\n  '--sb-line-height-basis': '1.5rem',\n  '--sb-line-height-basis--em': '1.5em',\n  '--sb-line-height-lead': '1.75rem',\n  '--sb-line-height-medium': '2rem',\n  '--sb-line-height-large': '2.375rem',\n  '--sb-line-height-x-large': '2.75rem',\n  '--sb-line-height-xx-large': '3.375rem',\n  '--sb-color-black': '#000',\n  '--sb-color-text': '#18172a',\n  '--sb-color-gray-dark-3': '#3a3970',\n  '--sb-color-gray-dark-3-neutral': '#3e3e4a',\n  '--sb-color-gray-dark-2': '#62628e',\n  '--sb-color-gray-dark-2-neutral': '#656472',\n  '--sb-color-gray-dark': '#9292b0',\n  '--sb-color-gray-dark-neutral': '#9494a3',\n  '--sb-color-gray': '#bbbbce',\n  '--sb-color-gray-neutral': '#bdbdc6',\n  '--sb-color-gray-light': '#d9d9e4',\n  '--sb-color-gray-light-2': '#ebebf2',\n  '--sb-color-gray-light-3': '#f9f9fd',\n  '--sb-color-purple': '#262342',\n  '--sb-color-purple-alternative': '#222163',\n  '--sb-color-green': '#92eecd',\n  '--sb-color-white': '#fff',\n  '--sb-color-red': '#d8134b',\n  '--sb-color-magenta': '#ff3c64',\n  '--sb-color-orange': '#fe5038',\n  '--sb-color-yellow-dark': '#f7bf16',\n  '--sb-color-yellow': '#ffef57',\n  '--sb-color-green-dark-3': '#00785b',\n  '--sb-color-green-dark-2': '#009669',\n  '--sb-color-violet': '#4e08bc',\n  '--sb-color-violet-light': '#7129e2',\n  '--sb-color-blue-dark-2': '#044ccc',\n  '--sb-color-blue-dark': '#005cff',\n  '--sb-color-blue': '#008eff',\n  '--sb-color-orange-light': '#ff817b',\n  '--sb-color-orange-light-2': '#ffd7d5',\n  '--sb-color-orange-light-3': '#fff0ef',\n  '--sb-color-magenta-light': '#ffb6d2',\n  '--sb-color-magenta-light-2': '#ffdbe9',\n  '--sb-color-magenta-light-3': '#fff5f9',\n  '--sb-color-yellow-light': '#fff489',\n  '--sb-color-yellow-light-2': '#fff9c4',\n  '--sb-color-yellow-light-3': '#fffce5',\n  '--sb-color-green-dark': '#64d7b4',\n  '--sb-color-green-light': '#c8f6e5',\n  '--sb-color-green-light-2': '#e5fff4',\n  '--sb-color-violet-light-2': '#d2bbff',\n  '--sb-color-violet-light-3': '#ebe1ff',\n  '--sb-color-violet-light-4': '#f7f3ff',\n  '--sb-color-blue-light': '#61b9ff',\n  '--sb-color-blue-light-2': '#bfe3ff',\n  '--sb-color-blue-light-3': '#ebf6ff',\n  '--sb-spacing-x-small': '0.5rem',\n  '--sb-spacing-small': '1rem',\n  '--sb-spacing-medium': '1.5rem',\n  '--sb-spacing-large': '2rem',\n  '--sb-spacing-x-large': '3rem',\n  '--sb-spacing-xx-large': '3.5rem',\n  '--sb-layout-small': '40em',\n  '--sb-layout-medium': '60em',\n  '--sb-layout-large': '72em',\n  '--sb-layout-x-large': '80em',\n  '--sb-layout-xx-large': '90em',\n  '--sb-shadow-small': '0 2px 4px rgba(38 35 66 / 12%)',\n  '--sb-shadow-medium': '0 5px 20px rgba(38 35 66 / 10%)',\n  '--sb-shadow-large': '0 5px 20px rgba(38 35 66 / 20%)',\n  '--sb-shadow-hover': '0 20px 40px rgba(38 35 66 / 20%)',\n  '--sb-easing-default': 'cubic-bezier(0.42, 0, 0, 1)'\n}; // prettier-ignore\n"],"mappings":"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"}

package/es/style/themes/theme-sbanken/properties.scss

@@ -24,9 +24,9 @@
   --sb-font-size-basis--em: 1em;
   --sb-font-size-lead: 1.25rem;
   --sb-font-size-medium: 1.625rem;
-  --sb-font-size-large: 2.125rem;
-  --sb-font-size-x-large: 2.625rem;
-  --sb-font-size-xx-large: 3.125rem;
+  --sb-font-size-large: 2rem;
+  --sb-font-size-x-large: 2.375rem;
+  --sb-font-size-xx-large: 3rem;
 
   // Typography Line heights
   --sb-line-height-x-small: 1.125rem;
@@ -35,9 +35,9 @@
   --sb-line-height-basis--em: 1.5em; // 1.5*16 = 24px
   --sb-line-height-lead: 1.75rem;
   --sb-line-height-medium: 2rem;
-  --sb-line-height-large: 2.5rem;
-  --sb-line-height-x-large: 3rem;
-  --sb-line-height-xx-large: 3.5rem;
+  --sb-line-height-large: 2.375rem;
+  --sb-line-height-x-large: 2.75rem;
+  --sb-line-height-xx-large: 3.375rem;
 
   // UX colors
   --sb-color-black: #000;

package/es/style/themes/theme-sbanken/sbanken-theme-basis.css

@@ -157,18 +157,18 @@
   --sb-font-size-basis--em: 1em;
   --sb-font-size-lead: 1.25rem;
   --sb-font-size-medium: 1.625rem;
-  --sb-font-size-large: 2.125rem;
-  --sb-font-size-x-large: 2.625rem;
-  --sb-font-size-xx-large: 3.125rem;
+  --sb-font-size-large: 2rem;
+  --sb-font-size-x-large: 2.375rem;
+  --sb-font-size-xx-large: 3rem;
   --sb-line-height-x-small: 1.125rem;
   --sb-line-height-small: 1.25rem;
   --sb-line-height-basis: 1.5rem;
   --sb-line-height-basis--em: 1.5em;
   --sb-line-height-lead: 1.75rem;
   --sb-line-height-medium: 2rem;
-  --sb-line-height-large: 2.5rem;
-  --sb-line-height-x-large: 3rem;
-  --sb-line-height-xx-large: 3.5rem;
+  --sb-line-height-large: 2.375rem;
+  --sb-line-height-x-large: 2.75rem;
+  --sb-line-height-xx-large: 3.375rem;
   --sb-color-black: #000;
   --sb-color-text: #18172a;
   --sb-color-gray-dark-3: #3a3970;
@@ -255,6 +255,8 @@
   --scrollbar-track-color: var(--sb-color-gray-light-2);
   --scrollbar-thumb-color: var(--sb-color-gray-dark-3);
   --scrollbar-thumb-hover-color: var(--sb-color-purple);
+  --skeleton-color: var(--sb-color-gray-light-2);
+  --skeleton-color--contrast: var(--sb-color-white);
 }
 
 /**
@@ -313,6 +315,12 @@
  *
  */
 .dnb-blockquote {
+  --blockquote-padding-top: 2rem;
+  --blockquote-padding-left: 1.5rem;
+  --blockquote-padding-bottom: 3rem;
+  --blockquote-quote-size: 3rem;
+  --blockquote-quote-padding: 6rem;
+  --blockquote-cite-style: italic;
   display: inline-block;
   width: auto;
   padding: 1.5rem;
@@ -327,22 +335,22 @@
 .dnb-blockquote::before {
   content: "";
   position: absolute;
-  top: 2rem;
-  left: 1.5rem;
-  width: 3em;
-  height: 3em;
+  top: var(--blockquote-padding-top);
+  left: var(--blockquote-padding-left);
+  width: var(--blockquote-quote-size);
+  height: var(--blockquote-quote-size);
   background-size: cover;
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSI+ICA8cGF0aCBmaWxsPSIjQTVFMUQyIiBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0zNy41IDI3LjVhOSA5IDAgMSAwIDAtMTggOSA5IDAgMCAwIDAgMTh6Ii8+ICA8cGF0aCBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik00Ni41IDE4LjVhMjEgMjEgMCAwIDEtMjEgMjEiLz4gIDxwYXRoIGZpbGw9IiNBNUUxRDIiIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTEzLjUgMjcuNWE5IDkgMCAxIDAgMC0xOCA5IDkgMCAwIDAgMCAxOHoiLz4gIDxwYXRoIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTIyLjUgMTguNWEyMSAyMSAwIDAgMS0yMSAyMSIvPjwvc3ZnPg==");
 }
 .dnb-blockquote, .dnb-blockquote.dnb-blockquote--left {
-  padding-left: 6rem;
-  padding-top: 2rem;
-  padding-bottom: 3rem;
+  padding-left: var(--blockquote-quote-padding);
+  padding-top: var(--blockquote-padding-top);
+  padding-bottom: var(--blockquote-padding-bottom);
 }
 .dnb-blockquote.dnb-blockquote--top {
-  padding-left: 1.5rem;
-  padding-top: 6rem;
-  padding-bottom: 3rem;
+  padding-left: var(--blockquote-padding-left);
+  padding-top: var(--blockquote-quote-padding);
+  padding-bottom: var(--blockquote-padding-bottom);
 }
 .dnb-blockquote.dnb-blockquote--no-background {
   background-color: transparent;
@@ -356,7 +364,7 @@
   margin-top: 1rem;
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height-basis);
-  font-style: italic;
+  font-style: var(--blockquote-cite-style);
 }
 .dnb-blockquote .dnb-cite::before,
 .dnb-blockquote .dnb-figcaption::before,
@@ -896,14 +904,17 @@ del .dnb-code {
   --typography-h-basis-small-font-size: var(--font-size-small);
   --typography-h-basis-small-line-height: var(--line-height-small);
   --typography-h-basis-weight: var(--font-weight-medium);
+  --typography-h-basis-font-family: var(--font-family-default);
   --typography-h-small-font-size: var(--font-size-small);
   --typography-h-small-line-height: var(--line-height-small);
   --typography-h-small-small-font-size: var(--font-size-x-small);
   --typography-h-small-small-line-height: var(--line-height-x-small);
   --typography-h-small-weight: var(--font-weight-medium);
+  --typography-h-small-font-family: var(--font-family-default);
   --typography-h-x-small-font-size: var(--font-size-x-small);
   --typography-h-x-small-line-height: var(--line-height-x-small);
   --typography-h-x-small-weight: var(--font-weight-medium);
+  --typography-h-x-small-font-family: var(--font-family-default);
 }
 
 .dnb-lead,
@@ -1014,24 +1025,6 @@ del .dnb-code {
   padding-top: 0;
   padding-bottom: 0.03125rem;
 }
-.eufemia-theme__sbanken .dnb-lead,
-.eufemia-theme__sbanken .dnb-h--xx-large,
-.eufemia-theme__sbanken .dnb-h--x-large,
-.eufemia-theme__sbanken .dnb-h--large,
-.eufemia-theme__sbanken .dnb-h--medium,
-.eufemia-theme__sbanken .dnb-h--basis,
-.eufemia-theme__sbanken .dnb-h--small,
-.eufemia-theme__sbanken .dnb-h--x-small,
-.eufemia-theme__sbanken .dnb-core-style .dnb-lead,
-.eufemia-theme__sbanken .dnb-core-style .dnb-h--xx-large,
-.eufemia-theme__sbanken .dnb-core-style .dnb-h--x-large,
-.eufemia-theme__sbanken .dnb-core-style .dnb-h--large,
-.eufemia-theme__sbanken .dnb-core-style .dnb-h--medium,
-.eufemia-theme__sbanken .dnb-core-style .dnb-h--basis,
-.eufemia-theme__sbanken .dnb-core-style .dnb-h--small,
-.eufemia-theme__sbanken .dnb-core-style .dnb-h--x-small {
-  --font-family-default: var(--sb-font-family-headings);
-}
 
 .dnb-small {
   font-size: var(--font-size-small);
@@ -1171,6 +1164,7 @@ sub {
   font-size: var(--typography-h-basis-font-size);
   line-height: var(--typography-h-basis-line-height);
   font-weight: var(--typography-h-basis-weight);
+  font-family: var(--typography-h-basis-font-family);
 }
 .dnb-h--basis > small {
   font-size: var(--typography-h-basis-small-font-size);
@@ -1181,6 +1175,7 @@ sub {
   font-size: var(--typography-h-small-font-size);
   line-height: var(--typography-h-small-line-height);
   font-weight: var(--typography-h-small-weight);
+  font-family: var(--typography-h-small-font-family);
 }
 .dnb-h--small > small {
   font-size: var(--typography-h-small-small-font-size);
@@ -1191,6 +1186,7 @@ sub {
   font-size: var(--typography-h-x-small-font-size);
   line-height: var(--typography-h-x-small-line-height);
   font-weight: var(--typography-h-x-small-weight);
+  font-family: var(--typography-h-x-small-font-family);
 }
 .dnb-spacing .dnb-h--xx-large:not([class*=space__top]), .dnb-core-style .dnb-spacing .dnb-h--xx-large:not([class*=space__top]) {
   margin-top: 3rem;
@@ -1235,26 +1231,35 @@ sub {
  * NB: The content below is auto generated by the "themeFactory".
  * You may want to update it by running "yarn build" locally.
  */
+/*
+ * Utilities
+ */
 .dnb-blockquote {
-  color: var(--sb-color-text);
+  --blockquote-padding-top: 1.5rem;
+  --blockquote-quote-padding: 5.5rem;
+  --blockquote-cite-style: normal;
   background-color: var(--sb-color-violet-light-4);
   border-radius: 1.125rem;
 }
+@media screen and (max-width: 40em) {
+  .dnb-blockquote {
+    --blockquote-padding-bottom: 1.5rem;
+    --blockquote-quote-size: 2rem;
+    --blockquote-quote-padding: 4rem;
+  }
+  .dnb-blockquote.dnb-blockquote--top {
+    --blockquote-padding-top: 1rem;
+  }
+  .dnb-blockquote:not(.dnb-blockquote--top) {
+    --blockquote-padding-left: 1rem;
+  }
+}
 .dnb-blockquote::before {
   filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(6711%) hue-rotate(265deg) brightness(71%) contrast(115%);
 }
 .dnb-blockquote.dnb-blockquote--no-background::before {
   filter: brightness(0) saturate(100%) invert(12%) sepia(4%) saturate(6079%) hue-rotate(204deg) brightness(78%) contrast(99%);
 }
-.dnb-blockquote h1,
-.dnb-blockquote h2,
-.dnb-blockquote h3,
-.dnb-blockquote .dnb-h--xx-large,
-.dnb-blockquote .dnb-h--large,
-.dnb-blockquote .dnb-h--medium,
-.dnb-blockquote .dnb-lead {
-  color: var(--sb-color-text);
-}
 
 .dnb-code {
   font-family: var(--sb-font-family-default);
@@ -1278,6 +1283,9 @@ sub {
  * Mainly only the margins are defined in here
  *
  */
+/*
+ * Utilities
+ */
 .dnb-p {
   color: var(--sb-color-text);
 }
@@ -1308,6 +1316,8 @@ h6 {
 .dnb-core-style .dnb-h--small,
 .dnb-core-style .dnb-h--x-small {
   color: var(--sb-color-text);
+  font-feature-settings: none;
+  font-variant-ligatures: none;
 }
 
 .dnb-lead, .dnb-h--xx-large, .dnb-h--x-large, .dnb-h--large, .dnb-h--medium, .dnb-h--basis, .dnb-h--small, .dnb-h--x-small, .dnb-core-style .dnb-lead, .dnb-core-style .dnb-h--xx-large, .dnb-core-style .dnb-h--x-large, .dnb-core-style .dnb-h--large, .dnb-core-style .dnb-h--medium, .dnb-core-style .dnb-h--basis, .dnb-core-style .dnb-h--small, .dnb-core-style .dnb-h--x-small, h1, h2, h3, h4, h5, h6, p, b, small, strong, .dnb-p, .dnb-small, .dnb-table, sub, sup {
@@ -1317,8 +1327,18 @@ h6 {
   --typography-h-large-weight: var(--font-weight-regular);
   --typography-lead-weight: var(--font-weight-regular);
   --typography-h-medium-weight: var(--font-weight-regular);
-  --typography-h-basis-weight: var(--font-weight-regular);
-  --typography-h-small-weight: var(--font-weight-regular);
+}
+@media screen and (max-width: 40em) {
+  .dnb-lead, .dnb-h--xx-large, .dnb-h--x-large, .dnb-h--large, .dnb-h--medium, .dnb-h--basis, .dnb-h--small, .dnb-h--x-small, .dnb-core-style .dnb-lead, .dnb-core-style .dnb-h--xx-large, .dnb-core-style .dnb-h--x-large, .dnb-core-style .dnb-h--large, .dnb-core-style .dnb-h--medium, .dnb-core-style .dnb-h--basis, .dnb-core-style .dnb-h--small, .dnb-core-style .dnb-h--x-small, h1, h2, h3, h4, h5, h6, p, b, small, strong, .dnb-p, .dnb-small, .dnb-table, sub, sup {
+    --typography-h-xx-large-font-size: var(--font-size-x-large);
+    --typography-h-xx-large-line-height: var(--line-height-x-large);
+    --typography-h-x-large-font-size: var(--font-size-large);
+    --typography-h-x-large-line-height: var(--line-height-large);
+    --typography-h-large-font-size: var(--font-size-medium);
+    --typography-h-large-line-height: var(--line-height-medium);
+    --typography-h-medium-font-size: var(--font-size-lead);
+    --typography-h-medium-line-height: var(--line-height-lead);
+  }
 }
 
 .dnb-hr {