Foundation - Référence Flex Video 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 du composant.
| N ° Sr. | Nom et description | Type | Valeur par défaut |
|---|---|---|---|
| 1 |
$flexvideo-padding-top Il représente le remplissage au-dessus du conteneur de la vidéo flex. |
Nombre | rem-calc (25) |
| 2 |
$flexvideo-margin-bottom Il représente la marge sous le conteneur de la vidéo flexible. |
Nombre | rem-calc (16) |
| 3 |
$flexvideo-ratio Il représente le remplissage utilisé pour créer un rapport hauteur / largeur de 4: 3. |
Nombre | 4 par 3 |
| 4 |
$flexvideo-ratio-widescreen Il représente le remplissage utilisé pour créer un rapport hauteur / largeur de 16: 9. |
Nombre | 16 par 9 |
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.
flex-vidéo
@include flex-video($ratio);Il est utilisé pour créer un conteneur vidéo flexible. Il accepte le paramètre $ ratio qui est expliqué ci-dessous.
| N ° Sr. | Paramètre et description | Type | Valeur par défaut |
|---|---|---|---|
| 1 |
$ratio Il représente le rapport du conteneur et formaté comme x par y . |
liste | $ flexvideo-ratio |
Les fonctions
flex-vidéo
flex-video($ratio)Il crée une hauteur en pourcentage qui est utilisée comme remplissage dans le conteneur de la vidéo flex. Il accepte le paramètre $ ratio , qui est de type List . Le paramètre $ ratio représente le ratio du conteneur et formaté comme x par y .