@dnb/eufemia 9.32.1 → 9.34.0

package/es/components/drawer/style/_drawer.scss

@@ -12,6 +12,20 @@
   --drawer-spacing-minus: -2rem; // should reflect --spacing-large
 }
 
+@mixin drawerSpacing {
+  padding: 0 var(--drawer-spacing); // should be 56px – but then the whole width should be larger
+
+  @include allAbove(x-large) {
+    padding: 0 calc(var(--drawer-spacing) * 1.75); // 3.5rem (56px)
+  }
+  @include allBelow(medium) {
+    padding: 0 calc(var(--drawer-spacing) / 1.333333); // 2rem (32px)
+  }
+  @include allBelow(small) {
+    padding: 0 calc(var(--drawer-spacing) / 2); // 1rem (16px)
+  }
+}
+
 .dnb-drawer {
   position: relative;
   max-height: 100vh;
@@ -28,7 +42,6 @@
   }
 
   @include defaultDropShadow();
-  //border-radius: 0.5rem;
   user-select: text;
   -webkit-user-select: text; // Safari / Touch fix
   border: none;
@@ -46,26 +59,17 @@
     flex-direction: column;
     z-index: 10;
 
-    /** Sets the color on scroll overflow (at the bottom) */
-    background-color: var(--modal-background-color, transparent);
+    /** 
+      NB: Do not use "overflow-x: hidden;" in here,
+      (overflowing one direction, will influence the other – we can't just have one at a time) 
+      To make the Drawer scroll, we use .dnb-scroll-view
+    */
 
     width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-  }
+    height: calc(100% - var(--header-height, 0));
 
-  &--spacing &__inner {
-    padding: 0 var(--drawer-spacing) 0; // should be 56px – but then the whole width should be larger
-
-    @include allAbove(x-large) {
-      padding: 0 calc(var(--drawer-spacing) * 1.75) 0; // 3.5rem (56px)
-    }
-    @include allBelow(medium) {
-      padding: 0 calc(var(--drawer-spacing) / 1.333333) 0; // 2rem (32px)
-    }
-    @include allBelow(small) {
-      padding: 0 calc(var(--drawer-spacing) / 2) 0; // 1rem (16px)
-    }
+    /** Sets the color on scroll overflow (at the bottom) */
+    background-color: var(--modal-background-color, transparent);
   }
 
   &__align--centered &__inner {
@@ -76,17 +80,10 @@
   &__content {
     position: relative;
     z-index: 1;
-    padding-bottom: calc(var(--drawer-spacing) * 2);
   }
-
   &--spacing &__content {
-    padding-bottom: calc(var(--drawer-spacing) * 2);
-
-    @include IS_SAFARI_MOBILE {
-      padding-bottom: calc(var(--drawer-spacing) * 8);
-    }
+    @include drawerSpacing();
   }
-
   &__align--center &__content {
     align-items: center;
     text-align: center;
@@ -192,6 +189,7 @@
   }
 
   &--spacing &__header {
+    @include drawerSpacing();
     .dnb-tabs {
       margin-top: var(--drawer-spacing);
     }
@@ -218,8 +216,8 @@
     z-index: 99; // below #dropdown and #date-picker
 
     // on large screens
-    margin: var(--drawer-spacing) calc(var(--drawer-spacing) * -1);
-    padding: 0 var(--drawer-spacing);
+    margin: var(--drawer-spacing) 0;
+    @include drawerSpacing();
   }
   &--spacing &__navigation.dnb-section#{&}__navigation--sticky {
     z-index: 2999; // above #dropdown and #date-picker and below #modal

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 * DNB Drawer
 *
@@ -264,12 +265,16 @@
   opacity: 0;
   visibility: hidden;
   -webkit-transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
-  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: opacity 200ms var(--easing-default);
+  transition: opacity 200ms var(--easing-default); }
   .dnb-tooltip--large {
     padding: 0.25rem 1rem; }
   .dnb-tooltip--animate_position {
     -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
-    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+    -webkit-transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default);
+    transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); }
   .dnb-tooltip--active {
     visibility: visible;
     /*
@@ -277,14 +282,20 @@
       also, use forwards because of the usage of visibility
     */
     -webkit-animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: show-tooltip 200ms var(--easing-default) forwards;
+            animation: show-tooltip 200ms var(--easing-default) forwards; }
   html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
     -webkit-animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: show-tooltip 1ms var(--easing-default) forwards;
