feat: update #tabs for mobile view

dnbexperience · Feb 1, 2019 · 943c1fc · 943c1fc
1 parent 333f257
commit 943c1fc
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
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
@@ -284,6 +284,11 @@ exports[`Tabs scss have to match default theme snapshot 1`] = `
   text-align: center;
   color: var(--color-sea-green); }
 
+@media screen and (max-width: 40em) {
+  .dnb-tabs__tabs .dnb-tablink {
+    text-align: left;
+    padding: 0.5rem 1rem; } }
+
 .dnb-tabs__tabs .dnb-tablink:not([disabled]):hover {
   background-color: var(--color-mint-green-50); }
   .dnb-tabs__tabs .dnb-tablink:not([disabled]):hover::after {

diff --git a/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss b/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss
@@ -36,7 +36,6 @@
 
       margin: 0;
       margin-left: 4.5rem;
-      // padding: 0.25rem 0.1875rem; /* 1/16*4 */
       padding: 0.25rem 0.125rem; /* 1/16*4 */
 
       background-color: transparent;

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
@@ -26,6 +26,10 @@
 
         color: var(--color-sea-green);
       }
+      @include allBelow(small) {
+        text-align: left;
+        padding: 0.5rem 1rem;
+      }
 
       // hover
       &:not([disabled]):hover {