Foundation - Callout SASS Reference

Variáveis

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

Sr. Não.	Nome e Descrição	Tipo	Valor padrão
1	$callout-background Ele define a cor de fundo padrão.	Cor	$ branco
2	$callout-background-fade Ele especifica o valor de esmaecimento para fundos de texto explicativo.	Número	85%
3	$callout-border Ele exibe o estilo da borda para textos explicativos.	Lista	1px sólido rgba ($ preto, 0,25)
4	$callout-margin Ele exibe a margem inferior dos textos explicativos.	Número	0 0 1rem 0
5	$callout-padding Ele fornece preenchimento interno de textos explicativos.	Número	1rem
6	$callout-font-color Ele define a cor da fonte dos textos explicativos.	Cor	$ body-font-color
7	$callout-font-color-alt Ele define a cor da fonte dos textos explicativos se houver um fundo escuro para os textos explicativos.	Cor	$ body-background
8	$callout-radius Ele define o raio da fronteira para chamadas.	Cor	$ global-radius
9	$callout-link-tint Ele fornece links de tonalidade para painéis coloridos e pode ser desativado definindo-o como falso.	Número ou Booleano	30%

Você pode usar os mixins para construir a estrutura de classes CSS para seus componentes, conforme descrito abaixo.

Ele adiciona estilos como preenchimento, margem a um texto explicativo e estilos podem ser incluídos usando o seguinte mixin -

@include callout-base

Ele especifica estilos rápidos usando uma única cor como base para o texto explicativo e você pode incluir estilos usando o seguinte mixin -

@include callout-style($color);

Pode ser especificado conforme definido na tabela a seguir -

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$color Ele define a cor de fundo do texto explicativo.	Cor	$ callout-background

Ele especifica estilos para texto explicativo e pode incluir estilos usando o seguinte mixin -

@include callout($color);

Pode ser determinado conforme mostrado na tabela abaixo -

Sr. Não.	Parâmetro e Descrição	Tipo	Valor padrão
1	$color Ele define a cor de fundo do texto explicativo.	Cor	$ callout-background

↰ Previous page