fix: fix failing postcss of calc usage with minus values

dnbexperience · Oct 22, 2020 · 959096c · 959096c
1 parent d77736b
commit 959096c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -1327,6 +1327,7 @@ button.dnb-button::-moz-focus-inner {
 :root {
   --modal-z-index: 3000;
   --modal-spacing: 2rem;
+  --modal-spacing-minus: -2rem;
   --modal-min-width: 20rem;
   --modal-avg-width: 60vw;
   --modal-max-width: 60rem;
@@ -1497,12 +1498,12 @@ button.dnb-button::-moz-focus-inner {
     padding-top: calc(var(--modal-spacing) * 0.75); }
   .dnb-modal__wrapper__inner {
     padding-bottom: calc(var(--modal-spacing) * 2);
-    margin-bottom: calc(var(--modal-spacing) * -1.75); }
+    margin-bottom: calc(var(--modal-spacing-minus) * 1.75); }
     @media screen and (max-width: 40em) {
       .dnb-modal__wrapper__inner.dnb-section::after {
         min-height: calc( 100vh - var(--modal-content-top) - calc(var(--modal-spacing) * 1.5)); } }
   .dnb-modal__content--drawer .dnb-modal__wrapper__inner {
-    margin-bottom: calc(var(--modal-spacing) * -2); }
+    margin-bottom: calc(var(--modal-spacing-minus) * 2); }
     .dnb-modal__content--drawer .dnb-modal__wrapper__inner.dnb-section::after {
       min-height: calc( 100vh - var(--modal-drawer-content-top) - calc(var(--modal-spacing) * 2)); }
   .dnb-modal__close-button {

diff --git a/packages/dnb-ui-lib/src/components/modal/style/_modal.scss b/packages/dnb-ui-lib/src/components/modal/style/_modal.scss
@@ -8,6 +8,7 @@
 :root {
   --modal-z-index: 3000;
   --modal-spacing: 2rem; // should reflect --spacing-large
+  --modal-spacing-minus: -2rem; // should reflect --spacing-large
 
   // we do this because SCSS fails by using min(100vw, 50rem) = "Incompatible units: 'rem' and 'vw'"
   --modal-min-width: 20rem; // under 40em, because of spacing and later mobile fullscreen
@@ -247,7 +248,7 @@
 
   &__wrapper__inner {
     padding-bottom: calc(var(--modal-spacing) * 2);
-    margin-bottom: calc(var(--modal-spacing) * -1.75);
+    margin-bottom: calc(var(--modal-spacing-minus) * 1.75);
 
     @include allBelow(small) {
       &.dnb-section::after {
@@ -259,7 +260,7 @@
     }
   }
   &__content--drawer &__wrapper__inner {
-    margin-bottom: calc(var(--modal-spacing) * -2);
+    margin-bottom: calc(var(--modal-spacing-minus) * 2);
 
     &.dnb-section::after {
       min-height: calc(