npm - @scania/tegel - Versions diffs - 0.0.1-beta.7 → 0.0.2 - Mend

@scania/tegel 0.0.1-beta.7 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (491) hide show

package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.css CHANGED Viewed

@@ -14,7 +14,7 @@
   position: relative;
 }
 .sdds-inline-tabs-main {
-  background-color: var(--sdds-inline-tabs-main-bg);
+  background-color: var(--sdds-inline-tabs-main-background);
   padding: 24px 24px 48px;
 }
 .sdds-inline-tabs-wrapper {
@@ -32,7 +32,7 @@
   border: 0;
   position: absolute;
   top: 0;
-  background-color: var(--sdds-inlline-tabs-scroll-btn-bg);
+  background-color: var(--sdds-inline-tabs-scroll-btn-background);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -44,15 +44,18 @@
   pointer-events: all;
 }
 .sdds-inline-tabs--forward:hover, .sdds-inline-tabs--back:hover {
-  background-color: var(--sdds-inline-tabs-scroll-btn-hover-bg);
+  background-color: var(--sdds-inline-tabs-scroll-btn-background-hover);
 }
 .sdds-inline-tabs--forward:active, .sdds-inline-tabs--back:active {
-  background-color: var(--sdds-inline-tabs-scroll-btn-active-bg);
+  background-color: var(--sdds-inline-tabs-scroll-btn-background-active);
 }
 .sdds-inline-tabs--forward:focus, .sdds-inline-tabs--back:focus {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
+.sdds-inline-tabs--forward svg, .sdds-inline-tabs--back svg {
+  fill: var(--sdds-inline-tabs-scroll-btn-color);
+}
 .sdds-inline-tabs--back {
   left: 0;
 }
@@ -65,7 +68,7 @@
   cursor: pointer;
   border: 0;
   color: var(--sdds-inline-tabs-tab-color);
-  background-color: var(--sdds-inline-tabs-tab-bg);
+  background-color: var(--sdds-inline-tabs-tab-background);
   padding: 16px;
   min-width: 142px;
   text-decoration: none;
@@ -93,12 +96,12 @@
   width: 0;
   margin-right: auto;
   height: 2px;
-  background-color: var(--sdds-inline-tabs-tab-indicator-bg);
+  background-color: var(--sdds-inline-tabs-tab-indicator-background);
   transition: width 0.15s ease-in-out;
 }
 .sdds-inline-tabs--tab:hover {
-  background-color: var(--sdds-inline-tabs-tab-hover-bg);
-  color: var(--sdds-inline-tabs-tab-hover-color);
+  background-color: var(--sdds-inline-tabs-tab-background-hover);
+  color: var(--sdds-inline-tabs-tab-color-hover);
   text-decoration: none;
 }
 .sdds-inline-tabs--tab:focus {
@@ -106,8 +109,8 @@
   outline-offset: -2px;
 }
 .sdds-inline-tabs--tab__active {
-  background-color: var(--sdds-inline-tabs-tab-active-bg);
-  color: var(--sdds-inline-tabs-tab-active-color);
+  background-color: var(--sdds-inline-tabs-tab-background-active);
+  color: var(--sdds-inline-tabs-tab-color-active);
   cursor: initial;
   border-right: 1px solid transparent !important;
 }
@@ -115,16 +118,16 @@
   opacity: 1;
 }
 .sdds-inline-tabs--tab__active:hover {
-  background-color: var(--sdds-inline-tabs-tab-active-bg);
+  background-color: var(--sdds-inline-tabs-tab-background-active);
 }
 .sdds-inline-tabs--tab__active::after {
   width: calc(100% + 2px);
   left: -1px;
-  background-color: var(--sdds-inline-tabs-tab-active-indicator-bg);
+  background-color: var(--sdds-inline-tabs-tab-indicator-background-active);
 }
 .sdds-inline-tabs--tab__active::before {
   content: " ";
-  background-color: var(--sdds-inline-tabs-tab-active-bg);
+  background-color: var(--sdds-inline-tabs-tab-background-active);
   width: 1px;
   top: 0;
   bottom: 0;
@@ -137,23 +140,17 @@
 }
 .sdds-inline-tabs--tab:disabled, .sdds-inline-tabs--tab__disabled {
   cursor: initial;
-  color: var(--sdds-inline-tabs-tab-color);
+  color: var(--sdds-navigation-tabs-tab-color-disabled);
   pointer-events: none;
 }
 .sdds-inline-tabs--tab:disabled > *, .sdds-inline-tabs--tab__disabled > * {
   opacity: 0.16;
 }
-.sdds-inline-tabs-primary .sdds-inline-tabs--tab__active {
-  background-color: var(--sdds-inline-tabs-tab-active-bg);
-}
-.sdds-inline-tabs-primary .sdds-inline-tabs-main {
-  background-color: var(--sdds-inline-tabs-main-bg);
+.sdds-inline-tabs--tab__active {
+  background-color: var(--sdds-inline-tabs-tab-background-active);
 }
-.sdds-inline-tabs-secondary .sdds-inline-tabs--tab__active {
-  background-color: var(--sdds-inline-tabs-tab-active-ongrey-bg);
-}
-.sdds-inline-tabs-secondary .sdds-inline-tabs-main {
-  background-color: var(--sdds-inline-tabs-main-ongrey-bg);
+.sdds-inline-tabs-main {
+  background-color: var(--sdds-inline-tabs-main-background);
 }