Fundación - Slider SASS Reference
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 | $slider-height Representa la altura predeterminada del control deslizante. |
Número | 0.5rem |
| 2 | $slider-width-vertical Representa el ancho predeterminado del control deslizante de un control deslizante vertical. |
Número | $ slider-height |
| 3 | $slider-background Representa el color de fondo predeterminado de la pista del control deslizante. |
Color | $ gris claro |
| 4 | $slider-fill-background Representa el color predeterminado del color de relleno activo del control deslizante. |
Color | $ gris medio |
| 5 | $slider-handle-height Representa la altura predeterminada del control deslizante. |
Número | 1.4rem |
| 6 | $slider-handle-width Representa el ancho predeterminado del control deslizante. |
Número | 1.4rem |
| 7 | $slider-handle-background Representa el color predeterminado del control deslizante. |
Color | $ color primario |
| 8 | $slider-opacity-disabled Representa la cantidad de desvanecimiento predeterminada del control deslizante deshabilitado. |
Número | 0,25 |
| 9 | $slider-radius Representa el radio predeterminado del control deslizante. |
Número | $ radio-global |
| 10 | $slider-transition Representa propiedades de transición para establecer en el control deslizante y el relleno. |
Transición | todos los 0,2 segundos de entrada y 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 deslizante
@include slider-container;Agrega estilos de controles deslizantes generales.
relleno deslizante
@include slider-fill;Agrega estilos generales para el relleno activo del control deslizante.
mango deslizante
@include slider-handle;Agrega estilos generales para las manijas del control deslizante.