diff --git a/src/tabs/tabs.module.css b/src/tabs/tabs.module.css index 6ea7d46c..f9f97e49 100644 --- a/src/tabs/tabs.module.css +++ b/src/tabs/tabs.module.css @@ -14,20 +14,20 @@ --reactist-tab-track-border-width: 2px; --reactist-tab-border-radius: 20px; --reactist-tab-border-width: 1px; - --reactist-tab-height: 30px; + --reactist-tab-padding-x: var(--reactist-spacing-medium); + --reactist-tab-padding-y: var(--reactist-spacing-small); --reactist-tab-line-height: 21px; } .tab { box-sizing: border-box; - padding: 0 var(--reactist-spacing-medium); + padding: var(--reactist-tab-padding-y) var(--reactist-tab-padding-x); border: none; background: none; cursor: pointer; font-size: var(--reactist-font-size-body); font-weight: var(--reactist-font-weight-medium); line-height: var(--reactist-tab-line-height); - min-height: var(--reactist-tab-height); z-index: 1; text-decoration: none; border: var(--reactist-tab-border-width) solid transparent; diff --git a/src/tabs/tabs.stories.mdx b/src/tabs/tabs.stories.mdx index de808275..5c259ae9 100644 --- a/src/tabs/tabs.stories.mdx +++ b/src/tabs/tabs.stories.mdx @@ -146,7 +146,9 @@ Their size can also be customized with: --reactist-tab-track-border-width --reactist-tab-border-radius --reactist-tab-border-width ---reactist-tab-height +--reactist-tab-padding-x +--reactist-tab-padding-y +--reactist-tab-line-height ``` ## Stories