Fundación - Referencia Sass Off-Canvas

Variables

Puede cambiar los estilos de los componentes utilizando las siguientes variables SASS que se enumeran en la tabla:

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

$offcanvas-size

Especifica el ancho del menú fuera del lienzo.

Número 250px
2

$offcanvas-background

Muestra el color de fondo de un menú fuera del lienzo.

Color $ gris claro
3

$offcanvas-zindex

Especifica el índice Z de un menú fuera del lienzo.

Número -1
4

$offcanvas-transition-length

Muestra la duración de la animación en un menú fuera del lienzo.

Número 0,5 s
5

$offcanvas-transition-timing

Especifica la función de temporización de la animación del menú fuera del lienzo.

Palabra clave facilitar
6

$offcanvas-fixed-reveal

Si es verdadero, un fuera del lienzo revelado puede fijar la posición del fuera del lienzo revelado al establecerlo en verdadero.

cierto
7

$offcanvas-exit-background

Muestra el color de fondo de la superposición del menú fuera del lienzo.

Color rgba ($ blanco, 0,25)
8

$maincontent-class

Utiliza la clase CSS para el área de contenido principal.

'contenido fuera del lienzo'
9

$maincontent-shadow

Muestra la sombra del cuadro para el área de contenido principal.

Sombra 0 0 10px rgba ($ negro, 0.5)
10

$titlebar-background

Muestra el color de fondo de una barra de título.

Color $ negro
11

$titlebar-color

Define el color del texto del texto dentro de una barra de título.

Color $ blanco
12

$titlebar-padding

Define el relleno dentro de una barra de título.

Longitud 0.5rem
13

$titlebar-text-font-weight

Especifica el peso de la fuente del texto.

Peso negrita
14

$titlebar-icon-color

Define el color del icono de la barra de título del menú.

Color $ blanco
15

$titlebar-icon-color-hover

Define el color del icono de la barra de título del menú al pasar el mouse.

Color $ gris medio
dieciséis

$titlebar-icon-spacing

Especifica el espacio entre el icono del menú y el texto dentro de una barra de título.

Longitud 0.25rem

Mixins

Puede usar los mixins para construir la estructura de clases CSS para sus componentes como se describe a continuación.

conceptos básicos fuera de la lona

Agrega estilos para fuera del lienzo y los estilos se pueden incluir usando la siguiente combinación:

@include off-canvas-basics;

fuera de lona

Especifica estilos básicos para el menú fuera del lienzo y puede incluir estilos utilizando la siguiente combinación:

@include off-canvas-base;

revelación fuera del lienzo

Especifica estilos que revelan el menú fuera del lienzo.

@include off-canvas-reveal($position);

Se puede especificar como se define en la siguiente tabla:

No Señor. Descripción de parámetros Tipo Valor por defecto
1

$position

Establece la posición del menú fuera del lienzo.

Palabra clave izquierda