Fundação - Referência do botão 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 | $button-padding Preenchimento nos botões. |
Lista | 0.85em 1em |
| 2 | $button-margin Margem em torno dos botões. |
Lista | 0 0 $ margem global 0 |
| 3 | $button-fill Preencha os botões por padrão. Pode ser sólido ou oco . |
Palavra-chave | sólido |
| 4 | $button-background Cor de fundo padrão dos botões. |
Cor | $ cor primária |
| 5 | $button-background-hover Ao pairar a cor de fundo dos botões |
Cor | escala-cor ($ botão-fundo, $ luminosidade: -15%) |
| 6 | $button-color Cor da fonte dos botões. |
Lista | #fff |
| 7 | $button-color-alt Cor da fonte do botão, se o fundo for claro. |
Lista | # 000 |
| 8 | $button-radius Representa o raio da borda dos botões, padronizado como raio global. |
Número | $ global-radius |
| 9 | $button-sizes Tamanhos dos botões. |
Mapa | minúsculo: 0,6 rem. pequeno: 0,75 rem. padrão: 0,9 rem. grande: 1,25 rem. |
| 10 | $button-opacity-disabled Opacidade de um botão, que está desativada. |
Lista | 0,25 |
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.
botão-expandir
@include button-expand($expand);É usado para expandir um botão para sua largura total.
| Sr. Não. | Parâmetro e Descrição | Tipo | Valor padrão |
|---|---|---|---|
| 1 | $expand Defina como verdadeiro para ativar a expansão ou falso caso contrário. |
boleano | verdadeiro |
estilo botão
@include button-style($background, $background-hover, $color);Ele define o estilo visual do botão.
| Sr. Não. | Parâmetro e Descrição | Tipo | Valor padrão |
|---|---|---|---|
| 1 | $background Cor de fundo do botão. |
Cor | $ botão-fundo |
| 2 | $background-hover Ao passar o mouse sobre a cor de fundo do botão. Definir como automático irá gerar automaticamente uma cor para pairar. |
Cor | $ button-background-hover |
| 3 | $color Cor do texto no botão. Definir como automático irá gerar automaticamente uma cor dependendo da cor de fundo. |
Cor | $ botão-cor |
oco
@include button-hollow;Ele remove o preenchimento do plano de fundo flutuante e o foco do botão vazio.
botão desabilitado
@include button-disabled;Ao esmaecer o elemento, redefinir o cursor e desabilitar eventos de ponteiros, ele adiciona estilos desabilitados a um botão.
botão suspenso
@include button-dropdown($size, $color, $offset);Ele adiciona uma seta suspensa para um botão.
| Sr. Não. | Parâmetro e Descrição | Tipo | Valor padrão |
|---|---|---|---|
| 1 | $size Ele representa o tamanho da seta. O uso do valor em é recomendado para que o triângulo seja dimensionado quando usado em diferentes tamanhos de botão. |
Número | 0,4em |
| 2 | $color Cor da flecha. |
Cor | branco |
| 3 | $offset Representa a distância entre o texto e a seta de um botão. |
Número | $ padding de botão |
botão
@include button($expand, $background, $background-hover, $color, $style);Ele adiciona todos os estilos para um botão.
| Sr. Não. | Parâmetro e Descrição | Tipo | Valor padrão |
|---|---|---|---|
| 1 | $expand Para tornar o botão de largura total, defina-o como verdadeiro . |
boleano | falso |
| 2 | $background Cor de fundo do botão. |
Cor | $ botão-fundo |
| 3 | $background-hover Ao passar o mouse, defina a cor de fundo. Defina como automático para fazer o mixin gerar cores flutuantes automaticamente. |
Cor | $ button-background-hover |
| 4 | $color Representa a cor do texto do botão. Defina como automático para gerar uma cor dependendo da cor de fundo automaticamente. |
Cor | $ botão-cor |
| 5 | $style Para criar um botão vazio, defina-o como vazio . $ cor de fundo é usada como cor primária do botão. |
Palavra-chave | sólido |