Customizing Tabstrip
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $tabstrip-bg | null | null | |
Description Background color of tabstrip component | |||
| $tabstrip-text | $subtle-text | ||
Description Text color of tabstrip component | |||
| $tabstrip-border | $component-border | map-get($theme, component-border) | |
Description Border color of tabstrip component | |||
| $tabstrip-item-padding-x | 24px | 24px | |
Description Horizontal padding of tabs | |||
| $tabstrip-item-padding-y | 14px | 14px | |
Description Vertical padding of tabs | |||
| $tabstrip-item-border-width | 0px | 0px | |
Description Width of border around of tabs | |||
| $tabstrip-item-border-radius | 0px | 0px | |
Description Border radius of tabs | |||
| $tabstrip-item-gap | 0px | 0px | |
Description Spacing between tabs | |||
| $tabstrip-item-bg | null | null | |
Description Background color of tabs | |||
| $tabstrip-item-text | $subtle-text | ||
Description Text color of tabs | |||
| $tabstrip-item-border | null | null | |
Description Border color of tabs | |||
| $tabstrip-item-gradient | null | null | |
Description Background gradient of tabs | |||
| $tabstrip-item-hovered-bg | $hovered-bg | map-get( $theme, hover-bg ) | |
Description Background color of hovered tabs | |||
| $tabstrip-item-hovered-text | $body-text | ||
Description Text color of hovered tabs | |||
| $tabstrip-item-hovered-border | null | null | |
Description Border color of hovered tabs | |||
| $tabstrip-item-hovered-gradient | null | null | |
Description Background gradent of hovered tabs | |||
| $tabstrip-item-selected-bg | null | null | |
Description Background color of selected tabs | |||
| $tabstrip-item-selected-text | $body-text | ||
Description Text color of selected tabs | |||
| $tabstrip-item-selected-border | null | null | |
Description Border color of selected tabs | |||
| $tabstrip-item-selected-gradient | null | null | |
Description Background gradient of selected tabs | |||
| $tabstrip-content-padding-x | $tabstrip-item-padding-x | 24px | |
Description Horizontal padding of tabstrip content | |||
| $tabstrip-content-padding-y | $tabstrip-item-padding-y | 14px | |
Description Vertical padding of tabstrip content | |||
| $tabstrip-content-border-width | 0px | 0px | |
Description Width of border around tabstrip content | |||
| $tabstrip-content-bg | transparent | transparent | |
Description Background color of tabstrip content | |||
| $tabstrip-content-text | null | null | |
Description Text color of tabstrip content | |||
| $tabstrip-content-border | null | null | |
Description Border color of tabstrip content | |||
| $tabstrip-content-border-focused | $component-text | map-get($theme, component-text) | |
Description Border color of tabstrip focused content | |||
