Fundación - Formulario de referencia SASS

Descripción

Puede cambiar los estilos de los componentes utilizando SASS Reference.

Variables

La siguiente tabla enumera las variables SASS en el archivo de configuración de un proyecto que hacen que los estilos predeterminados de este componente se personalicen.

No Señor. Nombre y descripción Tipo Valor por defecto
1

$fieldset-border

Borde predeterminado del conjunto de campos personalizado.

Frontera 1 px sólido $ gris medio
2

$fieldset-padding

Relleno interno predeterminado del conjunto de campos personalizado.

Número rem-calc (20)
3

$fieldset-margin

Margen predeterminado del conjunto de campos personalizado alrededor.

Número rem-calc (18 0)
4

$legend-padding

Relleno entre el texto de la leyenda y el borde del conjunto de campos de forma predeterminada.

Número rem-calc (0 3)
5

$form-spacing

Espaciado global del elemento de forma.

Número rem-calc (16)
6

$helptext-color

Color predeterminado del texto de ayuda.

Color # 333
7

$helptext-font-size

Tamaño de fuente del texto de ayuda por defecto.

Número rem-calc (13)
8

$helptext-font-style

Estilo de fuente del texto de ayuda por defecto.

Palabra clave itálico
9

$input-prefix-color

Representa el color de las etiquetas con el prefijo de una entrada.

Color $ negro
10

$input-prefix-background

Color de fondo de la etiqueta prefijado a una entrada.

Color $ gris claro
11

$input-prefix-border

Borde alrededor de las etiquetas que se antepondrán a una entrada.

Frontera 1 px sólido $ gris medio
12

$input-prefix-padding

Relleno izquierdo / derecho de la etiqueta de entrada prefijada / prefijada.

1rem
13

$form-label-color

Representa el color de las etiquetas de los formularios.

Color $ negro
14

$form-label-font-size

Representa el tamaño de fuente de las etiquetas de formulario.

Número rem-calc (14)
15

$form-label-font-weight

Representa el peso de la fuente para las etiquetas de los formularios.

Palabra clave $ peso-global-normal
dieciséis

$form-label-line-height

Altura de línea para etiquetas del formulario. Un número más alto representa más espacio entre la etiqueta y el campo de entrada.

Número 1.8
17

$select-background

Representa el color de fondo de los menús seleccionados.

Color #fafafa
18

$select-triangle-color

Color del triángulo desplegable. Establecer transparente para eliminarlo por completo.

Color # 333
19

$select-radius

Representa el radio predeterminado para los menús seleccionados.

Color $ radio-global
20

$input-color

Representa el color de fuente de las entradas de texto.

Color $ negro
21

$input-font-family

Representa la familia de fuentes de entradas de texto.

Fuente heredar
22

$input-font-size

Representa el tamaño de fuente de las entradas de texto.

Número rem-calc (16)
23

$input-background

Representa el color de fondo de las entradas de texto.

Color $ blanco
24

$input-background-focus

Representa el color de fondo de las entradas de texto enfocadas.

Color $ blanco
25

$input-background-disabled

Color de fondo de las entradas de texto que están deshabilitadas.

Color $ gris claro
26

$input-border

Representa el borde alrededor de las entradas de texto.

Frontera 1 px sólido $ gris medio
27

$input-border-focus

Representa el borde alrededor de las entradas de texto enfocadas.

Color 1px sólido $ gris oscuro
28

$input-shadow

Representa la sombra del cuadro dentro de las entradas de texto cuando no está enfocado.

Sombra recuadro 0 1px 2px rgba ($ negro, 0.1)
29

$input-shadow-focus

Representa la sombra del cuadro fuera de las entradas de texto cuando se enfoca.

Sombra 0 0 5px $ gris medio
30

$input-cursor-disabled

Representa el cursor que se usa cuando se coloca el cursor sobre la entrada de texto que está deshabilitada.

Cursor defecto
31

$input-transition

Representa propiedades para la transición en entradas de texto.

Transición sombra de cuadro 0,5 s, color de borde 0,25 s fácil entrada y salida
32

$input-number-spinners

Habilita los botones arriba / abajo que Chrome y Firefox agregan a los elementos <input type = 'number'> .

Booleano cierto
33

$input-radius

Representa el radio de las entradas de texto.

Frontera $ radio-global