@dnb/eufemia 9.32.0 → 9.33.0

package/style/elements/lists.scss

@@ -105,8 +105,11 @@
   }
 }
 @mixin dlStyle() {
-  &:not([class*='dnb-space']) {
-    margin: 0;
+  &:not([class*='dnb-space__top']) {
+    margin-top: 0;
+  }
+  &:not([class*='dnb-space__bottom']) {
+    margin-bottom: 0;
   }
   padding: 0;
 
@@ -130,8 +133,8 @@
     // In case we really want / need to have a indented definition content
     // margin-left: 2rem;
   }
-  & > dl,
-  &:not([class*='dnb-space']) > dl {
+  & > dd > dl,
+  &:not([class*='dnb-space']) > dd > dl {
     margin-top: 1.5rem;
     margin-left: 2rem;
   }
@@ -139,23 +142,34 @@
   // Inline
   @include allAbove(small) {
     &__direction--horizontal {
+      // We can not use gap: 0.5rem because of our wrapper "__item"
       display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
+      flex-wrap: wrap;
 
-      & dt,
-      & dd {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
       & dt {
         margin-right: 1rem;
-        max-width: 60ch;
+        max-width: 40%;
+      }
+
+      & dd {
+        width: calc(60% - 1rem); // minus margin-right and the gap
+      }
+
+      & dt,
+      & dd,
+      & dd ~ dt {
+        margin-top: 0.5rem;
+        margin-bottom: 0;
+        &:first-of-type {
+          margin-top: 0;
+        }
       }
     }
 
-    &__item {
-      display: flex;
+    dd#{&}__item {
+      width: 100%;
+      height: 0;
+      margin: 0;
     }
   }
 }
@@ -225,8 +239,6 @@
     @include dlSpacing();
   }
 }
