Foundation - Slider SASS Riferimento

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 gli stili predefiniti di questo componente personalizzabili.

Sr.No. Nome e descrizione genere Valore predefinito
1

$slider-height

Rappresenta l'altezza predefinita del cursore.

 Numero 0.5rem
2

$slider-width-vertical

Rappresenta la larghezza predefinita del cursore di un cursore verticale.

 Numero $ slider-height
3

$slider-background

Rappresenta il colore di sfondo predefinito della traccia del cursore.

 Colore $ grigio chiaro
4

$slider-fill-background

Rappresenta il colore predefinito del colore di riempimento attivo del cursore.

 Colore $ grigio medio
5

$slider-handle-height

Rappresenta l'altezza predefinita della maniglia di scorrimento.

 Numero 1.4rem
6

$slider-handle-width

Rappresenta la larghezza predefinita della maniglia di scorrimento.

 Numero 1.4rem
7

$slider-handle-background

Rappresenta il colore predefinito della maniglia del cursore.

 Colore $ colore-primario
8

$slider-opacity-disabled

Rappresenta la quantità di dissolvenza predefinita del cursore disabilitato.

 Numero 0.25
9

$slider-radius

Rappresenta il raggio predefinito del cursore.

 Numero $ raggio-globale
10

$slider-transition

Rappresenta le proprietà di transizione da impostare sulla maniglia di scorrimento e sul riempimento.

 Transizione tutto 0.2s facilità-in-out

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 scorrevole

@include slider-container;

Aggiunge stili di cursori generali.

riempimento a scorrimento

@include slider-fill;

Aggiunge stili generali per il riempimento attivo del cursore.

manico scorrevole

@include slider-handle;

Aggiunge stili generali per le maniglie del cursore.