+            animation: show-tooltip 1ms var(--easing-default) forwards; }
   .dnb-tooltip--hide {
     visibility: visible;
     -webkit-animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
-            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+    -webkit-animation: hide-tooltip 200ms var(--easing-default) forwards;
+            animation: hide-tooltip 200ms var(--easing-default) forwards; }
   .dnb-tooltip--hide.dnb-tooltip--no-animation {
     -webkit-animation: hide-tooltip 1ms linear forwards;
             animation: hide-tooltip 1ms linear forwards; }
@@ -450,7 +461,9 @@
   display: flex;
   opacity: 1;
   -webkit-transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1);
-  transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1); }
+  transition: height 400ms cubic-bezier(0.42, 0, 0, 1), opacity 400ms cubic-bezier(0.42, 0, 0, 1), margin 400ms cubic-bezier(0.42, 0, 0, 1), padding 400ms cubic-bezier(0.42, 0, 0, 1);
+  -webkit-transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
+  transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); }
   .dnb-form-status--hidden {
     will-change: height, opacity, margin, padding;
     width: 0;
@@ -1163,33 +1176,18 @@ button.dnb-button::-moz-focus-inner {
         -ms-flex-direction: column;
             flex-direction: column;
     z-index: 10;
-    /** Sets the color on scroll overflow (at the bottom) */
-    background-color: transparent;
-    background-color: var(--modal-background-color, transparent);
+    /** 
+      NB: Do not use "overflow-x: hidden;" in here,
+      (overflowing one direction, will influence the other – we can't just have one at a time) 
+      To make the Drawer scroll, we use .dnb-scroll-view
+    */
     width: 100%;
     height: 100%;
-    overflow-x: hidden; }
-  .dnb-drawer--spacing .dnb-drawer__inner {
-    padding: 0 2rem 0;
-    padding: 0 var(--drawer-spacing) 0; }
-    @media screen and (min-width: 72em) {
-      .dnb-drawer--spacing .dnb-drawer__inner {
-        padding: 0 3.5rem 0;
-        padding: 0 calc(2rem * 1.75) 0;
-        padding: 0 calc(var(--drawer-spacing)*1.75) 0;
-        padding: 0 calc(var(--drawer-spacing) * 1.75) 0; } }
-    @media screen and (max-width: 50em) {
-      .dnb-drawer--spacing .dnb-drawer__inner {
-        padding: 0 1.5rem 0;
-        padding: 0 calc(2rem / 1.333333) 0;
-        padding: 0 calc(var(--drawer-spacing)/1.33333) 0;
-        padding: 0 calc(var(--drawer-spacing) / 1.333333) 0; } }
-    @media screen and (max-width: 40em) {
-      .dnb-drawer--spacing .dnb-drawer__inner {
-        padding: 0 1rem 0;
-        padding: 0 calc(2rem / 2) 0;
-        padding: 0 calc(var(--drawer-spacing)/2) 0;
-        padding: 0 calc(var(--drawer-spacing) / 2) 0; } }
+    height: calc(100% - 0);
+    height: calc(100% - var(--header-height, 0));
+    /** Sets the color on scroll overflow (at the bottom) */
+    background-color: transparent;
+    background-color: var(--modal-background-color, transparent); }
   .dnb-drawer__align--centered .dnb-drawer__inner {
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -1199,22 +1197,28 @@ button.dnb-button::-moz-focus-inner {
             justify-content: center; }
   .dnb-drawer__content {
     position: relative;
-    z-index: 1;
-    padding-bottom: 4rem;
-    padding-bottom: calc(2rem * 2);
-    padding-bottom: calc(var(--drawer-spacing)*2);
-    padding-bottom: calc(var(--drawer-spacing) * 2); }
+    z-index: 1; }
   .dnb-drawer--spacing .dnb-drawer__content {
-    padding-bottom: 4rem;
-    padding-bottom: calc(2rem * 2);
-    padding-bottom: calc(var(--drawer-spacing)*2);
-    padding-bottom: calc(var(--drawer-spacing) * 2); }
-    @supports (-webkit-touch-callout: none) {
+    padding: 0 2rem;
+    padding: 0 var(--drawer-spacing); }
+    @media screen and (min-width: 72em) {
+      .dnb-drawer--spacing .dnb-drawer__content {
+        padding: 0 3.5rem;
+        padding: 0 calc(2rem * 1.75);
+        padding: 0 calc(var(--drawer-spacing)*1.75);
+        padding: 0 calc(var(--drawer-spacing) * 1.75); } }
+    @media screen and (max-width: 50em) {
+      .dnb-drawer--spacing .dnb-drawer__content {
+        padding: 0 1.5rem;
+        padding: 0 calc(2rem / 1.333333);
+        padding: 0 calc(var(--drawer-spacing)/1.33333);
+        padding: 0 calc(var(--drawer-spacing) / 1.333333); } }
+    @media screen and (max-width: 40em) {
       .dnb-drawer--spacing .dnb-drawer__content {
-        padding-bottom: 16rem;
-        padding-bottom: calc(2rem * 8);
-        padding-bottom: calc(var(--drawer-spacing)*8);
-        padding-bottom: calc(var(--drawer-spacing) * 8); } }
+        padding: 0 1rem;
+        padding: 0 calc(2rem / 2);
+        padding: 0 calc(var(--drawer-spacing)/2);
+        padding: 0 calc(var(--drawer-spacing) / 2); } }
   .dnb-drawer__align--center .dnb-drawer__content {
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -1317,9 +1321,30 @@ button.dnb-button::-moz-focus-inner {
   .dnb-drawer .dnb-drawer__header::after {
     top: -500%;
     height: 600%; }
-  .dnb-drawer--spacing .dnb-drawer__header .dnb-tabs {
-    margin-top: 2rem;
-    margin-top: var(--drawer-spacing); }
+  .dnb-drawer--spacing .dnb-drawer__header {
+    padding: 0 2rem;
+    padding: 0 var(--drawer-spacing); }
+    @media screen and (min-width: 72em) {
+      .dnb-drawer--spacing .dnb-drawer__header {
+        padding: 0 3.5rem;
+        padding: 0 calc(2rem * 1.75);
+        padding: 0 calc(var(--drawer-spacing)*1.75);
+        padding: 0 calc(var(--drawer-spacing) * 1.75); } }
+    @media screen and (max-width: 50em) {
+      .dnb-drawer--spacing .dnb-drawer__header {
+        padding: 0 1.5rem;
+        padding: 0 calc(2rem / 1.333333);
+        padding: 0 calc(var(--drawer-spacing)/1.33333);
+        padding: 0 calc(var(--drawer-spacing) / 1.333333); } }
+    @media screen and (max-width: 40em) {
+      .dnb-drawer--spacing .dnb-drawer__header {
+        padding: 0 1rem;
+        padding: 0 calc(2rem / 2);
+        padding: 0 calc(var(--drawer-spacing)/2);
+        padding: 0 calc(var(--drawer-spacing) / 2); } }
+    .dnb-drawer--spacing .dnb-drawer__header .dnb-tabs {
+      margin-top: 2rem;
+      margin-top: var(--drawer-spacing); }
   .dnb-drawer__body {
     padding-bottom: 4rem;
     padding-bottom: calc(2rem * 2);
@@ -1350,12 +1375,28 @@ button.dnb-button::-moz-focus-inner {
     position: sticky;
     top: 0;
     z-index: 99;
-    margin: 2rem -2rem;
-    margin: 2rem calc(2rem * -1);
-    margin: var(--drawer-spacing) calc(var(--drawer-spacing)*-1);
-    margin: var(--drawer-spacing) calc(var(--drawer-spacing) * -1);
+    margin: 2rem 0;
+    margin: var(--drawer-spacing) 0;
     padding: 0 2rem;
     padding: 0 var(--drawer-spacing); }
+    @media screen and (min-width: 72em) {
+      .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
+        padding: 0 3.5rem;
+        padding: 0 calc(2rem * 1.75);
+        padding: 0 calc(var(--drawer-spacing)*1.75);
+        padding: 0 calc(var(--drawer-spacing) * 1.75); } }
+    @media screen and (max-width: 50em) {
+      .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
+        padding: 0 1.5rem;
+        padding: 0 calc(2rem / 1.333333);
+        padding: 0 calc(var(--drawer-spacing)/1.33333);
+        padding: 0 calc(var(--drawer-spacing) / 1.333333); } }
+    @media screen and (max-width: 40em) {
+      .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
+        padding: 0 1rem;
+        padding: 0 calc(2rem / 2);
+        padding: 0 calc(var(--drawer-spacing)/2);
+        padding: 0 calc(var(--drawer-spacing) / 2); } }
   .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section.dnb-drawer__navigation--sticky {
     z-index: 2999; }
   .dnb-drawer .dnb-drawer__navigation--sticky::before {
@@ -2148,33 +2189,18 @@ html[data-dnb-modal-active] {
         -ms-flex-direction: column;
             flex-direction: column;
     z-index: 10;
-    /** Sets the color on scroll overflow (at the bottom) */
-    background-color: transparent;
-    background-color: var(--modal-background-color, transparent);
+    /** 
+      NB: Do not use "overflow-x: hidden;" in here,
+      (overflowing one direction, will influence the other – we can't just have one at a time) 
+      To make the Drawer scroll, we use .dnb-scroll-view
+    */
     width: 100%;
     height: 100%;
-    overflow-x: hidden; }
-  .dnb-drawer--spacing .dnb-drawer__inner {
-    padding: 0 2rem 0;
-    padding: 0 var(--drawer-spacing) 0; }
-    @media screen and (min-width: 72em) {
-      .dnb-drawer--spacing .dnb-drawer__inner {
-        padding: 0 3.5rem 0;
-        padding: 0 calc(2rem * 1.75) 0;
-        padding: 0 calc(var(--drawer-spacing)*1.75) 0;
-        padding: 0 calc(var(--drawer-spacing) * 1.75) 0; } }
-    @media screen and (max-width: 50em) {
-      .dnb-drawer--spacing .dnb-drawer__inner {
-        padding: 0 1.5rem 0;
-        padding: 0 calc(2rem / 1.333333) 0;
-        padding: 0 calc(var(--drawer-spacing)/1.33333) 0;
-        padding: 0 calc(var(--drawer-spacing) / 1.333333) 0; } }
-    @media screen and (max-width: 40em) {
-      .dnb-drawer--spacing .dnb-drawer__inner {
-        padding: 0 1rem 0;
-        padding: 0 calc(2rem / 2) 0;
-        padding: 0 calc(var(--drawer-spacing)/2) 0;
-        padding: 0 calc(var(--drawer-spacing) / 2) 0; } }
+    height: calc(100% - 0);
+    height: calc(100% - var(--header-height, 0));
+    /** Sets the color on scroll overflow (at the bottom) */
+    background-color: transparent;
+    background-color: var(--modal-background-color, transparent); }
   .dnb-drawer__align--centered .dnb-drawer__inner {
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -2184,22 +2210,28 @@ html[data-dnb-modal-active] {
             justify-content: center; }
   .dnb-drawer__content {
     position: relative;
-    z-index: 1;
-    padding-bottom: 4rem;
-    padding-bottom: calc(2rem * 2);
-    padding-bottom: calc(var(--drawer-spacing)*2);
-    padding-bottom: calc(var(--drawer-spacing) * 2); }
+    z-index: 1; }
   .dnb-drawer--spacing .dnb-drawer__content {
-    padding-bottom: 4rem;
-    padding-bottom: calc(2rem * 2);
-    padding-bottom: calc(var(--drawer-spacing)*2);
-    padding-bottom: calc(var(--drawer-spacing) * 2); }
-    @supports (-webkit-touch-callout: none) {
+    padding: 0 2rem;
+    padding: 0 var(--drawer-spacing); }
+    @media screen and (min-width: 72em) {
+      .dnb-drawer--spacing .dnb-drawer__content {
+        padding: 0 3.5rem;
+        padding: 0 calc(2rem * 1.75);
+        padding: 0 calc(var(--drawer-spacing)*1.75);
+        padding: 0 calc(var(--drawer-spacing) * 1.75); } }
+    @media screen and (max-width: 50em) {
+      .dnb-drawer--spacing .dnb-drawer__content {
+        padding: 0 1.5rem;
+        padding: 0 calc(2rem / 1.333333);
+        padding: 0 calc(var(--drawer-spacing)/1.33333);
+        padding: 0 calc(var(--drawer-spacing) / 1.333333); } }
+    @media screen and (max-width: 40em) {
       .dnb-drawer--spacing .dnb-drawer__content {
-        padding-bottom: 16rem;
-        padding-bottom: calc(2rem * 8);
-        padding-bottom: calc(var(--drawer-spacing)*8);
-        padding-bottom: calc(var(--drawer-spacing) * 8); } }
+        padding: 0 1rem;
+        padding: 0 calc(2rem / 2);
+        padding: 0 calc(var(--drawer-spacing)/2);
+        padding: 0 calc(var(--drawer-spacing) / 2); } }
   .dnb-drawer__align--center .dnb-drawer__content {
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -2302,9 +2334,30 @@ html[data-dnb-modal-active] {
   .dnb-drawer .dnb-drawer__header::after {
     top: -500%;
     height: 600%; }
-  .dnb-drawer--spacing .dnb-drawer__header .dnb-tabs {
-    margin-top: 2rem;
-    margin-top: var(--drawer-spacing); }
+  .dnb-drawer--spacing .dnb-drawer__header {
+    padding: 0 2rem;
+    padding: 0 var(--drawer-spacing); }
+    @media screen and (min-width: 72em) {
+      .dnb-drawer--spacing .dnb-drawer__header {
+        padding: 0 3.5rem;
+        padding: 0 calc(2rem * 1.75);
+        padding: 0 calc(var(--drawer-spacing)*1.75);
+        padding: 0 calc(var(--drawer-spacing) * 1.75); } }
+    @media screen and (max-width: 50em) {
+      .dnb-drawer--spacing .dnb-drawer__header {
+        padding: 0 1.5rem;
+        padding: 0 calc(2rem / 1.333333);
+        padding: 0 calc(var(--drawer-spacing)/1.33333);
+        padding: 0 calc(var(--drawer-spacing) / 1.333333); } }
+    @media screen and (max-width: 40em) {
+      .dnb-drawer--spacing .dnb-drawer__header {
+        padding: 0 1rem;
+        padding: 0 calc(2rem / 2);
+        padding: 0 calc(var(--drawer-spacing)/2);
+        padding: 0 calc(var(--drawer-spacing) / 2); } }
+    .dnb-drawer--spacing .dnb-drawer__header .dnb-tabs {
+      margin-top: 2rem;
+      margin-top: var(--drawer-spacing); }
   .dnb-drawer__body {
     padding-bottom: 4rem;
     padding-bottom: calc(2rem * 2);
@@ -2335,12 +2388,28 @@ html[data-dnb-modal-active] {
     position: sticky;
     top: 0;
     z-index: 99;
-    margin: 2rem -2rem;
-    margin: 2rem calc(2rem * -1);
-    margin: var(--drawer-spacing) calc(var(--drawer-spacing)*-1);
-    margin: var(--drawer-spacing) calc(var(--drawer-spacing) * -1);
+    margin: 2rem 0;
+    margin: var(--drawer-spacing) 0;
     padding: 0 2rem;
     padding: 0 var(--drawer-spacing); }
+    @media screen and (min-width: 72em) {
+      .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
+        padding: 0 3.5rem;
+        padding: 0 calc(2rem * 1.75);
+        padding: 0 calc(var(--drawer-spacing)*1.75);
+        padding: 0 calc(var(--drawer-spacing) * 1.75); } }
+    @media screen and (max-width: 50em) {
+      .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
+        padding: 0 1.5rem;
+        padding: 0 calc(2rem / 1.333333);
+        padding: 0 calc(var(--drawer-spacing)/1.33333);
+        padding: 0 calc(var(--drawer-spacing) / 1.333333); } }
+    @media screen and (max-width: 40em) {
+      .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
+        padding: 0 1rem;
+        padding: 0 calc(2rem / 2);
+        padding: 0 calc(var(--drawer-spacing)/2);
+        padding: 0 calc(var(--drawer-spacing) / 2); } }
   .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section.dnb-drawer__navigation--sticky {
     z-index: 2999; }
   .dnb-drawer .dnb-drawer__navigation--sticky::before {