Fundación - Referencia de Switch SASS

Descripción

Puede cambiar los estilos de los componentes utilizando SASS Reference.

Variables

La siguiente tabla enumera las variables SASS en el archivo de configuración del proyecto que hace que los estilos predeterminados de este componente se personalicen.

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$switch-background Representa el color de fondo de un interruptor.	Color	$ gris medio
2	$switch-background-active Representa el color activo de fondo del interruptor.	Color	$ color primario
3	$switch-height Representa la altura del interruptor, sin ninguna clase aplicada.	Número	2rem
4	$switch-height-tiny Representa la altura del interruptor con la clase .tiny .	Número	1.5rem
5	$switch-height-small Representa la altura del interruptor con la clase .small .	Número	1.75rem
6	$switch-height-large Representa la altura del interruptor con la clase .large .	Número	2.5rem
7	$switch-radius Representa el radio del borde del interruptor.	Número	$ radio-global
8	$switch-margin Representa el borde alrededor de un modal.	Número	$ margen-global
9	$switch-paddle-background Representa el color de fondo para el contenedor de interruptores y la paleta.	Color	$ blanco
10	$switch-paddle-offset Representa el espacio entre el borde del cuerpo y la paleta del interruptor.	Número	0.25rem
11	$switch-paddle-radius Representa el radio del borde de la paleta del interruptor.	Número	$ radio-global
12	$switch-paddle-transition Representa la transición del interruptor.	Número	todos los 0,25 segundos de salida

Mixins

Para construir la salida CSS final de este componente, se pueden usar los siguientes mixins. Para construir su propia estructura de clases usando componentes Foundation, puede usar los mixins usted mismo.

contenedor de cambio

@include switch-container;

Agrega estilos de contenedor de cambio. Aplicarlo a una clase de contenedor.

entrada de interruptor

@include switch-input;

Agrega estilos de entrada de interruptor. Dentro de un conmutador, debe aplicarlo a una <input> .

paleta-interruptor

@include switch-paddle;

Agrega estilos para paleta y fondo de un interruptor. Dentro de un interruptor, debe aplicarlo a una <etiqueta> .

cambiar-texto

@include switch-text;

Dentro de un conmutador, agrega estilos base para texto activo o inactivo. Tienes que aplicar esto a los elementos de texto dentro de <label> .

cambiar-texto-activo

@include switch-text-active;

Agrega estilos para el texto del estado activo del conmutador.

cambiar-texto-inactivo

@include switch-text-inactive;

Agrega estilos para el texto del estado inactivo del conmutador.

tamaño del interruptor

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

Al cambiar el tamaño del cuerpo y la paleta, el tamaño del interruptor altera el tamaño del interruptor. Tienes que aplicar esto a un contenedor del interruptor.

La siguiente tabla enumera los parámetros que acepta el tamaño del interruptor .

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$font-size Representa el tamaño de fuente de la etiqueta dentro del interruptor.	Número	1rem
2	$width Representa el ancho del cuerpo del interruptor.	Número	4rem
3	$height Representa la altura del cuerpo del interruptor.	Número	2rem
4	$paddle-width Representa el ancho de la paleta del interruptor.	Número	1.5rem
5	$paddle-width Representa el espacio entre el borde del cuerpo del interruptor y la paleta del interruptor.	Número	0.25rem