Foundation - Button SASS Reference
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 | $button-padding Rembourrage dans les boutons. |
liste | 0.85em 1em |
| 2 | $button-margin Marge autour des boutons. |
liste | 0 0 $ marge globale 0 |
| 3 | $button-fill Remplissez les boutons par défaut. Il peut être solide ou creux . |
Mot-clé | solide |
| 4 | $button-background Couleur d'arrière-plan par défaut des boutons. |
Couleur | $ couleur primaire |
| 5 | $button-background-hover Sur la couleur d'arrière-plan des boutons en survol |
Couleur | scale-color ($ bouton-fond, $ légèreté: -15%) |
| 6 | $button-color Couleur de police des boutons. |
liste | #fff |
| sept | $button-color-alt Couleur de police du bouton, si l'arrière-plan est clair. |
liste | # 000 |
| 8 | $button-radius Représente le rayon de bordure des boutons, défini par défaut sur global-radius. |
Nombre | $ global-radius |
| 9 | $button-sizes Tailles des boutons. |
Carte | minuscule: 0.6rem petit: 0.75rem par défaut: 0.9rem grand: 1.25rem |
| dix | $button-opacity-disabled Opacité d'un bouton, qui est désactivée. |
liste | 0,25 |
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.
bouton-développer
@include button-expand($expand);Il est utilisé pour développer un bouton sur toute sa largeur.
| N ° Sr. | Paramètre et description | Type | Valeur par défaut |
|---|---|---|---|
| 1 | $expand Définissez sur true pour activer l'extension ou sur false dans le cas contraire. |
Booléen | vrai |
style bouton
@include button-style($background, $background-hover, $color);Il définit le style visuel du bouton.
| N ° Sr. | Paramètre et description | Type | Valeur par défaut |
|---|---|---|---|
| 1 | $background Couleur d'arrière-plan du bouton. |
Couleur | $ bouton-fond |
| 2 | $background-hover En survolant la couleur d'arrière-plan du bouton. Régler sur auto générera automatiquement une couleur pour le survol. |
Couleur | $ button-background-hover |
| 3 | $color Couleur du texte sur le bouton. Régler sur auto génère automatiquement une couleur en fonction de la couleur d'arrière-plan. |
Couleur | $ bouton-couleur |
bouton creux
@include button-hollow;Il supprime le remplissage d'arrière-plan et la mise au point du bouton creux.
bouton désactivé
@include button-disabled;En atténuant l'élément, en réinitialisant le curseur et en désactivant les événements des pointeurs, il ajoute des styles désactivés à un bouton.
menu déroulant
@include button-dropdown($size, $color, $offset);Il ajoute une flèche déroulante pour un bouton.
| N ° Sr. | Paramètre et description | Type | Valeur par défaut |
|---|---|---|---|
| 1 | $size Il représente la taille de la flèche. L'utilisation de la valeur em est recommandée afin que le triangle soit mis à l'échelle lorsqu'il est utilisé dans différentes tailles de bouton. |
Nombre | 0.4em |
| 2 | $color Couleur de la flèche. |
Couleur | blanc |
| 3 | $offset Représente la distance entre le texte et la flèche d'un bouton. |
Nombre | $ rembourrage de boutons |
bouton
@include button($expand, $background, $background-hover, $color, $style);Il ajoute tous les styles pour un bouton.
| N ° Sr. | Paramètre et description | Type | Valeur par défaut |
|---|---|---|---|
| 1 | $expand Pour rendre le bouton pleine largeur, définissez-le sur true . |
Booléen | faux |
| 2 | $background Couleur d'arrière-plan du bouton. |
Couleur | $ bouton-fond |
| 3 | $background-hover Au survol, définissez la couleur d'arrière-plan. Réglez sur auto pour que le mixin génère automatiquement une couleur de survol. |
Couleur | $ button-background-hover |
| 4 | $color Représente la couleur du texte du bouton. Réglez sur auto pour générer automatiquement une couleur en fonction de la couleur d'arrière-plan. |
Couleur | $ bouton-couleur |
| 5 | $style Pour créer un bouton creux, définissez-le sur creux . $ background color est utilisé comme couleur primaire du bouton. |
Mot-clé | solide |