Fondation - Reveal Sass Reference

Variables

Vous pouvez modifier les styles des composants à l'aide des variables SASS répertoriées dans le tableau ci-dessous.

N ° Sr.	Nom et description	Type	Valeur par défaut
1	$reveal-background Il affiche la couleur d'arrière-plan d'un modal.	Couleur	$ blanc
2	$reveal-width Il définit la largeur du modal.	Nombre	600 px
3	$reveal-max-width Il spécifie la largeur maximale d'un modal.	Nombre	$ largeur-globale
4	$reveal-offset Lorsque vous ajoutez le modal, il sera décalé par rapport au haut de la fenêtre.	Nombre	rem-calc (100)
5	$reveal-padding Il définit le remplissage à l'intérieur d'un modal.	Nombre	$ global-padding
6	$reveal-border Il définit la frontière pour un modal.	Nombre	1px uni $ gris moyen
sept	$reveal-radius Il spécifie le rayon du modal.	Nombre	$ global-radius
8	$reveal-zindex La superposition utilise la valeur z-index pour les modaux.	Nombre	1005
9	$reveal-overlay-background Il affiche la couleur d'arrière-plan des superpositions modales.	Couleur	rgba ($ noir, 0,45)

Mixins

Vous pouvez utiliser les mixins pour créer la structure de classe CSS pour vos composants modaux de révélation.

révéler-superposition

Vous pouvez inclure des styles pour la superposition modale en utilisant le mixin suivant -

@include reveal-overlay($background);

Il contient un paramètre tel que spécifié dans le tableau ci-dessous -

N ° Sr.	Paramètre et description	Type	Valeur par défaut
1	$background Il affiche la couleur d'arrière-plan de la superposition.	Couleur	$ révéler-overlay-background

révéler-modal-base

Vous pouvez ajouter des styles de base pour un modal en utilisant le mixin ci-dessous -

@include reveal-modal-base;

révéler-modal-width

Il est utilisé pour créer la largeur d'un modal en utilisant le mixin ci-dessous -

@include reveal-modal-width($width, $max-width);

Il contient les paramètres suivants tels que spécifiés dans le tableau -

N ° Sr.	Paramètre et description	Type	Valeur par défaut
1	$width Il spécifie la largeur du modal.	Nombre	Aucun
2	$max-width Il spécifie la largeur maximale du modal.	Nombre	$ révéler-max-width

révéler-modal-plein écran

Vous pouvez créer un mode plein écran en fonction de la largeur et de la hauteur de la fenêtre en utilisant le mixin suivant -

@include reveal-modal-fullscreen;