fixup! #tabs and #step-indicator style refactoring regarding dummy width

dnbexperience · Jan 22, 2019 · b05457e · b05457e
1 parent a61ae07
commit b05457e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 16 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
@@ -286,13 +286,12 @@ exports[`Tabs scss have to match default theme snapshot 1`] = `
   text-align: center;
   color: var(--color-sea-green); }
 
-.dnb-tabs__tabs .dnb-tablink::after {
-  height: 3px;
-  border-radius: 1.5px;
-  background-color: 3px solid transparent; }
-
 .dnb-tabs__tabs .dnb-tablink:not([disabled]):hover {
-  background-color: var(--color-mint-green); }
+  background-color: var(--color-mint-green-50); }
+  .dnb-tabs__tabs .dnb-tablink:not([disabled]):hover::after {
+    height: 2px;
+    border-radius: 1px;
+    background-color: var(--color-sea-green); }
 
 .dnb-tabs__tabs .dnb-tablink[disabled] {
   cursor: not-allowed; }
@@ -303,6 +302,8 @@ exports[`Tabs scss have to match default theme snapshot 1`] = `
   color: var(--color-emerald-green); }
 
 .dnb-tabs__tabs .dnb-tablink:not([disabled]):active::after, .dnb-tabs__tabs .dnb-tablink:not([disabled]).selected::after {
+  height: 3px;
+  border-radius: 1.5px;
   background-color: var(--color-sea-green); }
 
 .dnb-tabs__tabs .dnb-tablink:not([disabled]).selected .dnb-tablink-title {
@@ -489,7 +490,7 @@ exports[`Tabs scss have to match snapshot 1`] = `
     z-index: 1;
     margin: 0;
     margin-left: 4.5rem;
-    padding: 0.25rem 0;
+    padding: 0.25rem 0.125rem;
     /* 1/16*4 */
     background-color: transparent;
     border-bottom: 1px solid transparent;

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,8 @@
 
       margin: 0;
       margin-left: 4.5rem;
-      padding: 0.25rem 0; /* 1/16*4 */
+      // padding: 0.25rem 0.1875rem; /* 1/16*4 */
+      padding: 0.25rem 0.125rem; /* 1/16*4 */
 
       background-color: transparent;
       border-bottom: 1px solid 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
@@ -27,16 +27,14 @@
         color: var(--color-sea-green);
       }
 
-      // make sure we alway have a height of 3
-      &::after {
-        height: 3px;
-        border-radius: 1.5px;
-        background-color: 3px solid transparent;
-      }
-
       // hover
       &:not([disabled]):hover {
-        background-color: var(--color-mint-green);
+        background-color: var(--color-mint-green-50);
+        &::after {
+          height: 2px;
+          border-radius: 1px;
+          background-color: var(--color-sea-green);
+        }
       }
 
       // disabled
@@ -54,6 +52,8 @@
           color: var(--color-emerald-green);
         }
         &::after {
+          height: 3px;
+          border-radius: 1.5px;
           background-color: var(--color-sea-green);
         }
       }