Customizing Tabstrip

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$tabstrip-bgNull

null

null

Description
Background color of tabstrip component
$tabstrip-textColor

$component-text

#424242

Description
Text color of tabstrip component
$tabstrip-borderColor

$component-border

rgba(0, 0, 0, 0.08)

Description
Border color of tabstrip component
$tabstrip-item-padding-xNumber

$nav-item-padding-x

12px

Description
Horizontal padding of tabs
$tabstrip-item-padding-yNumber

$nav-item-padding-y

6px

Description
Vertical padding of tabs
$tabstrip-item-border-widthNumber

1px

1px

Description
Width of border around tabs
$tabstrip-item-border-radiusNumber

$kendo-border-radius-md

4px

Description
Border radius of tabs
$tabstrip-item-gapNumber

$nav-item-margin

0px

Description
Spacing between tabs
$tabstrip-item-bgNull

null

null

Description
Background color of tabs
$tabstrip-item-textColor

$link-text

#ff6358

Description
Text color of tabs
$tabstrip-item-borderNull

null

null

Description
Border color of tabs
$tabstrip-item-gradientNull

null

null

Description
Background gradient of tabs
$tabstrip-item-hovered-bgNull

null

null

Description
Background color of hovered tabs
$tabstrip-item-hovered-textColor

$link-hover-text

#d6534a

Description
Text color of hovered tabs
$tabstrip-item-hovered-borderNull

null

null

Description
Border color of hovered tabs
$tabstrip-item-hovered-gradientNull

null

null

Description
Background gradient of hovered tabs
$tabstrip-item-selected-bgColor

$component-bg

#ffffff

Description
Background color of selected tabs
$tabstrip-item-selected-textColor

$component-text

#424242

Description
Text color of selected tabs
$tabstrip-item-selected-borderColor

$component-border

rgba(0, 0, 0, 0.08)

Description
Border color of selected tabs
$tabstrip-item-selected-gradientNull

null

null

Description
Background gradient of selected tabs
$tabstrip-content-padding-xNumber

map-get( $spacing, 4 )

16px

Description
Horizontal padding of tabstrip content
$tabstrip-content-padding-yNumber

map-get( $spacing, 4 )

16px

Description
Vertical padding of tabstrip content
$tabstrip-content-border-widthNumber

1px

1px

Description
Width of border around tabstrip content
$tabstrip-content-bgColor

$component-bg

#ffffff

Description
Background color of tabstrip content
$tabstrip-content-textColor

$component-text

#424242

Description
Text color of tabstrip content
$tabstrip-content-borderColor

$component-border

rgba(0, 0, 0, 0.08)

Description
Border color of tabstrip content
$tabstrip-content-border-focusedColor

$component-text

#424242

Description
Border color of tabstrip focused content

In this article

Not finding the help you need?