nav
This commit is contained in:
parent
d496228b31
commit
6690a1ec7d
424
web/app/themes/la_mine/dist/assets/css/index.css
vendored
424
web/app/themes/la_mine/dist/assets/css/index.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -9,6 +9,7 @@ function slides() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// console.log('carrousell');
|
// console.log('carrousell');
|
||||||
// if (Home != null) {
|
// if (Home != null) {
|
||||||
// var flkty = new Flickity( Home, {
|
// var flkty = new Flickity( Home, {
|
||||||
@ -112,9 +113,9 @@ function click_nav() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
$( document ).ready(function() {
|
$( document ).ready(function() {
|
||||||
|
burger();
|
||||||
slides();
|
slides();
|
||||||
// masonry();
|
// masonry();
|
||||||
// burger();
|
|
||||||
// paralax();
|
// paralax();
|
||||||
// isotope();
|
// isotope();
|
||||||
// drag();
|
// drag();
|
||||||
|
|||||||
@ -48,7 +48,13 @@ header{
|
|||||||
}
|
}
|
||||||
&.nav-main{
|
&.nav-main{
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
|
align-items: baseline;
|
||||||
|
padding-top: $padTopNav;
|
||||||
|
& > * {
|
||||||
|
height: max-content;
|
||||||
|
}
|
||||||
figure{
|
figure{
|
||||||
|
justify-content: end;
|
||||||
& > div{
|
& > div{
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -57,8 +63,84 @@ header{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.burger{
|
||||||
|
position: relative;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
.fond-burger{
|
||||||
|
width: $widthburger;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url('../images/form_burger.svg');
|
||||||
|
background-repeat: no-repeat; /* Do not repeat the image */
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
}
|
||||||
nav{
|
nav{
|
||||||
display: none;
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
right: 0rem;
|
||||||
|
left: 0rem;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
background: $colorWhite;
|
||||||
|
z-index: -1;
|
||||||
|
overflow: auto;
|
||||||
|
& > ul{
|
||||||
|
padding-top: calc( #{$widthburger} + #{$padTopNav} + 1rem );
|
||||||
|
li{
|
||||||
|
text-align: center;
|
||||||
|
a{
|
||||||
|
display: block;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
background-color: $colorWhite;
|
||||||
|
color: $colorBlack;
|
||||||
|
transition: 0.2s all ease;
|
||||||
|
text-decoration: none;
|
||||||
|
&:hover{
|
||||||
|
background-color: $colorBlack;
|
||||||
|
color: $colorWhite;
|
||||||
|
transition: 0.2s all ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 576px) {
|
||||||
|
position: absolute;
|
||||||
|
right: 1rem;
|
||||||
|
top:calc( #{$widthburger} + #{$padTopNav} + 1rem );
|
||||||
|
width: max-content;
|
||||||
|
left: auto;
|
||||||
|
height: auto;
|
||||||
|
z-index: 999;
|
||||||
|
& > ul{
|
||||||
|
padding-top: 0;
|
||||||
|
border: 5px solid black;
|
||||||
|
& > li{
|
||||||
|
&:first-of-type{
|
||||||
|
& > ul{
|
||||||
|
height: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
& > ul{
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not(:first-of-type){
|
||||||
|
& > a {
|
||||||
|
border-top: 5px solid black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.is-active{
|
||||||
|
nav{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,6 +8,10 @@ body{
|
|||||||
background: $color;
|
background: $color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Menu
|
||||||
|
@mixin anim_open_horizontal{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
// GLOBAL
|
// GLOBAL
|
||||||
@mixin vertical-align{
|
@mixin vertical-align{
|
||||||
@ -48,29 +52,29 @@ body{
|
|||||||
}
|
}
|
||||||
|
|
||||||
@mixin wysiwyg{
|
@mixin wysiwyg{
|
||||||
h1{}
|
// h1{}
|
||||||
h2{}
|
// h2{}
|
||||||
h3{}
|
// h3{}
|
||||||
h4{}
|
// h4{}
|
||||||
h5{}
|
// h5{}
|
||||||
h6{}
|
// h6{}
|
||||||
strong{}
|
// strong{}
|
||||||
b{}
|
// b{}
|
||||||
em{}
|
// em{}
|
||||||
i{}
|
// i{}
|
||||||
a{}
|
// a{}
|
||||||
u{}
|
// u{}
|
||||||
sup{}
|
// sup{}
|
||||||
p{
|
p{
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
strong{}
|
// strong{}
|
||||||
sup{}
|
// sup{}
|
||||||
u{}
|
// u{}
|
||||||
a{}
|
// a{}
|
||||||
b{}
|
// b{}
|
||||||
i{}
|
// i{}
|
||||||
em{}
|
// em{}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,10 @@
|
|||||||
// color
|
// color
|
||||||
$colorWhite: white;
|
$colorWhite: white;
|
||||||
$colorYellow:#ffcc00;
|
$colorYellow:#ffcc00;
|
||||||
|
$colorBlack:black;
|
||||||
|
|
||||||
$heightLogo: 115px;
|
$heightLogo: 115px;
|
||||||
|
|
||||||
$heightLogoHover: 100px;
|
$heightLogoHover: 100px;
|
||||||
|
|
||||||
|
$widthburger: 50px;
|
||||||
|
$padTopNav : 1rem;
|
||||||
86
web/app/themes/la_mine/src/assets/scss/hamburgers/_base.scss
Normal file
86
web/app/themes/la_mine/src/assets/scss/hamburgers/_base.scss
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
// Hamburger
|
||||||
|
// ==================================================
|
||||||
|
.hamburger {
|
||||||
|
padding: $hamburger-padding-y $hamburger-padding-x;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
transition-property: opacity, filter;
|
||||||
|
transition-duration: 0.15s;
|
||||||
|
transition-timing-function: linear;
|
||||||
|
|
||||||
|
// Normalize (<button>)
|
||||||
|
font: inherit;
|
||||||
|
color: inherit;
|
||||||
|
text-transform: none;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@if $hamburger-hover-use-filter == true {
|
||||||
|
filter: $hamburger-hover-filter;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
opacity: $hamburger-hover-opacity;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
&:hover {
|
||||||
|
@if $hamburger-hover-use-filter == true {
|
||||||
|
filter: $hamburger-active-hover-filter;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
opacity: $hamburger-active-hover-opacity;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-inner,
|
||||||
|
.hamburger-inner::before,
|
||||||
|
.hamburger-inner::after {
|
||||||
|
background-color: $hamburger-active-layer-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-box {
|
||||||
|
width: $hamburger-layer-width;
|
||||||
|
height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-inner {
|
||||||
|
display: block;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: $hamburger-layer-height / -2;
|
||||||
|
|
||||||
|
&,
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
width: $hamburger-layer-width;
|
||||||
|
height: $hamburger-layer-height;
|
||||||
|
background-color: $hamburger-layer-color;
|
||||||
|
border-radius: $hamburger-layer-border-radius;
|
||||||
|
position: absolute;
|
||||||
|
transition-property: transform;
|
||||||
|
transition-duration: 0.15s;
|
||||||
|
transition-timing-function: ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,118 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
/*!
|
||||||
|
* Hamburgers
|
||||||
|
* @description Tasty CSS-animated hamburgers
|
||||||
|
* @author Jonathan Suh @jonsuh
|
||||||
|
* @site https://jonsuh.com/hamburgers
|
||||||
|
* @link https://github.com/jonsuh/hamburgers
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Settings
|
||||||
|
// ==================================================
|
||||||
|
$hamburger-padding-x : 15px !default;
|
||||||
|
$hamburger-padding-y : 13px !default;
|
||||||
|
$hamburger-layer-width : 20px !default;
|
||||||
|
$hamburger-layer-height : 2px !default;
|
||||||
|
$hamburger-layer-spacing : 4px !default;
|
||||||
|
$hamburger-layer-color : #000 !default;
|
||||||
|
$hamburger-layer-border-radius : 4px !default;
|
||||||
|
$hamburger-hover-opacity : 0.7 !default;
|
||||||
|
$hamburger-active-layer-color : $hamburger-layer-color !default;
|
||||||
|
$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
|
||||||
|
|
||||||
|
// To use CSS filters as the hover effect instead of opacity,
|
||||||
|
// set $hamburger-hover-use-filter as true and
|
||||||
|
// change the value of $hamburger-hover-filter accordingly.
|
||||||
|
$hamburger-hover-use-filter : false !default;
|
||||||
|
$hamburger-hover-filter : opacity(50%) !default;
|
||||||
|
$hamburger-active-hover-filter: $hamburger-hover-filter !default;
|
||||||
|
|
||||||
|
// Types (Remove or comment out what you don’t need)
|
||||||
|
// ==================================================
|
||||||
|
$hamburger-types: (
|
||||||
|
3dx,
|
||||||
|
3dx-r,
|
||||||
|
3dy,
|
||||||
|
3dy-r,
|
||||||
|
3dxy,
|
||||||
|
3dxy-r,
|
||||||
|
arrow,
|
||||||
|
arrow-r,
|
||||||
|
arrowalt,
|
||||||
|
arrowalt-r,
|
||||||
|
arrowturn,
|
||||||
|
arrowturn-r,
|
||||||
|
boring,
|
||||||
|
collapse,
|
||||||
|
collapse-r,
|
||||||
|
elastic,
|
||||||
|
elastic-r,
|
||||||
|
emphatic,
|
||||||
|
emphatic-r,
|
||||||
|
minus,
|
||||||
|
slider,
|
||||||
|
slider-r,
|
||||||
|
spin,
|
||||||
|
spin-r,
|
||||||
|
spring,
|
||||||
|
spring-r,
|
||||||
|
stand,
|
||||||
|
stand-r,
|
||||||
|
squeeze,
|
||||||
|
vortex,
|
||||||
|
vortex-r
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
// Base Hamburger (We need this)
|
||||||
|
// ==================================================
|
||||||
|
@import "base";
|
||||||
|
|
||||||
|
// Hamburger types
|
||||||
|
// ==================================================
|
||||||
|
@import "types/3dx";
|
||||||
|
@import "types/3dx-r";
|
||||||
|
@import "types/3dy";
|
||||||
|
@import "types/3dy-r";
|
||||||
|
@import "types/3dxy";
|
||||||
|
@import "types/3dxy-r";
|
||||||
|
@import "types/arrow";
|
||||||
|
@import "types/arrow-r";
|
||||||
|
@import "types/arrowalt";
|
||||||
|
@import "types/arrowalt-r";
|
||||||
|
@import "types/arrowturn";
|
||||||
|
@import "types/arrowturn-r";
|
||||||
|
@import "types/boring";
|
||||||
|
@import "types/collapse";
|
||||||
|
@import "types/collapse-r";
|
||||||
|
@import "types/elastic";
|
||||||
|
@import "types/elastic-r";
|
||||||
|
@import "types/emphatic";
|
||||||
|
@import "types/emphatic-r";
|
||||||
|
@import "types/minus";
|
||||||
|
@import "types/slider";
|
||||||
|
@import "types/slider-r";
|
||||||
|
@import "types/spin";
|
||||||
|
@import "types/spin-r";
|
||||||
|
@import "types/spring";
|
||||||
|
@import "types/spring-r";
|
||||||
|
@import "types/stand";
|
||||||
|
@import "types/stand-r";
|
||||||
|
@import "types/squeeze";
|
||||||
|
@import "types/vortex";
|
||||||
|
@import "types/vortex-r";
|
||||||
|
|
||||||
|
// ==================================================
|
||||||
|
// Cooking up additional types:
|
||||||
|
//
|
||||||
|
// The Sass for each hamburger type should be nested
|
||||||
|
// inside an @if directive to check whether or not
|
||||||
|
// it exists in $hamburger-types so only the CSS for
|
||||||
|
// included types are generated.
|
||||||
|
//
|
||||||
|
// e.g. hamburgers/types/_new-type.scss
|
||||||
|
//
|
||||||
|
// @if index($hamburger-types, new-type) {
|
||||||
|
// .hamburger--new-type {
|
||||||
|
// ...
|
||||||
|
// }
|
||||||
|
// }
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
@if index($hamburger-types, 3dx-r) {
|
||||||
|
/*
|
||||||
|
* 3DX Reverse
|
||||||
|
*/
|
||||||
|
.hamburger--3dx-r {
|
||||||
|
.hamburger-box {
|
||||||
|
perspective: $hamburger-layer-width * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-inner {
|
||||||
|
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||||
|
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
background-color: transparent !important;
|
||||||
|
transform: rotateY(-180deg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
@if index($hamburger-types, 3dx) {
|
||||||
|
/*
|
||||||
|
* 3DX
|
||||||
|
*/
|
||||||
|
.hamburger--3dx {
|
||||||
|
.hamburger-box {
|
||||||
|
perspective: $hamburger-layer-width * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-inner {
|
||||||
|
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||||
|
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
background-color: transparent !important;
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
@if index($hamburger-types, 3dxy-r) {
|
||||||
|
/*
|
||||||
|
* 3DXY Reverse
|
||||||
|
*/
|
||||||
|
.hamburger--3dxy-r {
|
||||||
|
.hamburger-box {
|
||||||
|
perspective: $hamburger-layer-width * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-inner {
|
||||||
|
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||||
|
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
background-color: transparent !important;
|
||||||
|
transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
@if index($hamburger-types, 3dxy) {
|
||||||
|
/*
|
||||||
|
* 3DXY
|
||||||
|
*/
|
||||||
|
.hamburger--3dxy {
|
||||||
|
.hamburger-box {
|
||||||
|
perspective: $hamburger-layer-width * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-inner {
|
||||||
|
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||||
|
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
background-color: transparent !important;
|
||||||
|
transform: rotateX(180deg) rotateY(180deg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
@if index($hamburger-types, 3dy-r) {
|
||||||
|
/*
|
||||||
|
* 3DY Reverse
|
||||||
|
*/
|
||||||
|
.hamburger--3dy-r {
|
||||||
|
.hamburger-box {
|
||||||
|
perspective: $hamburger-layer-width * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-inner {
|
||||||
|
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||||
|
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
background-color: transparent !important;
|
||||||
|
transform: rotateX(180deg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
@if index($hamburger-types, 3dy) {
|
||||||
|
/*
|
||||||
|
* 3DY
|
||||||
|
*/
|
||||||
|
.hamburger--3dy {
|
||||||
|
.hamburger-box {
|
||||||
|
perspective: $hamburger-layer-width * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-inner {
|
||||||
|
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||||
|
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
background-color: transparent !important;
|
||||||
|
transform: rotateX(-180deg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transform: translate3d(0, $hamburger-layer-height + $hamburger-layer-spacing, 0) rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: translate3d(0, ($hamburger-layer-height + $hamburger-layer-spacing) * -1, 0) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
@if index($hamburger-types, arrow-r) {
|
||||||
|
/*
|
||||||
|
* Arrow Right
|
||||||
|
*/
|
||||||
|
.hamburger--arrow-r.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
&::before {
|
||||||
|
transform: translate3d($hamburger-layer-width * 0.2, 0, 0) rotate(45deg) scale(0.7, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: translate3d($hamburger-layer-width * 0.2, 0, 0) rotate(-45deg) scale(0.7, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
@if index($hamburger-types, arrow) {
|
||||||
|
/*
|
||||||
|
* Arrow
|
||||||
|
*/
|
||||||
|
.hamburger--arrow.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
&::before {
|
||||||
|
transform: translate3d($hamburger-layer-width * -0.2, 0, 0) rotate(-45deg) scale(0.7, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: translate3d($hamburger-layer-width * -0.2, 0, 0) rotate(45deg) scale(0.7, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
@if index($hamburger-types, arrowalt-r) {
|
||||||
|
/*
|
||||||
|
* Arrow Alt Right
|
||||||
|
*/
|
||||||
|
.hamburger--arrowalt-r {
|
||||||
|
.hamburger-inner {
|
||||||
|
&::before {
|
||||||
|
transition: top 0.1s 0.1s ease,
|
||||||
|
transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transition: bottom 0.1s 0.1s ease,
|
||||||
|
transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
transform: translate3d($hamburger-layer-width * 0.2, $hamburger-layer-width * -0.25, 0) rotate(45deg) scale(0.7, 1);
|
||||||
|
transition: top 0.1s ease,
|
||||||
|
transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
bottom: 0;
|
||||||
|
transform: translate3d($hamburger-layer-width * 0.2, $hamburger-layer-width * 0.25, 0) rotate(-45deg) scale(0.7, 1);
|
||||||
|
transition: bottom 0.1s ease,
|
||||||
|
transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
@if index($hamburger-types, arrowalt) {
|
||||||
|
/*
|
||||||
|
* Arrow Alt
|
||||||
|
*/
|
||||||
|
.hamburger--arrowalt {
|
||||||
|
.hamburger-inner {
|
||||||
|
&::before {
|
||||||
|
transition: top 0.1s 0.1s ease,
|
||||||
|
transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transition: bottom 0.1s 0.1s ease,
|
||||||
|
transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
transform: translate3d($hamburger-layer-width * -0.2, $hamburger-layer-width * -0.25, 0) rotate(-45deg) scale(0.7, 1);
|
||||||
|
transition: top 0.1s ease,
|
||||||
|
transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
bottom: 0;
|
||||||
|
transform: translate3d($hamburger-layer-width * -0.2, $hamburger-layer-width * 0.25, 0) rotate(45deg) scale(0.7, 1);
|
||||||
|
transition: bottom 0.1s ease,
|
||||||
|
transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
@if index($hamburger-types, arrowturn-r) {
|
||||||
|
/*
|
||||||
|
* Arrow Turn Right
|
||||||
|
*/
|
||||||
|
.hamburger--arrowturn-r.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
@if index($hamburger-types, arrowturn) {
|
||||||
|
/*
|
||||||
|
* Arrow Turn
|
||||||
|
*/
|
||||||
|
.hamburger--arrowturn.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
@if index($hamburger-types, boring) {
|
||||||
|
/*
|
||||||
|
* Boring
|
||||||
|
*/
|
||||||
|
.hamburger--boring {
|
||||||
|
.hamburger-inner {
|
||||||
|
&,
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
transition-property: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
bottom: 0;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
@if index($hamburger-types, collapse-r) {
|
||||||
|
/*
|
||||||
|
* Collapse Reverse
|
||||||
|
*/
|
||||||
|
.hamburger--collapse-r {
|
||||||
|
.hamburger-inner {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
transition-duration: 0.13s;
|
||||||
|
transition-delay: 0.13s;
|
||||||
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
|
||||||
|
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||||
|
opacity 0.1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||||
|
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(45deg);
|
||||||
|
transition-delay: 0.22s;
|
||||||
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||||
|
opacity 0.1s 0.22s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||||
|
transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
@if index($hamburger-types, collapse) {
|
||||||
|
/*
|
||||||
|
* Collapse
|
||||||
|
*/
|
||||||
|
.hamburger--collapse {
|
||||||
|
.hamburger-inner {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
transition-duration: 0.13s;
|
||||||
|
transition-delay: 0.13s;
|
||||||
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
|
||||||
|
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||||
|
opacity 0.1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||||
|
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(-45deg);
|
||||||
|
transition-delay: 0.22s;
|
||||||
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||||
|
opacity 0.1s 0.22s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||||
|
transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
@if index($hamburger-types, elastic-r) {
|
||||||
|
/*
|
||||||
|
* Elastic Reverse
|
||||||
|
*/
|
||||||
|
.hamburger--elastic-r {
|
||||||
|
.hamburger-inner {
|
||||||
|
top: $hamburger-layer-height / 2;
|
||||||
|
transition-duration: 0.275s;
|
||||||
|
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: $hamburger-layer-height + $hamburger-layer-spacing;
|
||||||
|
transition: opacity 0.125s 0.275s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
|
||||||
|
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
$y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
|
||||||
|
|
||||||
|
transform: translate3d(0, $y-offset, 0) rotate(-135deg);
|
||||||
|
transition-delay: 0.075s;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transition-delay: 0s;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: translate3d(0, $y-offset * -2, 0) rotate(270deg);
|
||||||
|
transition-delay: 0.075s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
@if index($hamburger-types, elastic) {
|
||||||
|
/*
|
||||||
|
* Elastic
|
||||||
|
*/
|
||||||
|
.hamburger--elastic {
|
||||||
|
.hamburger-inner {
|
||||||
|
top: $hamburger-layer-height / 2;
|
||||||
|
transition-duration: 0.275s;
|
||||||
|
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: $hamburger-layer-height + $hamburger-layer-spacing;
|
||||||
|
transition: opacity 0.125s 0.275s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
|
||||||
|
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
$y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
|
||||||
|
|
||||||
|
transform: translate3d(0, $y-offset, 0) rotate(135deg);
|
||||||
|
transition-delay: 0.075s;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transition-delay: 0s;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: translate3d(0, $y-offset * -2, 0) rotate(-270deg);
|
||||||
|
transition-delay: 0.075s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
@if index($hamburger-types, emphatic-r) {
|
||||||
|
/*
|
||||||
|
* Emphatic Reverse
|
||||||
|
*/
|
||||||
|
.hamburger--emphatic-r {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.hamburger-inner {
|
||||||
|
transition: background-color 0.125s 0.175s ease-in;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: 0;
|
||||||
|
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
||||||
|
top 0.05s 0.125s linear,
|
||||||
|
left 0.125s 0.175s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: ($hamburger-layer-height) + ($hamburger-layer-spacing);
|
||||||
|
right: 0;
|
||||||
|
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
||||||
|
top 0.05s 0.125s linear,
|
||||||
|
right 0.125s 0.175s ease-in;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
transition-delay: 0s;
|
||||||
|
transition-timing-function: ease-out;
|
||||||
|
background-color: transparent !important;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: $hamburger-layer-width * -2;
|
||||||
|
top: $hamburger-layer-width * 2;
|
||||||
|
transform: translate3d($hamburger-layer-width * 2, $hamburger-layer-width * -2, 0) rotate(-45deg);
|
||||||
|
transition: left 0.125s ease-out,
|
||||||
|
top 0.05s 0.125s linear,
|
||||||
|
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
right: $hamburger-layer-width * -2;
|
||||||
|
top: $hamburger-layer-width * 2;
|
||||||
|
transform: translate3d($hamburger-layer-width * -2, $hamburger-layer-width * -2, 0) rotate(45deg);
|
||||||
|
transition: right 0.125s ease-out,
|
||||||
|
top 0.05s 0.125s linear,
|
||||||
|
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
@if index($hamburger-types, emphatic) {
|
||||||
|
/*
|
||||||
|
* Emphatic
|
||||||
|
*/
|
||||||
|
.hamburger--emphatic {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.hamburger-inner {
|
||||||
|
transition: background-color 0.125s 0.175s ease-in;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: 0;
|
||||||
|
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
||||||
|
top 0.05s 0.125s linear,
|
||||||
|
left 0.125s 0.175s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: ($hamburger-layer-height) + ($hamburger-layer-spacing);
|
||||||
|
right: 0;
|
||||||
|
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
|
||||||
|
top 0.05s 0.125s linear,
|
||||||
|
right 0.125s 0.175s ease-in;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
transition-delay: 0s;
|
||||||
|
transition-timing-function: ease-out;
|
||||||
|
background-color: transparent !important;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: $hamburger-layer-width * -2;
|
||||||
|
top: $hamburger-layer-width * -2;
|
||||||
|
transform: translate3d($hamburger-layer-width * 2, $hamburger-layer-width * 2, 0) rotate(45deg);
|
||||||
|
transition: left 0.125s ease-out,
|
||||||
|
top 0.05s 0.125s linear,
|
||||||
|
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
right: $hamburger-layer-width * -2;
|
||||||
|
top: $hamburger-layer-width * -2;
|
||||||
|
transform: translate3d($hamburger-layer-width * -2, $hamburger-layer-width * 2, 0) rotate(-45deg);
|
||||||
|
transition: right 0.125s ease-out,
|
||||||
|
top 0.05s 0.125s linear,
|
||||||
|
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
@if index($hamburger-types, minus) {
|
||||||
|
/*
|
||||||
|
* Minus
|
||||||
|
*/
|
||||||
|
.hamburger--minus {
|
||||||
|
.hamburger-inner {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
transition: bottom 0.08s 0s ease-out,
|
||||||
|
top 0.08s 0s ease-out,
|
||||||
|
opacity 0s linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
opacity: 0;
|
||||||
|
transition: bottom 0.08s ease-out,
|
||||||
|
top 0.08s ease-out,
|
||||||
|
opacity 0s 0.08s linear;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
@if index($hamburger-types, slider-r) {
|
||||||
|
/*
|
||||||
|
* Slider Reverse
|
||||||
|
*/
|
||||||
|
.hamburger--slider-r {
|
||||||
|
.hamburger-inner {
|
||||||
|
top: $hamburger-layer-height / 2;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: $hamburger-layer-height + $hamburger-layer-spacing;
|
||||||
|
transition-property: transform, opacity;
|
||||||
|
transition-timing-function: ease;
|
||||||
|
transition-duration: 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
$y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
|
||||||
|
|
||||||
|
transform: translate3d(0, $y-offset, 0) rotate(-45deg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transform: rotate(45deg) translate3d($hamburger-layer-width / 7, $hamburger-layer-spacing * -1, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: translate3d(0, $y-offset * -2, 0) rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
@if index($hamburger-types, slider) {
|
||||||
|
/*
|
||||||
|
* Slider
|
||||||
|
*/
|
||||||
|
.hamburger--slider {
|
||||||
|
.hamburger-inner {
|
||||||
|
top: $hamburger-layer-height / 2;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: $hamburger-layer-height + $hamburger-layer-spacing;
|
||||||
|
transition-property: transform, opacity;
|
||||||
|
transition-timing-function: ease;
|
||||||
|
transition-duration: 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
$y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
|
||||||
|
|
||||||
|
transform: translate3d(0, $y-offset, 0) rotate(45deg);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transform: rotate(-45deg) translate3d($hamburger-layer-width / -7, $hamburger-layer-spacing * -1, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: translate3d(0, $y-offset * -2, 0) rotate(-90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
@if index($hamburger-types, spin-r) {
|
||||||
|
/*
|
||||||
|
* Spin Reverse
|
||||||
|
*/
|
||||||
|
.hamburger--spin-r {
|
||||||
|
.hamburger-inner {
|
||||||
|
transition-duration: 0.22s;
|
||||||
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transition: top 0.1s 0.25s ease-in,
|
||||||
|
opacity 0.1s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transition: bottom 0.1s 0.25s ease-in,
|
||||||
|
transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
transform: rotate(-225deg);
|
||||||
|
transition-delay: 0.12s;
|
||||||
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: top 0.1s ease-out,
|
||||||
|
opacity 0.1s 0.12s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
bottom: 0;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
transition: bottom 0.1s ease-out,
|
||||||
|
transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
@if index($hamburger-types, spin) {
|
||||||
|
/*
|
||||||
|
* Spin
|
||||||
|
*/
|
||||||
|
.hamburger--spin {
|
||||||
|
.hamburger-inner {
|
||||||
|
transition-duration: 0.22s;
|
||||||
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transition: top 0.1s 0.25s ease-in,
|
||||||
|
opacity 0.1s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transition: bottom 0.1s 0.25s ease-in,
|
||||||
|
transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
transform: rotate(225deg);
|
||||||
|
transition-delay: 0.12s;
|
||||||
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: top 0.1s ease-out,
|
||||||
|
opacity 0.1s 0.12s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
bottom: 0;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
transition: bottom 0.1s ease-out,
|
||||||
|
transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
@if index($hamburger-types, spring-r) {
|
||||||
|
/*
|
||||||
|
* Spring Reverse
|
||||||
|
*/
|
||||||
|
.hamburger--spring-r {
|
||||||
|
.hamburger-inner {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
transition-duration: 0.13s;
|
||||||
|
transition-delay: 0s;
|
||||||
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
|
||||||
|
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||||
|
opacity 0s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||||
|
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0) rotate(-45deg);
|
||||||
|
transition-delay: 0.22s;
|
||||||
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||||
|
opacity 0s 0.22s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||||
|
transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
@if index($hamburger-types, spring) {
|
||||||
|
/*
|
||||||
|
* Spring
|
||||||
|
*/
|
||||||
|
.hamburger--spring {
|
||||||
|
.hamburger-inner {
|
||||||
|
top: $hamburger-layer-height / 2;
|
||||||
|
transition: background-color 0s 0.13s linear;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: $hamburger-layer-height + $hamburger-layer-spacing;
|
||||||
|
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||||
|
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
|
||||||
|
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||||
|
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
transition-delay: 0.22s;
|
||||||
|
background-color: transparent !important;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||||
|
transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
transform: translate3d(0, $hamburger-layer-spacing + $hamburger-layer-height, 0) rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: 0;
|
||||||
|
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||||
|
transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
transform: translate3d(0, $hamburger-layer-spacing + $hamburger-layer-height, 0) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
@if index($hamburger-types, squeeze) {
|
||||||
|
/*
|
||||||
|
* Squeeze
|
||||||
|
*/
|
||||||
|
.hamburger--squeeze {
|
||||||
|
.hamburger-inner {
|
||||||
|
transition-duration: 0.075s;
|
||||||
|
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transition: top 0.075s 0.12s ease,
|
||||||
|
opacity 0.075s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transition: bottom 0.075s 0.12s ease,
|
||||||
|
transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
transition-delay: 0.12s;
|
||||||
|
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: top 0.075s ease,
|
||||||
|
opacity 0.075s 0.12s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
bottom: 0;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
transition: bottom 0.075s ease,
|
||||||
|
transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
@if index($hamburger-types, stand-r) {
|
||||||
|
/*
|
||||||
|
* Stand Reverse
|
||||||
|
*/
|
||||||
|
.hamburger--stand-r {
|
||||||
|
.hamburger-inner {
|
||||||
|
transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19),
|
||||||
|
background-color 0s 0.075s linear;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transition: top 0.075s 0.075s ease-in,
|
||||||
|
transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transition: bottom 0.075s 0.075s ease-in,
|
||||||
|
transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
background-color: transparent !important;
|
||||||
|
|
||||||
|
transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
|
||||||
|
background-color 0s 0.15s linear;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
transition: top 0.075s 0.1s ease-out,
|
||||||
|
transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
bottom: 0;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
transition: bottom 0.075s 0.1s ease-out,
|
||||||
|
transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
@if index($hamburger-types, stand) {
|
||||||
|
/*
|
||||||
|
* Stand
|
||||||
|
*/
|
||||||
|
.hamburger--stand {
|
||||||
|
.hamburger-inner {
|
||||||
|
transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19),
|
||||||
|
background-color 0s 0.075s linear;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transition: top 0.075s 0.075s ease-in,
|
||||||
|
transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transition: bottom 0.075s 0.075s ease-in,
|
||||||
|
transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
background-color: transparent !important;
|
||||||
|
|
||||||
|
transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
|
||||||
|
background-color 0s 0.15s linear;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
transition: top 0.075s 0.1s ease-out,
|
||||||
|
transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
bottom: 0;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
transition: bottom 0.075s 0.1s ease-out,
|
||||||
|
transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
@if index($hamburger-types, vortex-r) {
|
||||||
|
/*
|
||||||
|
* Vortex Reverse
|
||||||
|
*/
|
||||||
|
.hamburger--vortex-r {
|
||||||
|
.hamburger-inner {
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
transition-duration: 0s;
|
||||||
|
transition-delay: 0.1s;
|
||||||
|
transition-timing-function: linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transition-property: top, opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transition-property: bottom, transform;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
transform: rotate(-765deg);
|
||||||
|
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
transition-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
bottom: 0;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
@if index($hamburger-types, vortex) {
|
||||||
|
/*
|
||||||
|
* Vortex
|
||||||
|
*/
|
||||||
|
.hamburger--vortex {
|
||||||
|
.hamburger-inner {
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
transition-duration: 0s;
|
||||||
|
transition-delay: 0.1s;
|
||||||
|
transition-timing-function: linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
transition-property: top, opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transition-property: bottom, transform;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
.hamburger-inner {
|
||||||
|
transform: rotate(765deg);
|
||||||
|
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
transition-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
bottom: 0;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -9,6 +9,7 @@
|
|||||||
|
|
||||||
// flickity
|
// flickity
|
||||||
@import "flickity/flickity.min.scss";
|
@import "flickity/flickity.min.scss";
|
||||||
|
@import "hamburgers/hamburgers.scss";
|
||||||
|
|
||||||
@import "components/index.scss";
|
@import "components/index.scss";
|
||||||
|
|
||||||
@ -23,7 +24,6 @@ figure{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
body{
|
body{
|
||||||
@import "pages/index.scss";
|
@import "pages/index.scss";
|
||||||
}
|
}
|
||||||
@ -32,6 +32,9 @@ li,ul,ol{
|
|||||||
@include reset-list;
|
@include reset-list;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
footer, iframe, #content{
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
// @import "bootstrap/scss/bootstrap-grid.scss";
|
// @import "bootstrap/scss/bootstrap-grid.scss";
|
||||||
// @import "normalize.css/normalize.css";
|
// @import "normalize.css/normalize.css";
|
||||||
|
|
||||||
|
|||||||
@ -8,8 +8,8 @@
|
|||||||
</figure>
|
</figure>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="nav-main col-6 d-flex">
|
<section class="nav-main col d-flex">
|
||||||
<figure class="rs row">
|
<figure class="rs col-auto d-flex px-0">
|
||||||
<div id="facebook">
|
<div id="facebook">
|
||||||
<a rel="noreferrer" target="_blank" href="{{options.facebook.lien_facebook}}">
|
<a rel="noreferrer" target="_blank" href="{{options.facebook.lien_facebook}}">
|
||||||
<img src="{{theme.link}}/dist//assets/images/fb.svg" alt="logo_facebook" title="Le logo de facebook"/>
|
<img src="{{theme.link}}/dist//assets/images/fb.svg" alt="logo_facebook" title="Le logo de facebook"/>
|
||||||
@ -21,8 +21,8 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</figure>
|
</figure>
|
||||||
<div class="burger col-1">
|
<div class="burger col-auto d-flex px-0">
|
||||||
<div class="fond_burger">
|
<div class="fond-burger">
|
||||||
<button class="hamburger hamburger--slider" type="button">
|
<button class="hamburger hamburger--slider" type="button">
|
||||||
<span class="hamburger-box">
|
<span class="hamburger-box">
|
||||||
<span class="hamburger-inner"></span>
|
<span class="hamburger-inner"></span>
|
||||||
@ -30,7 +30,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<nav class="col" role="navigation">
|
<nav class="" role="navigation">
|
||||||
{% include "components/menu.twig" with {'items': menu.get_items} %}
|
{% include "components/menu.twig" with {'items': menu.get_items} %}
|
||||||
</nav>
|
</nav>
|
||||||
</section>
|
</section>
|
||||||
Loading…
x
Reference in New Issue
Block a user