Fondazione - Modulo di riferimento SASS
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 | $fieldset-border Bordo predefinito del fieldset personalizzato. |
Confine | 1px solido $ medio-grigio |
2 | $fieldset-padding Padding interno predefinito del fieldset personalizzato. |
Numero | rem-calc (20) |
3 | $fieldset-margin Margine predefinito del fieldset personalizzato intorno. |
Numero | rem-calc (18 0) |
4 | $legend-padding Padding tra il testo della legenda e il bordo del fieldset per impostazione predefinita. |
Numero | rem-calc (0 3) |
5 | $form-spacing Spaziatura globale dell'elemento del modulo. |
Numero | rem-calc (16) |
6 | $helptext-color Colore predefinito del testo della guida. |
Colore | # 333 |
7 | $helptext-font-size Dimensione del carattere del testo della guida per impostazione predefinita. |
Numero | rem-calc (13) |
8 | $helptext-font-style Stile del carattere del testo della guida per impostazione predefinita. |
Parola chiave | corsivo |
9 | $input-prefix-color Rappresenta il colore delle etichette con prefisso a un input. |
Colore | $ nero |
10 | $input-prefix-background Colore di sfondo dell'etichetta con prefisso a un input. |
Colore | $ grigio chiaro |
11 | $input-prefix-border Bordo attorno alle etichette che saranno anteposte a un input. |
Confine | 1px solido $ medio-grigio |
12 | $input-prefix-padding Riempimento sinistro / destro dell'etichetta di input pre / postfissa. |
1rem | |
13 | $form-label-color Rappresenta il colore per le etichette del modulo. |
Colore | $ nero |
14 | $form-label-font-size Rappresenta la dimensione del carattere per le etichette del modulo. |
Numero | rem-calc (14) |
15 | $form-label-font-weight Rappresenta lo spessore del carattere per le etichette del modulo. |
Parola chiave | $ peso-globale-normale |
16 | $form-label-line-height Altezza della riga per le etichette del modulo. Un numero più alto rappresenta più spazio tra l'etichetta e il campo di input. |
Numero | 1.8 |
17 | $select-background Rappresenta il colore di sfondo per i menu selezionati. |
Colore | #fafafa |
18 | $select-triangle-color Colore del triangolo a discesa. Imposta trasparente per rimuoverlo completamente. |
Colore | # 333 |
19 | $select-radius Rappresenta il raggio predefinito per i menu selezionati. |
Colore | $ raggio-globale |
20 | $input-color Rappresenta il colore del carattere degli input di testo. |
Colore | $ nero |
21 | $input-font-family Rappresenta la famiglia di caratteri degli input di testo. |
Font | ereditare |
22 | $input-font-size Rappresenta la dimensione del carattere degli input di testo. |
Numero | rem-calc (16) |
23 | $input-background Rappresenta il colore di sfondo degli input di testo. |
Colore | $ bianco |
24 | $input-background-focus Rappresenta il colore di sfondo degli input di testo focalizzati. |
Colore | $ bianco |
25 | $input-background-disabled Colore di sfondo degli input di testo disabilitati. |
Colore | $ grigio chiaro |
26 | $input-border Rappresenta il bordo attorno agli input di testo. |
Confine | 1px solido $ medio-grigio |
27 | $input-border-focus Rappresenta il bordo attorno agli input di testo focalizzati. |
Colore | 1px solido $ grigio scuro |
28 | $input-shadow Rappresenta l'ombra del riquadro negli input di testo quando non è a fuoco. |
Ombra | inserto 0 1px 2px rgba ($ nero, 0,1) |
29 | $input-shadow-focus Rappresenta l'ombra del riquadro all'esterno degli input di testo quando è attivo. |
Ombra | 0 0 5px $ grigio medio |
30 | $input-cursor-disabled Rappresenta il cursore da utilizzare quando si passa con il mouse sull'input di testo che è disabilitato. |
Cursore | predefinito |
31 | $input-transition Rappresenta le proprietà di transizione sugli input di testo. |
Transizione | box-shadow 0,5s, bordo-colore 0,25s facilità di uscita |
32 | $input-number-spinners Abilita i pulsanti su / giù aggiunti agli elementi <input type = 'number'> da Chrome e Firefox. |
Booleano | vero |
33 | $input-radius Rappresenta il raggio per gli input di testo. |
Confine | $ raggio-globale |