fix: make .dnb-section helper class avoid the horizontal scroller i…

…ssue
dnbexperience · Mar 1, 2019 · 41e989c · 41e989c
1 parent 7c6df4e
commit 41e989c
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 20 deletions.
diff --git a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -208,13 +208,20 @@ exports[`Tabs scss have to match default theme snapshot 1`] = `
  * Utilities
  */
 .dnb-tabs__tabs::after {
-  border-bottom: 1px solid var(--color-mint-green); }
-  @media screen and (max-width: 40em) {
-    .dnb-tabs__tabs::after {
-      top: 0;
-      bottom: auto;
-      height: 100%;
-      border-top: 1px solid var(--color-mint-green); } }
+  background-color: var(--color-mint-green);
+  box-shadow: 100vw 0 0 0 var(--color-mint-green); }
+
+@media screen and (max-width: 40em) {
+  .dnb-tabs__tabs::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    left: -50vw;
+    top: 0;
+    width: 100vw;
+    height: 1px;
+    background-color: var(--color-mint-green);
+    box-shadow: 100vw 0 0 0 var(--color-mint-green); } }
 
 .dnb-tabs__tabs .dnb-tablink-title {
   font-weight: var(--font-weight-book);
@@ -821,9 +828,8 @@ exports[`Tabs scss have to match snapshot 1`] = `
     position: absolute;
     z-index: -1;
     left: -50vw;
-    right: -50vw;
     bottom: 0;
-    width: 200vw;
+    width: 100vw;
     height: 1px; }
   @media screen and (max-width: 50em) {
     .dnb-tabs__tabs .dnb-tablink {

diff --git a/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss b/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss
@@ -85,9 +85,8 @@
       position: absolute;
       z-index: -1;
       left: -50vw;
-      right: -50vw;
       bottom: 0;
-      width: 200vw;
+      width: 100vw;
       height: 1px;
     }
 

diff --git a/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss b/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss
@@ -8,12 +8,20 @@
 .dnb-tabs {
   &__tabs {
     &::after {
-      border-bottom: 1px solid var(--color-mint-green);
-      @include allBelow(small) {
+      background-color: var(--color-mint-green);
+      box-shadow: 100vw 0 0 0 var(--color-mint-green);
+    }
+    @include allBelow(small) {
+      &::before {
+        content: '';
+        position: absolute;
+        z-index: -1;
+        left: -50vw;
         top: 0;
-        bottom: auto;
-        height: 100%;
-        border-top: 1px solid var(--color-mint-green);
+        width: 100vw;
+        height: 1px;
+        background-color: var(--color-mint-green);
+        box-shadow: 100vw 0 0 0 var(--color-mint-green);
       }
     }
 

diff --git a/packages/dnb-ui-lib/src/style/core/helper-classes.scss b/packages/dnb-ui-lib/src/style/core/helper-classes.scss
@@ -33,11 +33,13 @@
     position: absolute;
     z-index: -1;
     left: -50vw;
-    right: -50vw;
     top: 0;
-    width: 200vw;
+    width: 100vw;
     height: 100%;
     background-color: var(--color-mint-green-12);
+
+    // we use box-shadow to avoid a horizontal scrollbar
+    box-shadow: 100vw 0 0 0 var(--color-mint-green-12);
   }
 }
 .dnb-section--spacing {
@@ -47,6 +49,7 @@
 .dnb-section--white {
   &::after {
     background-color: var(--color-white);
+    box-shadow: 100vw 0 0 0 var(--color-white);
   }
 }
 

diff --git a/packages/dnb-ui-lib/stories/helpers.js b/packages/dnb-ui-lib/stories/helpers.js
@@ -20,9 +20,10 @@ export const Box = styled.div`
   &::after {
     content: '';
     position: absolute;
-    right: -50vw;
+    left: -50vw;
     bottom: 0;
-    width: 200vw;
+    width: 100vw;
     border-bottom: dashed 1px rgb(0, 200, 200);
+    box-shadow: 100vw 0 0 0 rgb(0, 200, 200);
   }
 `