Foundation - Referência de Media SASS
Descrição
Você pode alterar os estilos dos componentes usando a Referência SASS.
Variáveis
A tabela a seguir lista as variáveis SASS em um arquivo de configurações de projeto que faz com que os estilos padrão deste componente sejam personalizados.
| Sr. Não. | Nome e Descrição | Tipo | Valor padrão |
|---|---|---|---|
| 1 |
$orbit-bullet-background Representa a cor padrão para os marcadores da órbita. |
Cor | $ cinza médio |
| 2 |
$orbit-bullet-background-active Ele representa a cor ativa padrão para os marcadores da órbita. |
Cor | $ cinza escuro |
| 3 |
$orbit-bullet-diameter Ele representa o diâmetro padrão para balas da órbita. |
Número | 1.2 remo |
| 4 |
$orbit-bullet-margin Ele representa a margem padrão entre os marcadores da órbita. |
Número | 0.1rem |
| 5 |
$orbit-bullet-margin-top Ele representa a distância padrão da região do slide para os marcadores da órbita. |
Número | 0.8rem |
| 6 |
$orbit-bullet-margin-bottom Ele representa a margem inferior padrão dos marcadores para o conteúdo abaixo dele. |
Número | 0.8rem |
| 7 |
$orbit-caption-background Ele representa a cor de fundo padrão para a legenda da órbita. |
Cor | rgba ($ preto, 0,5) |
| 8 |
$orbit-caption-padding Ele representa o preenchimento padrão para a legenda da órbita. |
Número | 1rem |
| 9 |
$orbit-control-background-hover Ele representa a cor de plano de fundo padrão para controles quando pairado. |
Cor | rgba ($ preto, 0,5) |
| 10 |
$orbit-control-padding Ele representa o preenchimento padrão para controles da órbita. |
Número | 1rem |
| 11 |
$orbit-control-zindex Ele representa o índice z padrão para controles da órbita. |
Número | 10 |
Mixins
Para construir a saída CSS final deste componente, os seguintes mixins podem ser usados. Para construir sua própria estrutura de classes usando componentes Foundation, você mesmo pode usar os mixins.
orbit-wrapper
@include orbit-wrapper;Ele adiciona estilos ao invólucro da órbita.
orbit-container
@include orbit-container;Ele adiciona estilos ao contêiner de slide orbital interno. É usado na classe .orbit-container .
orbit-slide
@include orbit-slide;Ele adiciona estilos aos slides separados de um controle deslizante. É usado em slides de classe .orbit .
orbit-caption
@include orbit-caption;Ele adiciona estilos à legenda do slide.
orbit-control
@include orbit-control;Adiciona estilos básicos aos botões seguinte e anterior. Os estilos são divididos entre as classes .orbit-next e .orbit-previous no CSS padrão.
órbita anterior
@include orbit-previous;Ele adiciona estilos ao botão anterior. Eles são usados na classe .orbit-previous .
órbita seguinte
@include orbit-next;Ele adiciona estilos ao próximo botão. Eles são usados na classe .orbit-next .
orbit-bullets
@include orbit-bullets;Ele adiciona estilos a um contêiner de marcadores da órbita e adiciona estilos ao botão anterior e são usados na classe .orbit-bullets .