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 |