Fundação - Referência do Form 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 no arquivo de configurações de um projeto que tornam os estilos padrão deste componente personalizados.

Sr. Não. Nome e Descrição Tipo Valor padrão
1

$fieldset-border

Borda padrão do fieldset personalizado.

Fronteira 1px sólido $ médio-cinza
2

$fieldset-padding

Preenchimento interno padrão do fieldset personalizado.

Número rem-calc (20)
3

$fieldset-margin

Margem padrão do fieldset personalizado ao redor.

Número rem-calc (18 0)
4

$legend-padding

Preenchimento entre o texto da legenda e a borda do fieldset por padrão.

Número rem-calc (0 3)
5

$form-spacing

Espaçamento global do elemento do formulário.

Número rem-calc (16)
6

$helptext-color

Cor padrão do texto de ajuda.

Cor # 333
7

$helptext-font-size

Tamanho da fonte do texto de ajuda por padrão.

Número rem-calc (13)
8

$helptext-font-style

Estilo da fonte do texto de ajuda por padrão.

Palavra-chave itálico
9

$input-prefix-color

Representa a cor dos rótulos prefixados a uma entrada.

Cor $ preto
10

$input-prefix-background

Cor de fundo do rótulo prefixada a uma entrada.

Cor $ cinza claro
11

$input-prefix-border

Borda ao redor dos rótulos que serão prefixados a uma entrada.

Fronteira 1px sólido $ médio-cinza
12

$input-prefix-padding

Preenchimento esquerdo / direito do rótulo de entrada pré / pós-fixado.

1rem
13

$form-label-color

Representa a cor dos rótulos dos formulários.

Cor $ preto
14

$form-label-font-size

Representa o tamanho da fonte para rótulos de formulários.

Número rem-calc (14)
15

$form-label-font-weight

Representa o peso da fonte para rótulos de formulário.

Palavra-chave $ global-weight-normal
16

$form-label-line-height

Altura da linha para rótulos do formulário. Um número mais alto representa mais espaço entre o rótulo e o campo de entrada.

Número 1.8
17

$select-background

Representa a cor de fundo para menus selecionados.

Cor #fafafa
18

$select-triangle-color

Cor do triângulo suspenso. Defina transparente para removê-lo completamente.

Cor # 333
19

$select-radius

Representa o raio padrão para menus selecionados.

Cor $ global-radius
20

$input-color

Representa a cor da fonte das entradas de texto.

Cor $ preto
21

$input-font-family

Representa a família de fontes de entradas de texto.

Fonte herdar
22

$input-font-size

Representa o tamanho da fonte das entradas de texto.

Número rem-calc (16)
23

$input-background

Representa a cor de fundo das entradas de texto.

Cor $ branco
24

$input-background-focus

Representa a cor de fundo das entradas de texto em foco.

Cor $ branco
25

$input-background-disabled

Cor de fundo das entradas de texto que estão desativadas.

Cor $ cinza claro
26

$input-border

Representa a borda ao redor das entradas de texto.

Fronteira 1px sólido $ médio-cinza
27

$input-border-focus

Representa a borda ao redor das entradas de texto focadas.

Cor 1px sólido $ cinza escuro
28

$input-shadow

Representa a sombra da caixa nas entradas de texto quando não está focado.

Sombra inserção 0 1px 2px rgba ($ preto, 0,1)
29

$input-shadow-focus

Representa a sombra da caixa fora das entradas de texto quando em foco.

Sombra 0 0 5px $ cinza médio
30

$input-cursor-disabled

Representa o cursor a ser usado ao passar o mouse sobre a entrada de texto que está desativada.

Cursor padrão
31

$input-transition

Representa propriedades para transição em entradas de texto.

Transição sombra de caixa 0,5s, cor de borda 0,25s atenuada
32

$input-number-spinners

Ativa os botões para cima / para baixo que são adicionados aos elementos <input type = 'number'> pelo Chrome e Firefox.

boleano verdadeiro
33

$input-radius

Representa o raio para entradas de texto.

Fronteira $ global-radius