Foundation - Tabs Sass Reference

Variáveis

Você pode alterar os estilos dos componentes usando as seguintes variáveis ​​SASS, conforme listado na tabela.

Sr. Não. Nome e Descrição Tipo Valor padrão
1

$tab-margin

Ele define a margem para a barra de guias.

 Número 0
2

$tab-background

Ele exibe a cor de fundo de uma barra de guias.

 Cor $ branco
3

$tab-background-active

Ele exibe a cor de fundo ativa de uma barra de guias.

 Cor $ cinza claro
4

$tab-border

Ele especifica a cor da borda de uma guia.

 Cor $ cinza claro
5

$tab-item-color

Ele exibe a cor do texto para os itens do menu.

 Cor primeiro plano ($ tab-background, $ primary-color)
6

$tab-item-background-hover

Ele exibe a cor de fundo para itens em foco.

 $ branco
7

$tab-item-padding

Ele define o preenchimento de um item da guia.

 Número 1.25rem 1.5rem
8

$tab-expand-max

Inclui o número máximo de classes expand-n no CSS.

 Número 6
9

$tab-content-background

Ele exibe a cor de fundo do conteúdo da guia.

 Cor $ branco
10

$tab-content-border

Ele exibe a cor da borda do conteúdo da guia.

 Cor $ cinza claro
11

$tab-content-color

Ele fornece a cor do texto do conteúdo da guia.

 Cor primeiro plano ($ tab-background, $ primary-color)
12

$tab-content-padding

Ele define o preenchimento do conteúdo da guia.

 Número ou lista 1rem

Mixins

Você pode usar os mixins para construir a estrutura de classes CSS para seus componentes modais de revelação.

tabs-container

Você pode incluir estilos para um contêiner de guia usando o seguinte mixin -

@include tabs-container;

tabs-container-vertical

Ele exibe as abas de maneira vertical usando o seguinte mixin -

@include tabs-container-vertical;

tabs-title

Ele aplica os estilos para os links da guia usando o seguinte mixin -

@include tabs-title;

tabs-content

Ele aplica os estilos para os painéis de conteúdo da guia usando o seguinte mixin -

@include tabs-content;

tabs-content-vertical

Ele especifica a guia, o conteúdo deve ser exibido, de maneira vertical, usando o seguinte mixin -

@include tabs-content-vertical;

painel de guias

Você pode incluir estilos para um painel de conteúdo da guia usando o seguinte mixin -

@include tabs-panel;