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 |