Customizing Tabstrip

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$button-padding-x$padding-x
Description
Horizontal padding of buttons
$button-padding-y$padding-y
Description
Vertical padding of buttons
$tabstrip-bgnullnull
Description
Background color of tabstrip component
$tabstrip-text$component-text
Description
Text color of tabstrip component
$tabstrip-border$component-borderrgba( black, .08 )
Description
Border color of tabstrip component
$tabstrip-item-padding-x$nav-item-padding-x
Description
Horizontal padding of tabs
$tabstrip-item-padding-y$nav-item-padding-y
Description
Vertical padding of tabs
$tabstrip-item-border-width1px1px
Description
Width of border around tabs
$tabstrip-item-border-radius$border-radius2px
Description
Border radius of tabs
$tabstrip-item-gap$nav-item-margin
Description
Spacing between tabs
$tabstrip-item-bgnullnull
Description
Background color of tabs
$tabstrip-item-text$link-text
Description
Text color of tabs
$tabstrip-item-bordernullnull
Description
Border color of tabs
$tabstrip-item-gradientnullnull
Description
Background gradient of tabs
$tabstrip-item-hovered-bgnullnull
Description
Background color of hovered tabs
$tabstrip-item-hovered-text$link-hover-text
Description
Text color of hovered tabs
$tabstrip-item-hovered-bordernullnull
Description
Border color of hovered tabs
$tabstrip-item-hovered-gradientnullnull
Description
Background gradient of hovered tabs
$tabstrip-item-selected-bg$component-bg
Description
Background color of selected tabs
$tabstrip-item-selected-text$component-text
Description
Text color of selected tabs
$tabstrip-item-selected-border$component-borderrgba( black, .08 )
Description
Border color of selected tabs
$tabstrip-item-selected-gradientnullnull
Description
Background gradient of selected tabs
$tabstrip-content-padding-x$tabstrip-item-padding-x
Description
Horizontal padding of tabstrip content
$tabstrip-content-padding-y$tabstrip-item-padding-y
Description
Vertical padding of tabstrip content
$tabstrip-content-border-width1px1px
Description
Width of border around tabstrip content
$tabstrip-content-bg$component-bg
Description
Background color of tabstrip content
$tabstrip-content-text$component-text
Description
Text color of tabstrip content
$tabstrip-content-border$component-borderrgba( black, .08 )
Description
Border color of tabstrip content