valentin_le_moign/lamine_wp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

nav

Browse Source
This commit is contained in:
Kevin Tessier 2020-09-08 19:39:44 +02:00
parent d496228b31
commit 6690a1ec7d
41 changed files with 1925 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

424
web/app/themes/la_mine/dist/assets/css/index.css vendored
View File

File diff suppressed because one or more lines are too long

2
web/app/themes/la_mine/dist/assets/css/index.min.css vendored
View File

File diff suppressed because one or more lines are too long

3
web/app/themes/la_mine/src/assets/js/scripts.js
View File

@ -9,6 +9,7 @@ function slides() {
});
// console.log('carrousell');
// if (Home != null) {
// var flkty = new Flickity( Home, {
@ -112,9 +113,9 @@ function click_nav() {
}
$( document ).ready(function() {
burger();
slides();
// masonry();
// burger();
// paralax();
// isotope();
// drag();

82
web/app/themes/la_mine/src/assets/scss/components/_header.scss
View File

@ -48,7 +48,13 @@ header{
}
&.nav-main{
justify-content: end;
align-items: baseline;
padding-top: $padTopNav;
& > * {
height: max-content;
}
figure{
justify-content: end;
& > div{
width: 30px;
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{
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;
}
}
}
}

44
web/app/themes/la_mine/src/assets/scss/configs/_mixins.scss
View File

@ -8,6 +8,10 @@ body{
background: $color;
}
// Menu
@mixin anim_open_horizontal{
}
// GLOBAL
@mixin vertical-align{
@ -48,29 +52,29 @@ body{
}
@mixin wysiwyg{
h1{}
h2{}
h3{}
h4{}
h5{}
h6{}
strong{}
b{}
em{}
i{}
a{}
u{}
sup{}
// h1{}
// h2{}
// h3{}
// h4{}
// h5{}
// h6{}
// strong{}
// b{}
// em{}
// i{}
// a{}
// u{}
// sup{}
p{
margin-bottom: 1rem;
font-size: 1rem;
line-height: 1.5rem;
strong{}
sup{}
u{}
a{}
b{}
i{}
em{}
// strong{}
// sup{}
// u{}
// a{}
// b{}
// i{}
// em{}
}
}

5
web/app/themes/la_mine/src/assets/scss/configs/_variables.scss
View File

@ -1,7 +1,10 @@
// color
$colorWhite: white;
$colorYellow:#ffcc00;
$colorBlack:black;
$heightLogo: 115px;
$heightLogoHover: 100px;
$widthburger: 50px;
$padTopNav : 1rem;

86
web/app/themes/la_mine/src/assets/scss/hamburgers/_base.scss Normal file
View 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;
}
}

118
web/app/themes/la_mine/src/assets/scss/hamburgers/hamburgers.scss Normal file
View File

@ -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 {
// ...
// }
// }

35
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_3dx-r.scss Normal file
View File

@ -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);
}
}
}
}
}

35
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_3dx.scss Normal file
View File

@ -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);
}
}
}
}
}

35
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_3dxy-r.scss Normal file
View File

@ -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);
}
}
}
}
}

35
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_3dxy.scss Normal file
View File

@ -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);
}
}
}
}
}

35
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_3dy-r.scss Normal file
View File

@ -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);
}
}
}
}
}

35
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_3dy.scss Normal file
View File

@ -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);
}
}
}
}
}

16
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_arrow-r.scss Normal file
View File

@ -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);
}
}
}
}

16
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_arrow.scss Normal file
View File

@ -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);
}
}
}
}

36
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_arrowalt-r.scss Normal file
View File

@ -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);
}
}
}
}
}

36
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_arrowalt.scss Normal file
View File

@ -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);
}
}
}
}
}

18
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_arrowturn-r.scss Normal file
View File

@ -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);
}
}
}
}

18
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_arrowturn.scss Normal file
View File

@ -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);
}
}
}
}

30
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_boring.scss Normal file
View File

@ -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);
}
}
}
}
}

47
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_collapse-r.scss Normal file
View File

@ -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);
}
}
}
}
}

47
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_collapse.scss Normal file
View File

@ -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);
}
}
}
}
}

41
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_elastic-r.scss Normal file
View File

@ -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;
}
}
}
}
}

41
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_elastic.scss Normal file
View File

@ -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;
}
}
}
}
}

53
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_emphatic-r.scss Normal file
View File

@ -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);
}
}
}
}
}

53
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_emphatic.scss Normal file
View File

@ -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);
}
}
}
}
}

34
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_minus.scss Normal file
View File

@ -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;
}
}
}
}
}

38
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_slider-r.scss Normal file
View File

@ -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);
}
}
}
}
}

38
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_slider.scss Normal file
View File

@ -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);
}
}
}
}
}

43
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_spin-r.scss Normal file
View File

@ -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);
}
}
}
}
}

43
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_spin.scss Normal file
View File

@ -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);
}
}
}
}
}

47
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_spring-r.scss Normal file
View File

@ -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);
}
}
}
}
}

44
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_spring.scss Normal file
View File

@ -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);
}
}
}
}
}

43
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_squeeze.scss Normal file
View File

@ -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);
}
}
}
}
}

45
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_stand-r.scss Normal file
View File

@ -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);
}
}
}
}
}

45
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_stand.scss Normal file
View File

@ -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);
}
}
}
}
}

48
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_vortex-r.scss Normal file
View File

@ -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);
}
}
}
}
}

48
web/app/themes/la_mine/src/assets/scss/hamburgers/types/_vortex.scss Normal file
View File

@ -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);
}
}
}
}
}

5
web/app/themes/la_mine/src/assets/scss/index.scss
View File

@ -9,6 +9,7 @@
// flickity
@import "flickity/flickity.min.scss";
@import "hamburgers/hamburgers.scss";
@import "components/index.scss";
@ -23,7 +24,6 @@ figure{
}
}
body{
@import "pages/index.scss";
}
@ -32,6 +32,9 @@ li,ul,ol{
@include reset-list;
}
footer, iframe, #content{
display: none!important;
}
// @import "bootstrap/scss/bootstrap-grid.scss";
// @import "normalize.css/normalize.css";

10
web/app/themes/la_mine/templates/components/header.twig
View File

@ -8,8 +8,8 @@
</figure>
</section>
<section class="nav-main col-6 d-flex">
<figure class="rs row">
<section class="nav-main col d-flex">
<figure class="rs col-auto d-flex px-0">
<div id="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"/>
@ -21,8 +21,8 @@
</a>
</div>
</figure>
<div class="burger col-1">
<div class="fond_burger">
<div class="burger col-auto d-flex px-0">
<div class="fond-burger">
<button class="hamburger hamburger--slider" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
@ -30,7 +30,7 @@
</button>
</div>
</div>
<nav class="col" role="navigation">
<nav class="" role="navigation">
{% include "components/menu.twig" with {'items': menu.get_items} %}
</nav>
</section>