Fondation - Référence Media 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 d'un projet qui permettent de personnaliser les styles par défaut de ce composant.
| N ° Sr. | Nom et description | Type | Valeur par défaut |
|---|---|---|---|
| 1 | $orbit-bullet-background Il représente la couleur par défaut des puces de l'orbite. |
Couleur | $ gris moyen |
| 2 | $orbit-bullet-background-active Il représente la couleur active par défaut des puces de l'orbite. |
Couleur | $ gris foncé |
| 3 | $orbit-bullet-diameter Il représente le diamètre par défaut des balles de l'orbite. |
Nombre | 1.2rem |
| 4 | $orbit-bullet-margin Il représente la marge par défaut entre les balles de l'orbite. |
Nombre | 0,1rem |
| 5 | $orbit-bullet-margin-top Il représente la distance par défaut de la zone de diapositive pour les puces de l'orbite. |
Nombre | 0.8rem |
| 6 | $orbit-bullet-margin-bottom Il représente la marge inférieure par défaut entre les puces et le contenu en dessous. |
Nombre | 0.8rem |
| sept | $orbit-caption-background Il représente la couleur d'arrière-plan par défaut pour la légende de l'orbite. |
Couleur | rgba ($ noir, 0,5) |
| 8 | $orbit-caption-padding Il représente le remplissage par défaut pour la légende de l'orbite. |
Nombre | 1rem |
| 9 | $orbit-control-background-hover Il représente la couleur d'arrière-plan par défaut des contrôles lorsqu'ils sont survolés. |
Couleur | rgba ($ noir, 0,5) |
| dix | $orbit-control-padding Il représente le remplissage par défaut des contrôles de l'orbite. |
Nombre | 1rem |
| 11 | $orbit-control-zindex Il représente le z-index par défaut pour les contrôles de l'orbite. |
Nombre | dix |
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.
enveloppe-orbite
@include orbit-wrapper;Il ajoute des styles à l'enveloppe de l'orbite.
orbite-conteneur
@include orbit-container;Il ajoute des styles au conteneur de diapositives orbite interne. Il est utilisé sur la classe .orbit-container .
orbite-toboggan
@include orbit-slide;Il ajoute des styles aux diapositives séparées d'un curseur. Il est utilisé sur la classe .orbit-slide .
légende-orbite
@include orbit-caption;Il ajoute des styles à la légende de la diapositive.
contrôle de l'orbite
@include orbit-control;Il ajoute des styles de base aux boutons suivant et précédent. Les styles sont divisés entre les classes .orbit-next et .orbit-previous dans le CSS par défaut.
orbite précédente
@include orbit-previous;Il ajoute des styles au bouton précédent. Ceux-ci sont utilisés sur la classe .orbit-previous .
orbite suivante
@include orbit-next;Il ajoute des styles au bouton suivant. Ceux-ci sont utilisés sur la classe .orbit-next .
orbite-balles
@include orbit-bullets;Il ajoute des styles à un conteneur de puces de l'orbite et ajoute des styles au bouton précédent et sont utilisés sur la classe .orbit-bullets .