Fondazione - Riferimento Media SASS
Descrizione
È possibile modificare gli stili dei componenti utilizzando SASS Reference.
Variabili
La tabella seguente elenca le variabili SASS nel file delle impostazioni di un progetto che rendono gli stili predefiniti di questo componente personalizzabili.
| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 |
$orbit-bullet-background Rappresenta il colore predefinito per i proiettili dell'orbita. |
Colore | $ grigio medio |
| 2 |
$orbit-bullet-background-active Rappresenta il colore attivo predefinito per i proiettili dell'orbita. |
Colore | $ grigio scuro |
| 3 |
$orbit-bullet-diameter Rappresenta il diametro predefinito per i proiettili dell'orbita. |
Numero | 1.2rem |
| 4 |
$orbit-bullet-margin Rappresenta il margine predefinito tra i proiettili dell'orbita. |
Numero | 0.1rem |
| 5 |
$orbit-bullet-margin-top Rappresenta la distanza predefinita dalla regione della diapositiva per i proiettili dell'orbita. |
Numero | 0.8rem |
| 6 |
$orbit-bullet-margin-bottom Rappresenta il margine inferiore predefinito dai punti elenco al contenuto sottostante. |
Numero | 0.8rem |
| 7 |
$orbit-caption-background Rappresenta il colore di sfondo predefinito per la didascalia dell'orbita. |
Colore | rgba ($ nero, 0,5) |
| 8 |
$orbit-caption-padding Rappresenta il riempimento predefinito per la didascalia dell'orbita. |
Numero | 1rem |
| 9 |
$orbit-control-background-hover Rappresenta il colore di sfondo predefinito per i controlli al passaggio del mouse. |
Colore | rgba ($ nero, 0,5) |
| 10 |
$orbit-control-padding Rappresenta il riempimento predefinito per i controlli dell'orbita. |
Numero | 1rem |
| 11 |
$orbit-control-zindex Rappresenta lo z-index predefinito per i controlli dell'orbita. |
Numero | 10 |
Mixins
Per creare l'output CSS finale di questo componente, è possibile utilizzare i seguenti mixin. Per costruire la tua struttura di classe usando i componenti Foundation, puoi usare tu stesso i mixin.
orbita-wrapper
@include orbit-wrapper;Aggiunge stili al wrapper dell'orbita.
orbit-container
@include orbit-container;Aggiunge stili al contenitore di diapositive dell'orbita interna. Viene utilizzato sulla classe .orbit-container .
orbit-slide
@include orbit-slide;Aggiunge stili alle diapositive separate di un cursore. Viene utilizzato nella classe .orbit-slide .
didascalia in orbita
@include orbit-caption;Aggiunge stili alla didascalia della diapositiva.
controllo dell'orbita
@include orbit-control;Aggiunge stili di base ai pulsanti successivo e precedente. Gli stili sono divisi tra le classi .orbit-next e .orbit-previous nel CSS predefinito.
orbita precedente
@include orbit-previous;Aggiunge stili al pulsante precedente. Questi sono usati sulla classe .orbit-previous .
orbita successiva
@include orbit-next;Aggiunge stili al pulsante successivo. Questi sono usati nella classe .orbit-next .
proiettili in orbita
@include orbit-bullets;Aggiunge stili a un contenitore di proiettili dell'orbita e aggiunge stili al pulsante precedente e sono usati nella classe .orbit-proiettili .