Fondazione - Reveal Sass Reference
Variabili
È possibile modificare gli stili dei componenti utilizzando le variabili SASS come elencato nella tabella riportata di seguito.
| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 | $reveal-background Visualizza il colore di sfondo di un modale. |
Colore | $ bianco |
| 2 | $reveal-width Definisce la larghezza del modale. |
Numero | 600px |
| 3 | $reveal-max-width Specifica la larghezza massima di un modale. |
Numero | $ larghezza globale |
| 4 | $reveal-offset Quando aggiungi il modale, verrà spostato dalla parte superiore della finestra. |
Numero | rem-calc (100) |
| 5 | $reveal-padding Definisce il padding all'interno di un modal. |
Numero | $ global-padding |
| 6 | $reveal-border Imposta il confine per un modale. |
Numero | 1px solido $ medio-grigio |
| 7 | $reveal-radius Specifica il raggio per il modale. |
Numero | $ raggio-globale |
| 8 | $reveal-zindex La sovrapposizione utilizza il valore z-index per le modali. |
Numero | 1005 |
| 9 | $reveal-overlay-background Visualizza il colore di sfondo delle sovrapposizioni modali. |
Colore | rgba ($ nero, 0,45) |
Mixins
Puoi usare i mixin per costruire la struttura della classe CSS per i tuoi componenti modali di rivelazione.
rivelare-sovrapposizione
Puoi includere stili per la sovrapposizione modale utilizzando il seguente mixin:
@include reveal-overlay($background);Contiene un parametro come specificato nella tabella seguente -
| Sr.No. | Parametro e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 | $background Visualizza il colore di sfondo della sovrapposizione. |
Colore | $ reveal-overlay-background |
rivelare-modale-base
Puoi aggiungere stili di base per un modale usando il mixin di seguito -
@include reveal-modal-base;rivela-larghezza-modale
Viene utilizzato per creare la larghezza di un modale utilizzando il mixin sottostante:
@include reveal-modal-width($width, $max-width);Contiene i seguenti parametri come specificato nella tabella:
| Sr.No. | Parametro e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 | $width Specifica la larghezza del modale. |
Numero | Nessuna |
| 2 | $max-width Specifica la larghezza massima del modale. |
Numero | $ reveal-max-width |
rivelare-modale-a schermo intero
È possibile creare modali a schermo intero in base alla larghezza e all'altezza della finestra utilizzando il seguente mixin:
@include reveal-modal-fullscreen;