Fundação - Referência Switch 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	$switch-background Ele representa a cor de fundo de um switch.	Cor	$ cinza médio
2	$switch-background-active Ele representa a cor ativa de fundo do switch.	Cor	$ cor primária
3	$switch-height Representa a altura do switch, sem nenhuma classe aplicada.	Número	2rem
4	$switch-height-tiny Ele representa a altura do switch com a classe .tiny .	Número	1.5 rem
5	$switch-height-small Ele representa a altura do switch com classe .small .	Número	1,75 rem
6	$switch-height-large Ele representa a altura do switch com a classe .large .	Número	2,5 rem
7	$switch-radius Ele representa o raio da borda do switch.	Número	$ global-radius
8	$switch-margin Ele representa a fronteira em torno de um modal.	Número	$ global-margin
9	$switch-paddle-background Ele representa a cor de fundo para o contêiner do switch e a pá.	Cor	$ branco
10	$switch-paddle-offset Ele representa o espaçamento entre a borda do corpo e a pá do interruptor.	Número	0,25 rem
11	$switch-paddle-radius Ele representa o raio da borda do switch paddle.	Número	$ global-radius
12	$switch-paddle-transition Ele representa a transição do switch.	Número	todos os 0,25s atenuados

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.

switch-container

@include switch-container;

Ele adiciona estilos de contêiner de switch. Aplique-o a uma classe de contêiner.

switch-input

@include switch-input;

Ele adiciona estilos de entrada de switch. Dentro de um switch, você deve aplicá-lo a um <input> .

switch-paddle

@include switch-paddle;

Ele adiciona estilos para a raquete e o plano de fundo de uma chave. Dentro de um switch, você deve aplicá-lo a um <label> .

switch-text

@include switch-text;

Em um switch, ele adiciona estilos básicos para texto ativo ou inativo. Você tem que aplicar isso aos elementos de texto dentro de <label> .

switch-text-active

@include switch-text-active;

Ele adiciona estilos para o texto de estado ativo do switch.

switch-text-inactive

@include switch-text-inactive;

Ele adiciona estilos para o texto do estado inativo do switch.

switch-size

@include switch-size($font-size, $width, $height, $paddle-width, $paddle-offset);

Ao alterar o tamanho do corpo e da raquete, o tamanho da chave altera o tamanho da chave. Você tem que aplicar isso a um contêiner do switch.

A tabela a seguir lista os parâmetros aceitos pelo switch-size .

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$font-size Ele representa o tamanho da fonte do rótulo dentro do switch.	Número	1rem
2	$width Ele representa a largura do corpo do switch.	Número	4rem
3	$height Ele representa a altura do corpo do switch.	Número	2rem
4	$paddle-width Ele representa a largura da pá do interruptor.	Número	1.5 rem
5	$paddle-width Ele representa o espaçamento entre a borda do corpo da chave e a pá da chave.	Número	0,25 rem