Foundation - Reveal Sass Reference

Variáveis

Você pode alterar os estilos dos componentes usando as variáveis SASS, conforme listado na tabela abaixo.

Sr. Não.	Nome e Descrição	Tipo	Valor padrão
1	$reveal-background Ele exibe a cor de fundo de um modal.	Cor	$ branco
2	$reveal-width Ele define a largura do modal.	Número	600px
3	$reveal-max-width Ele especifica a largura máxima de um modal.	Número	$ largura global
4	$reveal-offset Quando você adiciona o modal, ele será deslocado do topo da janela.	Número	rem-calc (100)
5	$reveal-padding Ele define o preenchimento dentro de um modal.	Número	$ global-padding
6	$reveal-border Ele define a borda de um modal.	Número	1px sólido $ médio-cinza
7	$reveal-radius Ele especifica o raio do modal.	Número	$ global-radius
8	$reveal-zindex A sobreposição usa o valor de índice z para modais.	Número	1005
9	$reveal-overlay-background Ele exibe a cor de fundo das sobreposições modais.	Cor	rgba ($ preto, 0,45)

Você pode usar os mixins para construir a estrutura de classes CSS para seus componentes modais de revelação.

Você pode incluir estilos para sobreposição modal usando o seguinte mixin -

@include reveal-overlay($background);

Ele contém um parâmetro conforme especificado na tabela abaixo -

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$background Ele exibe a cor de fundo da sobreposição.	Cor	$ revel-overlay-background

Você pode adicionar estilos básicos para um modal usando o mixin abaixo -

@include reveal-modal-base;

É usado para criar a largura de um modal usando o mixin abaixo -

@include reveal-modal-width($width, $max-width);

Ele contém os seguintes parâmetros, conforme especificado na tabela -

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$width Ele especifica a largura do modal.	Número	Nenhum
2	$max-width Ele especifica a largura máxima do modal.	Número	$ revela-max-largura

Você pode criar modal em tela cheia de acordo com a largura e altura da janela usando o seguinte mixin -

@include reveal-modal-fullscreen;

↰ Previous page