Fundación - Botón SASS Reference

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 hace que los estilos predeterminados de este componente se personalicen.

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$button-padding Acolchado dentro de los botones.	Lista	0.85em 1em
2	$button-margin Margen alrededor de botones.	Lista	0 0 $ margen global 0
3	$button-fill Rellenar botones de forma predeterminada. Puede ser macizo o hueco .	Palabra clave	sólido
4	$button-background Color de fondo predeterminado de los botones.	Color	$ color primario
5	$button-background-hover Sobre el color de fondo flotante de los botones	Color	scale-color ($ botón-fondo, $ luminosidad: -15%)
6	$button-color Color de fuente de los botones.	Lista	#fff
7	$button-color-alt Color de fuente del botón, si el fondo es claro.	Lista	# 000
8	$button-radius Representa el radio del borde de los botones, predeterminado en global-radius.	Número	$ radio-global
9	$button-sizes Tamaños de botones.	Mapa	pequeño: 0.6rem pequeño: 0.75rem predeterminado: 0.9rem grande: 1.25rem
10	$button-opacity-disabled Opacidad de un botón, que está deshabilitado.	Lista	0,25

Mixins

Para construir la salida CSS final de este componente, se pueden usar los siguientes mixins. Para construir su propia estructura de clases usando componentes Foundation, puede usar los mixins usted mismo.

botón-expandir

@include button-expand($expand);

Se utiliza para expandir un botón a su ancho completo.

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$expand Establézcalo en verdadero para habilitar la expansión o falso en caso contrario.	Booleano	cierto

estilo botón

@include button-style($background, $background-hover, $color);

Establece el estilo visual del botón.

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$background Color de fondo del botón.	Color	$ botón-fondo
2	$background-hover En el color de fondo de desplazamiento del botón. Establecer en automático generará automáticamente un color para pasar el mouse.	Color	$ button-background-hover
3	$color Color del texto en el botón. Establecer en automático generará automáticamente un color dependiendo del color de fondo.	Color	$ botón-color

botón hueco

@include button-hollow;

Elimina el relleno de fondo de desplazamiento y el foco de botón hueco.

botón desactivado

@include button-disabled;

Al atenuar el elemento, restablecer el cursor y deshabilitar eventos de punteros, agrega estilos deshabilitados a un botón.

botón desplegable

@include button-dropdown($size, $color, $offset);

Agrega una flecha desplegable para un botón.

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$size Representa el tamaño de la flecha. Se recomienda el uso del valor em para que el triángulo escale cuando se use con botones de diferentes tamaños.	Número	0.4em
2	$color Color de la flecha.	Color	blanco
3	$offset Representa la distancia entre el texto y la flecha de un botón.	Número	$ relleno de botones

botón

@include button($expand, $background, $background-hover, $color, $style);

Agrega todos los estilos para un botón.

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$expand Para hacer que el botón sea de ancho completo, establézcalo en verdadero .	Booleano	falso
2	$background Color de fondo del botón.	Color	$ botón-fondo
3	$background-hover Al pasar el mouse, establece el color de fondo. Configúrelo en automático para que el mixin genere color de desplazamiento automáticamente.	Color	$ button-background-hover
4	$color Representa el color del texto del botón. Configure en automático para generar un color según el color de fondo automáticamente.	Color	$ botón-color
5	$style Para crear un botón hueco, configúrelo en hueco . $ background color se utiliza como color primario del botón.	Palabra clave	sólido

↰ Previous page