Foundation - Button SASS Riferimento

Descrizione

È possibile modificare gli stili dei componenti utilizzando SASS Reference.

Variabili

La tabella seguente elenca le variabili SASS nel file delle impostazioni di un progetto che rendono gli stili predefiniti di questo componente personalizzabili.

Sr.No. Nome e descrizione genere Valore predefinito
1

$button-padding

Imbottitura all'interno dei bottoni.

 Elenco 0.85em 1em
2

$button-margin

Margine intorno ai pulsanti.

 Elenco 0 0 $ margine globale 0
3

$button-fill

Riempi i pulsanti per impostazione predefinita. Può essere solido o cavo .

 Parola chiave solido
4

$button-background

Colore di sfondo predefinito dei pulsanti.

 Colore $ colore-primario
5

$button-background-hover

Al passaggio del colore di sfondo dei pulsanti

 Colore scale-color ($ button-background, $ lightness: -15%)
6

$button-color

Colore del carattere dei pulsanti.

 Elenco #F F F
7

$button-color-alt

Colore del carattere del pulsante, se lo sfondo è chiaro.

 Elenco # 000
8

$button-radius

Rappresenta il raggio del bordo dei pulsanti, impostato per impostazione predefinita su raggio globale.

 Numero $ raggio-globale
9

$button-sizes

Dimensioni dei pulsanti.

 Carta geografica minuscolo: 0.6rem
piccolo: 0.75rem
predefinito: 0.9rem
grande: 1.25rem
10

$button-opacity-disabled

Opacità di un pulsante, che è disabilitato.

 Elenco 0.25

Mixins

Per creare l'output CSS finale di questo componente, è possibile utilizzare i seguenti mixin. Per costruire la tua struttura di classe usando i componenti Foundation, puoi usare tu stesso i mixin.

pulsante di espansione

@include button-expand($expand);

Viene utilizzato per espandere un pulsante a tutta larghezza.

Sr.No. Parametro e descrizione genere Valore predefinito
1

$expand

Impostare su true per abilitare l'espansione o false in caso contrario.

 Booleano vero

stile pulsante

@include button-style($background, $background-hover, $color);

Imposta lo stile di visualizzazione del pulsante.

Sr.No. Parametro e descrizione genere Valore predefinito
1

$background

Colore di sfondo del pulsante.

 Colore $ sfondo pulsante
2

$background-hover

Al passaggio del mouse il colore di sfondo del pulsante. Impostato su automatico genererà automaticamente un colore per il passaggio del mouse.

 Colore $ button-background-hover
3

$color

Colore del testo sul pulsante. Impostato su automatico genererà automaticamente un colore a seconda del colore di sfondo.

 Colore $ button-color

pulsante-cavo

@include button-hollow;

Rimuove il riempimento dello sfondo al passaggio del mouse e la messa a fuoco del pulsante vuoto.

pulsante disattivato

@include button-disabled;

Dissolvendo l'elemento, resettando il cursore e disabilitando gli eventi dei puntatori, aggiunge stili disabilitati a un pulsante.

pulsante a discesa

@include button-dropdown($size, $color, $offset);

Aggiunge una freccia a discesa per un pulsante.

Sr.No. Parametro e descrizione genere Valore predefinito
1

$size

Rappresenta la dimensione della freccia. Si consiglia di utilizzare il valore em in modo che il triangolo venga ridimensionato se utilizzato con pulsanti di dimensioni diverse.

 Numero 0.4em
2

$color

Colore della freccia.

 Colore bianca
3

$offset

Rappresenta la distanza tra il testo di un pulsante e la freccia.

 Numero $ imbottitura dei pulsanti

pulsante

@include button($expand, $background, $background-hover, $color, $style);

Aggiunge ogni stile per un pulsante.

Sr.No. Parametro e descrizione genere Valore predefinito
1

$expand

Per rendere il pulsante a larghezza intera, impostalo su true .

 Booleano falso
2

$background

Colore di sfondo del pulsante.

 Colore $ sfondo pulsante
3

$background-hover

Al passaggio del mouse, imposta il colore di sfondo. Impostare su auto per fare in modo che il mixin generi automaticamente il colore al passaggio del mouse.

 Colore $ button-background-hover
4

$color

Rappresenta il colore del testo del pulsante. Impostare su auto per generare automaticamente un colore in base al colore di sfondo.

 Colore $ button-color
5

$style

Per creare un pulsante vuoto, impostalo su vuoto . $ colore di sfondo viene utilizzato come colore primario del pulsante.

 Parola chiave solido