Foundation - Référence Switch 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 du 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	$switch-background Il représente la couleur d'arrière-plan d'un commutateur.	Couleur	$ gris moyen
2	$switch-background-active Il représente la couleur active d'arrière-plan du commutateur.	Couleur	$ couleur primaire
3	$switch-height Il représente la hauteur du commutateur, sans aucune classe appliquée.	Nombre	2rem
4	$switch-height-tiny Il représente la hauteur du commutateur avec la classe .tiny .	Nombre	1,5rem
5	$switch-height-small Il représente la hauteur du commutateur avec la classe .small .	Nombre	1,75rem
6	$switch-height-large Il représente la hauteur du commutateur avec la classe .large .	Nombre	2,5rem
sept	$switch-radius Il représente le rayon de la bordure du commutateur.	Nombre	$ global-radius
8	$switch-margin Il représente la frontière autour d'un modal.	Nombre	marge globale $
9	$switch-paddle-background Il représente la couleur d'arrière-plan du conteneur de commutation et de la palette.	Couleur	$ blanc
dix	$switch-paddle-offset Il représente l'espacement entre le bord du corps et la palette d'interrupteur.	Nombre	0,25rem
11	$switch-paddle-radius Il représente le rayon de bordure de la palette de commutation.	Nombre	$ global-radius
12	$switch-paddle-transition Il représente la transition de commutateur.	Nombre	toutes les sorties de 0,25 s

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.

interrupteur-conteneur

@include switch-container;

Il ajoute les styles du conteneur de commutateur. Appliquez-le à une classe de conteneur.

entrée de commutation

@include switch-input;

Il ajoute des styles d'entrée de commutateur. Dans un commutateur, vous devez l'appliquer à une <input> .

interrupteur-palette

@include switch-paddle;

Il ajoute des styles pour la palette et l'arrière-plan d'un interrupteur. Dans un commutateur, vous devez l'appliquer à un <label> .

switch-text

@include switch-text;

Dans un commutateur, il ajoute des styles de base pour le texte actif ou inactif. Vous devez l'appliquer aux éléments de texte dans <label> .

commutateur-texte-actif

@include switch-text-active;

Il ajoute des styles pour le texte d'état actif du commutateur.

switch-text-inactif

@include switch-text-inactive;

Il ajoute des styles pour le texte d'état inactif du commutateur.

taille du commutateur

@include switch-size($font-size, $width, $height, $paddle-width, $paddle-offset);

En modifiant la taille du corps et de la palette, la taille de l'interrupteur modifie la taille de l'interrupteur. Vous devez l'appliquer à un conteneur du commutateur.

Le tableau suivant répertorie les paramètres acceptés par switch-size .

N ° Sr.	Paramètre et description	Type	Valeur par défaut
1	$font-size Il représente la taille de police de l'étiquette à l'intérieur du commutateur.	Nombre	1rem
2	$width Il représente la largeur du corps du commutateur.	Nombre	4rem
3	$height Il représente la hauteur du corps du commutateur.	Nombre	2rem
4	$paddle-width Il représente la largeur de la palette de commutation.	Nombre	1,5rem
5	$paddle-width Il représente l'espacement entre le bord du corps de l'interrupteur et la palette de l'interrupteur.	Nombre	0,25rem