Foundation - Tabs Sass Reference



Variables

You can change the styles of the components by using the following SASS variables as listed in the table.

Sr.No. Name & Description Type Default Value
1

$tab-margin

It sets the margin for the tab bar.

Number 0
2

$tab-background

It displays the background color of a tab bar.

Color $white
3

$tab-background-active

It displays the active background color of a tab bar.

Color $light-gray
4

$tab-border

It specifies the border color for a tab.

Color $light-gray
5

$tab-item-color

It displays the text color for menu items.

Color foreground($tab-background, $primary-color)
6

$tab-item-background-hover

It displays the background color for items on hover.

$white
7

$tab-item-padding

It defines the padding of a tab item.

Number 1.25rem 1.5rem
8

$tab-expand-max

It includes maximum number of expand-n classes in the CSS.

Number 6
9

$tab-content-background

It displays the background color of the tab content.

Color $white
10

$tab-content-border

It displays the border color of the tab content.

Color $light-gray
11

$tab-content-color

It provides the text color of the tab content.

Color foreground($tab-background, $primary-color)
12

$tab-content-padding

It defines the padding for the tab content.

Number or List 1rem

Mixins

You can use the mixins to build the CSS class structure for your reveal modal components.

tabs-container

You can include styles for a tab container using the following mixin −

@include tabs-container;

tabs-container-vertical

It displays the tabs in vertical manner by using the following mixin −

@include tabs-container-vertical;

tabs-title

It applies the styles for the tab links by using the following mixin −

@include tabs-title;

tabs-content

It applies the styles for tab content panes by using the following mixin −

@include tabs-content;

tabs-content-vertical

It specifies the tab, content must display, in a vertical manner by using the following mixin −

@include tabs-content-vertical;

tabs-panel

You can include styles for a tab content panel by using the following mixin −

@include tabs-panel;
foundation_containers.htm
Advertisements