diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss index 1ee524804f..6e3d38282c 100644 --- a/packages/css/src/components/tabs/tabs.scss +++ b/packages/css/src/components/tabs/tabs.scss @@ -22,6 +22,11 @@ } .amsterdam-tabs__list { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + overflow-x: auto; + overflow-y: hidden; position: relative; &::before { @@ -48,6 +53,7 @@ &:hover:not(.amsterdam-tabs__button--selected, .amsterdam-tabs__button--disabled)::after { background-color: currentColor; + height: 4px; @extend .amsterdam-tabs-underline; } @@ -75,4 +81,5 @@ .amsterdam-tabs__panel { grid-area: 2 / 1; + padding-block: 1rem; // temp } diff --git a/proprietary/tokens/src/components/amsterdam/tabs.tokens.json b/proprietary/tokens/src/components/amsterdam/tabs.tokens.json index bc1e0d28a5..a138ca31aa 100644 --- a/proprietary/tokens/src/components/amsterdam/tabs.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/tabs.tokens.json @@ -2,7 +2,7 @@ "amsterdam": { "tabs": { "border-color": { "value": "{amsterdam.color.primary-blue}" }, - "border-width": { "value": ".25rem" }, + "border-width": { "value": "2px" }, "list": { "border-color": { "value": "{amsterdam.color.primary-blue}" } },