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 |