Fundação - Referência do Slider SASS

Descrição

Você pode alterar os estilos dos componentes usando a Referência SASS.

Variáveis

A tabela a seguir lista as variáveis ​​SASS no arquivo de configurações do projeto que faz com que os estilos padrão deste componente sejam personalizados.

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

$slider-height

Representa a altura padrão do controle deslizante.

 Número 0,5 rem
2

$slider-width-vertical

Ele representa a largura padrão do controle deslizante de um controle deslizante vertical.

 Número $ slider-height
3

$slider-background

Ele representa a cor de fundo padrão da trilha do controle deslizante.

 Cor $ cinza claro
4

$slider-fill-background

Ele representa a cor padrão da cor de preenchimento ativa do controle deslizante.

 Cor $ cinza médio
5

$slider-handle-height

Ele representa a altura padrão do controle deslizante.

 Número 1.4 rem
6

$slider-handle-width

Ele representa a largura padrão do controle deslizante.

 Número 1.4 rem
7

$slider-handle-background

Ele representa a cor padrão do controle deslizante.

 Cor $ cor primária
8

$slider-opacity-disabled

Ele representa a quantidade de fade padrão do controle deslizante desativado.

 Número 0,25
9

$slider-radius

Ele representa o raio padrão do controle deslizante.

 Número $ global-radius
10

$slider-transition

Ele representa as propriedades de transição a serem definidas para o controle deslizante e preenchimento.

 Transição todos os 0.2s facilitam a entrada

Mixins

Para construir a saída CSS final deste componente, os seguintes mixins podem ser usados. Para construir sua própria estrutura de classes usando componentes Foundation, você mesmo pode usar os mixins.

contêiner deslizante

@include slider-container;

Ele adiciona estilos gerais de controles deslizantes.

slider-fill

@include slider-fill;

Ele adiciona estilos gerais para o preenchimento ativo do controle deslizante.

alça deslizante

@include slider-handle;

Ele adiciona estilos gerais para as alças do controle deslizante.