Fundación - Media 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 de un proyecto que hace que los estilos predeterminados de este componente se personalicen.
| No Señor. | Nombre y descripción | Tipo | Valor por defecto |
|---|---|---|---|
| 1 | $orbit-bullet-background Representa el color predeterminado para las viñetas de la órbita. |
Color | $ gris medio |
| 2 | $orbit-bullet-background-active Representa el color activo predeterminado para las viñetas de la órbita. |
Color | $ gris oscuro |
| 3 | $orbit-bullet-diameter Representa el diámetro predeterminado para las balas de la órbita. |
Número | 1.2rem |
| 4 | $orbit-bullet-margin Representa el margen predeterminado entre viñetas de la órbita. |
Número | 0.1rem |
| 5 | $orbit-bullet-margin-top Representa la distancia predeterminada desde la región de deslizamiento para las balas de la órbita. |
Número | 0.8rem |
| 6 | $orbit-bullet-margin-bottom Representa el margen inferior predeterminado desde las viñetas hasta el contenido debajo. |
Número | 0.8rem |
| 7 | $orbit-caption-background Representa el color de fondo predeterminado para el título de la órbita. |
Color | rgba ($ negro, 0.5) |
| 8 | $orbit-caption-padding Representa el relleno predeterminado para el título de la órbita. |
Número | 1rem |
| 9 | $orbit-control-background-hover Representa el color de fondo predeterminado para los controles cuando se desplaza. |
Color | rgba ($ negro, 0.5) |
| 10 | $orbit-control-padding Representa el relleno predeterminado para los controles de la órbita. |
Número | 1rem |
| 11 | $orbit-control-zindex Representa el índice Z predeterminado para los controles de la órbita. |
Número | 10 |
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.
envoltorio de órbita
@include orbit-wrapper;Agrega estilos a la envoltura de la órbita.
contenedor de órbita
@include orbit-container;Agrega estilos al contenedor de diapositivas de la órbita interna. Se utiliza en la clase .orbit-container .
orbita-diapositiva
@include orbit-slide;Agrega estilos a las diapositivas separadas de un control deslizante. Se utiliza en la clase .orbit-slide .
título de la órbita
@include orbit-caption;Agrega estilos al título de la diapositiva.
control de órbita
@include orbit-control;Agrega estilos base a los botones siguiente y anterior. Los estilos se dividen entre las clases .orbit-next y .orbit-previous en CSS predeterminado.
órbita anterior
@include orbit-previous;Agrega estilos al botón anterior. Estos se utilizan en la clase .orbit-previous .
órbita siguiente
@include orbit-next;Agrega estilos al siguiente botón. Estos se utilizan en la clase .orbit-next .
balas orbitales
@include orbit-bullets;Agrega estilos a un contenedor de viñetas de la órbita y agrega estilos al botón anterior y se usa en la clase .orbit-bullets .