diff --git a/packages/css/package.json b/packages/css/package.json index 10cbdd49..cbd04da7 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -1,6 +1,6 @@ { "name": "@miljodirektoratet/md-css", - "version": "1.0.26", + "version": "1.0.27", "description": "CSS for Miljødirektoratet", "author": "Miljødirektoratet", "main": "./src/index.css", diff --git a/packages/css/src/tabs/tabs.css b/packages/css/src/tabs/tabs.css index 59b6b0c8..88eddc89 100644 --- a/packages/css/src/tabs/tabs.css +++ b/packages/css/src/tabs/tabs.css @@ -18,6 +18,11 @@ } .md-tabs-container ul li .md-tabs-button { + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + font-size: 1em; font-weight: 400; padding: 13px 24px 12px 24px; @@ -25,6 +30,16 @@ background-color: transparent; border-bottom: 1px solid var(--mdGreyColor80); } +.md-tabs-container ul li .md-tabs-button::after { + content: attr(data-text); + content: attr(data-text) / ''; + height: 0; + visibility: hidden; + overflow: hidden; + user-select: none; + pointer-events: none; + font-weight: 600; +} .md-tabs-container ul li .md-tabs-button.md-tabs-button--disabled { background-color: var(--mdGreyColor20); diff --git a/packages/react/package.json b/packages/react/package.json index 57451b69..2c95020d 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@miljodirektoratet/md-react", - "version": "1.0.47", + "version": "1.0.48", "description": "React-komponenter for Miljødirektoratet", "author": "Miljødirektoratet", "main": "./dist/index.js", diff --git a/packages/react/src/tabs/MdTabTitle.tsx b/packages/react/src/tabs/MdTabTitle.tsx index c48a520d..a1c6bb10 100644 --- a/packages/react/src/tabs/MdTabTitle.tsx +++ b/packages/react/src/tabs/MdTabTitle.tsx @@ -30,6 +30,7 @@ const MdTabTitle: React.FunctionComponent = ({ return !disabled && setSelectedTab(index); }} tabIndex={disabled ? -1 : 0} + data-text={title} > {title}