-// *:not([class^='dnb-']) > {
-// }
 
 // Un-styled list helper
 @mixin unstyledList() {

package/style/elements/ui-spacing.scss

@@ -5,8 +5,10 @@
  */
 
 @mixin defaultSpacing() {
-  &:not([class*='dnb-space']) {
+  &:not([class*='dnb-space__top']) {
     margin-top: 0;
+  }
+  &:not([class*='dnb-space__bottom']) {
     margin-bottom: 1.5rem;
   }
 }

package/style/themes/theme-eiendom/dnb-theme-eiendom.css

@@ -707,9 +707,12 @@ a.dnb-button {
 .dnb-core-style .dnb-spacing .dnb-h--x-small:not([class*='space__bottom']) {
   margin-bottom: 1rem; }
 
-.dnb-spacing .dnb-p:not([class*='dnb-space']),
-.dnb-core-style .dnb-spacing .dnb-p:not([class*='dnb-space']) {
-  margin-top: 0;
+.dnb-spacing .dnb-p:not([class*='dnb-space__top']),
+.dnb-core-style .dnb-spacing .dnb-p:not([class*='dnb-space__top']) {
+  margin-top: 0; }
+
+.dnb-spacing .dnb-p:not([class*='dnb-space__bottom']),
+.dnb-core-style .dnb-spacing .dnb-p:not([class*='dnb-space__bottom']) {
   margin-bottom: 1.5rem; }
 
 /*
@@ -838,8 +841,10 @@ a.dnb-button {
     color: #a5e1d2;
     color: var(--color-mint-green); }
 
-.dnb-spacing .dnb-blockquote:not([class*='dnb-space']) {
-  margin-top: 0;
+.dnb-spacing .dnb-blockquote:not([class*='dnb-space__top']) {
+  margin-top: 0; }
+
+.dnb-spacing .dnb-blockquote:not([class*='dnb-space__bottom']) {
   margin-bottom: 1.5rem; }
 
 .dnb-spacing .dnb-blockquote p:last-child {
@@ -984,8 +989,10 @@ a.dnb-button {
   line-height: var(--line-height-basis);
   color: currentColor;
   color: var(--theme-color-black-80, currentColor); }
-  .dnb-dl:not([class*='dnb-space']) {
-    margin: 0; }
+  .dnb-dl:not([class*='dnb-space__top']) {
+    margin-top: 0; }
+  .dnb-dl:not([class*='dnb-space__bottom']) {
+    margin-bottom: 0; }
   .dnb-dl dt {
     margin-top: 1rem;
     padding: 0;
@@ -996,8 +1003,8 @@ a.dnb-button {
   .dnb-dl dd {
     padding: 0;
     margin: 0.5rem 0 1rem; }
-  .dnb-dl > dl,
-  .dnb-dl:not([class*='dnb-space']) > dl {
+  .dnb-dl > dd > dl,
+  .dnb-dl:not([class*='dnb-space']) > dd > dl {
     margin-top: 1.5rem;
     margin-left: 2rem; }
   @media screen and (min-width: 40em) {
@@ -1005,27 +1012,33 @@ a.dnb-button {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
-      -webkit-box-orient: vertical;
-      -webkit-box-direction: normal;
-          -ms-flex-direction: column;
-              flex-direction: column;
-      grid-gap: 0.5rem;
-      gap: 0.5rem; }
-      .dnb-dl__direction--horizontal dt,
-      .dnb-dl__direction--horizontal dd {
-        margin-top: 0;
-        margin-bottom: 0; }
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap; }
       .dnb-dl__direction--horizontal dt {
         margin-right: 1rem;
-        max-width: 60ch; }
-    .dnb-dl__item {
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex; } }
+        max-width: 40%; }
+      .dnb-dl__direction--horizontal dd {
+        width: calc(60% - 1rem); }
+      .dnb-dl__direction--horizontal dt,
+      .dnb-dl__direction--horizontal dd,
+      .dnb-dl__direction--horizontal dd ~ dt {
+        margin-top: 0.5rem;
+        margin-bottom: 0; }
+        .dnb-dl__direction--horizontal dt:first-of-type,
+        .dnb-dl__direction--horizontal dd:first-of-type,
+        .dnb-dl__direction--horizontal dd ~ dt:first-of-type {
+          margin-top: 0; }
+    .dnb-dl dd.dnb-dl__item {
+      width: 100%;
+      height: 0;
+      margin: 0; } }
 
-.dnb-spacing .dnb-ul:not([class*='dnb-space']),
-.dnb-spacing .dnb-ol:not([class*='dnb-space']) {
-  margin-top: 0;
+.dnb-spacing .dnb-ul:not([class*='dnb-space__top']),
+.dnb-spacing .dnb-ol:not([class*='dnb-space__top']) {
+  margin-top: 0; }
+
+.dnb-spacing .dnb-ul:not([class*='dnb-space__bottom']),
+.dnb-spacing .dnb-ol:not([class*='dnb-space__bottom']) {
   margin-bottom: 1.5rem; }
 
 .dnb-spacing .dnb-ul > li,
@@ -1047,8 +1060,10 @@ a.dnb-button {
 .dnb-spacing .dnb-ol:not([class*='dnb-space']) li > ol {
   margin-top: -0.5rem; }
 
-.dnb-spacing .dnb-dl:not([class*='dnb-space']) {
-  margin-top: 0;
+.dnb-spacing .dnb-dl:not([class*='dnb-space__top']) {
+  margin-top: 0; }
+
+.dnb-spacing .dnb-dl:not([class*='dnb-space__bottom']) {
   margin-bottom: 1.5rem; }
 
 .dnb-unstyled-list {
@@ -1143,8 +1158,9 @@ a.dnb-button {
     margin: 0; }
   .dnb-pre pre {
     padding: 1rem; }
-  .dnb-pre .dnb-spacing pre:not([class*='dnb-space']) {
-    margin-top: 0;
+  .dnb-pre .dnb-spacing pre:not([class*='dnb-space__top']) {
+    margin-top: 0; }
+  .dnb-pre .dnb-spacing pre:not([class*='dnb-space__bottom']) {
     margin-bottom: 1.5rem; }
   .dnb-pre.dnb-pre--focus {
     --border-color: var(--color-sea-green);
@@ -1158,8 +1174,10 @@ a.dnb-button {
         -webkit-box-shadow: 0 0 0 0.25rem var(--color-sea-green);
                 box-shadow: 0 0 0 0.25rem var(--color-sea-green); } }
 
-.dnb-spacing .dnb-pre:not([class*='dnb-space']) {
-  margin-top: 0;
+.dnb-spacing .dnb-pre:not([class*='dnb-space__top']) {
+  margin-top: 0; }
+
+.dnb-spacing .dnb-pre:not([class*='dnb-space__bottom']) {
   margin-bottom: 1.5rem; }
 
 .dnb-skeleton > .dnb-code {
@@ -1276,8 +1294,10 @@ a.dnb-button {
     background-size: 100% 3px;
     background-color: transparent; }
 
-.dnb-spacing .dnb-hr:not([class*='dnb-space']) {
-  margin-top: 0;
+.dnb-spacing .dnb-hr:not([class*='dnb-space__top']) {
+  margin-top: 0; }
+
+.dnb-spacing .dnb-hr:not([class*='dnb-space__bottom']) {
   margin-bottom: 1.5rem; }
 
 .dnb-selection::-moz-selection, .dnb-selection ::-moz-selection, [class^='dnb-']::-moz-selection, [class^='dnb-'] ::-moz-selection {
@@ -5531,6 +5551,45 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
     background-color: #333;
     background-color: var(--color-black-80); }
 
+/*
+ * Upload theme
+ *
+ */
+.dnb-upload {
+  background-color: #fff;
+  background-color: var(--color-white);
+  border-radius: 0.5rem; }
+  .dnb-upload__outline {
+    stroke: #007272;
+    stroke: var(--color-sea-green);
+    border-radius: 0.5rem;
+    stroke-width: 0.1875rem; }
+  .dnb-upload--active .dnb-upload__outline {
+    stroke: #14555a;
+    stroke: var(--color-emerald-green);
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px;
+    inset: -1px;
+    width: calc(100% + 2px);
+    height: calc(100% + 2px); }
+    .dnb-upload--active .dnb-upload__outline rect {
+      stroke-width: 0.25rem;
+      stroke-dasharray: 0; }
+  .dnb-upload--active {
+    background-color: #f2f4ec;
+    background-color: var(--color-pistachio); }
+  .dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon {
+    color: #dc2a2a;
+    color: var(--color-fire-red); }
+  .dnb-upload__text.dnb-p {
+    color: #737373;
+    color: var(--color-black-55); }
+  .dnb-upload__subtitle.dnb-p {
+    color: #737373;
+    color: var(--color-black-55); }
+
 /*
 * PaymentCard theme
 *