fix: enhance .dnb-section support in #tabs

dnbexperience · May 6, 2019 · b0228fa · b0228fa
1 parent 80bb8fb
commit b0228fa
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/packages/dnb-ui-lib/src/components/tabs/Example.js b/packages/dnb-ui-lib/src/components/tabs/Example.js
@@ -64,7 +64,7 @@ render(<Tabs data={data}>
 />
           `}
         </ComponentBox>
-        <ComponentBox caption="eft aligned tabs, using React Components only">
+        <ComponentBox caption="Left aligned tabs, using React Components only">
           {/* @jsx */ `
 <Tabs section_style="mint-green">
   <Tabs.Content title="First">

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
@@ -206,12 +206,15 @@ exports[`Tabs scss have to match default theme snapshot 1`] = `
 /*
  * Utilities
  */
-.dnb-tabs__tabs:not(.dnb-section)::after {
+.dnb-tabs__tabs::before {
   background-color: var(--color-mint-green-50);
   box-shadow: 100vw 0 0 0 var(--color-mint-green-50); }
 
+.dnb-tabs__tabs.dnb-section::before {
+  z-index: 0; }
+
 @media screen and (max-width: 40em) {
-  .dnb-tabs__tabs:not(.dnb-section)::before {
+  .dnb-tabs__tabs:not(.dnb-section)::after {
     content: '';
     position: absolute;
     z-index: -1;
@@ -222,9 +225,6 @@ exports[`Tabs scss have to match default theme snapshot 1`] = `
     background-color: var(--color-mint-green-50);
     box-shadow: 100vw 0 0 0 var(--color-mint-green-50); } }
 
-.dnb-tabs__tabs.dnb-section::after {
-  height: 100%; }
-
 .dnb-tabs__tabs__tablist {
   margin: 0 -1rem;
   padding: 0 1rem; }
@@ -389,7 +389,7 @@ exports[`Tabs scss have to match snapshot 1`] = `
       height: 1px; }
   .dnb-tabs__tabs .dnb-tablink:first-child {
     margin-left: 0; }
-  .dnb-tabs__tabs::after {
+  .dnb-tabs__tabs::before {
     content: '';
     position: absolute;
     z-index: -1;

diff --git a/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss b/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss
@@ -73,7 +73,7 @@
       margin-left: 0;
     }
 
-    &::after {
+    &::before {
       content: '';
       position: absolute;
       z-index: -1;

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
@@ -7,12 +7,15 @@
 
 .dnb-tabs {
   &__tabs {
-    &:not(.dnb-section)::after {
+    &::before {
       background-color: var(--color-mint-green-50);
       box-shadow: 100vw 0 0 0 var(--color-mint-green-50);
     }
+    &.dnb-section::before {
+      z-index: 0;
+    }
     @include allBelow(small) {
-      &:not(.dnb-section)::before {
+      &:not(.dnb-section)::after {
         content: '';
         position: absolute;
         z-index: -1;
@@ -24,9 +27,6 @@
         box-shadow: 100vw 0 0 0 var(--color-mint-green-50);
       }
     }
-    &.dnb-section::after {
-      height: 100%;
-    }
 
     &__tablist {
       // Only used on to visualize the tab ring nicer