@dnb/eufemia 10.6.0 → 10.8.0

package/es/style/dnb-ui-components.css

@@ -456,6 +456,12 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
   --accordion-border-width: 0.0625rem;
   --accordion-border-radius: 0.25rem;
   --accordion-easing: var(--easing-default);
+  --accordion-header-margin-vertical: 1.5rem;
+  --accordion-header-margin-vertical--description: 1rem;
+  --accordion-header-wrapper-margin: 2rem;
+  --accordion-header-wrapper-margin--icon-right: 1rem;
+  --accordion-header-icon-gutter: 1rem;
+  --accordion-header-icon-margin: 1rem;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -486,21 +492,18 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
   display: flex;
   flex-direction: column;
   width: 100%;
-  margin: 1.5rem 0 1.5rem 2rem;
+  margin: var(--accordion-header-margin-vertical) var(--accordion-header-wrapper-margin) var(--accordion-header-margin-vertical) 0;
 }
 .dnb-accordion__header--description .dnb-accordion__header__wrapper {
-  margin: 1rem 0 1rem 2rem;
-}
-.dnb-accordion__header__icon + .dnb-accordion__header__wrapper {
-  margin-left: 0;
-  margin-right: 2rem;
+  margin-top: var(--accordion-header-margin-vertical--description);
+  margin-bottom: var(--accordion-header-margin-vertical--description);
 }
 .dnb-accordion__header__container {
   margin: 0 1rem;
 }
 .dnb-accordion__header__icon {
   align-self: flex-start;
-  margin: 1.5rem 1rem;
+  margin: var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);
   font-size: var(--font-size-small);
   line-height: var(--line-height-small);
   transition: transform 400ms var(--accordion-easing);
@@ -508,24 +511,26 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 .dnb-accordion__header--description .dnb-accordion__header__icon {
   margin-top: 1rem;
 }
-.dnb-accordion__header__icon--right {
+.dnb-accordion__header--icon-right {
   justify-content: space-between;
 }
-.dnb-accordion__header__icon--right .dnb-accordion__header__icon {
+.dnb-accordion__header--icon-right .dnb-accordion__header__icon {
+  margin-right: var(--accordion-header-icon-margin);
+  margin-left: var(--accordion-header-icon-gutter);
   order: 3;
 }
-.dnb-accordion__header__icon--right .dnb-accordion__header__container {
+.dnb-accordion__header--icon-right .dnb-accordion__header__container {
   order: 1;
 }
-.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper {
+.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper {
   order: 2;
-  margin-left: 1rem;
-  margin-right: 1rem;
+  margin-right: 0;
+  margin-left: var(--accordion-header-wrapper-margin--icon-right);
 }
-.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper + .dnb-accordion__header__container {
+.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper + .dnb-accordion__header__container {
   margin-right: 0;
 }
-.dnb-accordion__header__icon--right .dnb-accordion__header__container + .dnb-accordion__header__wrapper {
+.dnb-accordion__header--icon-right .dnb-accordion__header__container + .dnb-accordion__header__wrapper {
   margin-left: 0;
 }
 .dnb-accordion__header__title {
@@ -543,7 +548,7 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 .dnb-accordion__header__description + .dnb-accordion__header__title {
   margin-top: 0.25rem;
 }
-.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__icon {
+.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__icon:not(.dnb-accordion__header__icon--no-animation) {
   transform: rotate(-180deg);
 }
 .dnb-accordion__content {
@@ -579,7 +584,7 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
   }
 }
 @media screen and (min-width: 40em) {
-  .dnb-accordion-group--single-container .dnb-accordion > .dnb-accordion__header .dnb-accordion__header__icon {
+  .dnb-accordion-group--single-container .dnb-accordion > .dnb-accordion__header .dnb-accordion__header__icon:not(.dnb-accordion__header__icon--no-animation) {
     transform: rotate(-90deg);
   }
 }
@@ -3008,7 +3013,6 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
 .dnb-form-label[for]:not([disabled]) {
   -webkit-user-select: none;
           user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;
@@ -4178,6 +4182,13 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
   flex-wrap: wrap;
   align-items: center;
 }
+.dnb-pagination__page, .dnb-pagination__loadbar {
+  min-height: 6rem;
+}
+.dnb-pagination__bar {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
 .dnb-pagination--left .dnb-pagination__bar {
   justify-content: flex-start;
 }
@@ -4223,12 +4234,14 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  min-height: inherit;
 }
 .dnb-pagination__indicator__inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  animation: show-page 300ms ease-out forwards;
 }
 .dnb-pagination__dots {
   align-self: flex-end;
@@ -4254,6 +4267,16 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
   margin-right: 1.5rem;
 }
 
+@keyframes show-page {
+  from {
+    transform: translate3d(0, -8px, 0);
+    opacity: 0.1;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
 /*
  * ProgressIndicator component
  *
@@ -4675,7 +4698,7 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   top: 0;
   width: 100vw;
   height: 100%;
-  color: var(--color-mint-green-12);
+  color: var(--color-mint-green-12); /** deprecated: should be white in v11 */
   background-color: currentcolor;
   box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor;
 }