Foundation - Riferimento SASS Progress Bar
Descrizione
È possibile modificare gli stili dei componenti utilizzando SASS Reference.
Variabili
La tabella seguente elenca le variabili SASS nel file delle impostazioni del progetto che rendono personalizzati gli stili predefiniti di questo componente.
| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 | $progress-height Rappresenta l'altezza della barra di avanzamento. |
Numero | 1rem |
| 2 | $progress-background Rappresenta il colore di sfondo della barra di avanzamento. |
Colore | $ grigio medio |
| 3 | $progress-margin-bottom Rappresenta il margine inferiore della barra di avanzamento. |
Numero | $ margine globale |
| 4 | $progress-meter-background Rappresenta il colore predefinito del misuratore della barra di avanzamento. |
Colore | $ colore-primario |
| 5 | $progress-radius Rappresenta il raggio della barra di avanzamento predefinita. |
Numero | $ raggio-globale |
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.
contenitore di progresso
@include progress-container;Aggiunge stili al contenitore della barra di avanzamento.
indicatore di progresso
@include progress-meter;Aggiunge stili al misuratore interno della barra di avanzamento.
testo-indicatore di progresso
@include progress-meter-text;Aggiunge stili al testo in metri della barra di avanzamento.