Skip to main content
MindTouch Success Center

Tabs variables

Tabbed containers allow for the organizational display of content in multiple ways in a limited amount of space. There are several LESS variables available for customization of these containers.

Customize tabs

tabsmain1.png

Variables

@tab-background-color

Default value: lighten(@secondary-container-background-color, 3%)  

Definition: All inactive tabs that don't have visible content displayed.

tab1.png

@tab-background-color-active

Default value: @background  

Definition: The active tab that contains visible content.

tab2.png

@tab-border-color

Default value: darken(@secondary-container-border-color, 27%)  

Definition: The border color for all inactive tabs not currently being viewed.

tab3.png

<p@tab-border-color-active>< p="">

Default value: @highlight-color  

Definition: The border color for the active tab that has visible content.

tab-border-color-active.png

@tab-font-family

Default value: @default-font-family

Definition: The font used in for the tabs (ex. Times New Roman, Arial, Verdana, etc). Lato is the default font family.

tab5.png

@tab-link-color

Default value: @secondary-link-color  

Definition: Color of the text in tabs not currently being viewed.

tab6.png

@tab-link-color-hover

Default value: @secondary-link-color-hover  

Definition: Color of the text when a user moves their mouse over the tabs not currently being viewed.

tab7.png

@tab-link-color-active

Default value: @primary-font-color  

Definition: Color of the text in the tab currently being viewed.

tab8.png

  • Was this article helpful?