Foundation - Référence Slider SASS
La description
Vous pouvez modifier les styles des composants à l'aide de la référence SASS.
Variables
Le tableau suivant répertorie les variables SASS dans le fichier de paramètres du projet qui permettent de personnaliser les styles par défaut de ce composant.
| N ° Sr. | Nom et description | Type | Valeur par défaut |
|---|---|---|---|
| 1 |
$slider-height Il représente la hauteur par défaut du curseur. |
Nombre | 0,5rem |
| 2 |
$slider-width-vertical Il représente la largeur par défaut du curseur d'un curseur vertical. |
Nombre | $ hauteur du curseur |
| 3 |
$slider-background Il représente la couleur d'arrière-plan par défaut de la piste du curseur. |
Couleur | $ gris clair |
| 4 |
$slider-fill-background Il représente la couleur par défaut de la couleur de remplissage active du curseur. |
Couleur | $ gris moyen |
| 5 |
$slider-handle-height Il représente la hauteur par défaut de la poignée du curseur. |
Nombre | 1,4rem |
| 6 |
$slider-handle-width Il représente la largeur par défaut de la poignée du curseur. |
Nombre | 1,4rem |
| sept |
$slider-handle-background Il représente la couleur par défaut de la poignée du curseur. |
Couleur | $ couleur primaire |
| 8 |
$slider-opacity-disabled Il représente la quantité de fondu par défaut du curseur désactivé. |
Nombre | 0,25 |
| 9 |
$slider-radius Il représente le rayon par défaut du curseur. |
Nombre | $ global-radius |
| dix |
$slider-transition Il représente les propriétés de transition à définir sur la poignée du curseur et le remplissage. |
Transition | tous les 0.2s entrée-sortie |
Mixins
Pour créer la sortie CSS finale de ce composant, les mixins suivants peuvent être utilisés. Pour créer votre propre structure de classe à l'aide des composants Foundation, vous pouvez utiliser les mixins vous-même.
conteneur-curseur
@include slider-container;Il ajoute des styles de curseurs généraux.
remplissage de curseur
@include slider-fill;Il ajoute des styles généraux pour le remplissage actif du curseur.
poignée coulissante
@include slider-handle;Il ajoute des styles généraux pour les poignées du curseur.