header responsive
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,6 +1,7 @@
|
||||
header{
|
||||
padding: 0 3rem;
|
||||
height: 130px;
|
||||
padding: 0;
|
||||
height: 100px;
|
||||
// display: none;
|
||||
div {
|
||||
height: inherit;
|
||||
}
|
||||
@@ -9,35 +10,154 @@ header{
|
||||
#block-popsu-colloque-branding{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
// z-index: 999;
|
||||
padding:0;
|
||||
@media screen and (min-width: 992px) {
|
||||
padding:0 1rem;
|
||||
}
|
||||
&.is-active{
|
||||
z-index: 10000;
|
||||
}
|
||||
& > div {
|
||||
display: flex;
|
||||
padding:1rem 0.5rem;
|
||||
& > a{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
img{
|
||||
width: 100%;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
@media screen and (min-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#block-mainnavigation{
|
||||
|
||||
#block-renderedsitesettingsblock-2{
|
||||
width: auto;
|
||||
border-left: 1px solid $color1;
|
||||
padding-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
ul{
|
||||
flex-wrap: nowrap;
|
||||
li{
|
||||
padding: 0 1rem;
|
||||
&:not(:last-child){
|
||||
border-right: 1px solid $col_black;
|
||||
padding: 0;
|
||||
display: none;
|
||||
min-width: 520px;
|
||||
@media screen and (min-width: 768px) {
|
||||
display: block;
|
||||
}
|
||||
.site_setting_entity{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1rem;
|
||||
h1{
|
||||
max-width: 100%;
|
||||
color: $color2;
|
||||
padding-right: 1rem;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
align-self: stretch;
|
||||
margin: auto 0;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
.__info_colloque{
|
||||
width: 100%;
|
||||
align-self: stretch;
|
||||
margin: auto 0;
|
||||
height: 7vw;
|
||||
height: auto;
|
||||
&>div{
|
||||
&:first-child{
|
||||
white-space: nowrap;
|
||||
border-bottom: 2px solid $color1;
|
||||
}
|
||||
}
|
||||
a{
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#block-mainnavigation{
|
||||
width: 100%;
|
||||
border-left: 1px solid $color1;
|
||||
padding: 0rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
@media screen and (min-width: 1200px) {
|
||||
min-width: auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
.burger{
|
||||
display: block;
|
||||
@media screen and (min-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
&.is-active{
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
.nav-main{
|
||||
display: none;
|
||||
height: auto;
|
||||
@media screen and (min-width: 1200px) {
|
||||
display: flex;
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
&.is-active{
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
z-index: 999;
|
||||
ul{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
li{
|
||||
width: 100%;
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 5%;
|
||||
&::before{
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 0%;
|
||||
transition: width 1s ease;
|
||||
height: 1px;
|
||||
background: $color1;
|
||||
}
|
||||
&:hover{
|
||||
&::before{
|
||||
width: 10%;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
}
|
||||
a{
|
||||
min-width: max-content;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ul{
|
||||
flex-wrap: nowrap;
|
||||
li{
|
||||
padding: 0 0.5rem;
|
||||
&:not(:last-child){
|
||||
border-right: 1px solid $col_black;
|
||||
}
|
||||
a{
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,15 @@ html,body{
|
||||
background: $fond;
|
||||
}
|
||||
|
||||
button{
|
||||
outline:0;
|
||||
border: 0;
|
||||
&:focus{
|
||||
outline:0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
header{
|
||||
background: white;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
header{
|
||||
display: none;
|
||||
}
|
||||
|
||||
// thumbnails global
|
||||
.thumbnails{
|
||||
width: 100%;
|
||||
|
||||
@@ -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,88 @@
|
||||
@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 : 15px !default;
|
||||
$hamburger-layer-width : 30px !default;
|
||||
$hamburger-layer-height : 3px !default;
|
||||
$hamburger-layer-spacing : 6px !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/collapse";
|
||||
@import "types/collapse-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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -12,6 +12,7 @@
|
||||
@import "./typography.scss";
|
||||
@import "components/admin/edit.scss";
|
||||
@import "components/admin/toolbar.scss";
|
||||
@import "hamburgers/hamburgers.scss";
|
||||
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
@@ -20,6 +21,9 @@
|
||||
body,html{
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
.is-active{
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
ul,li,ol{
|
||||
|
||||
@@ -28,13 +28,49 @@
|
||||
url('../fonts/truenorg-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#block-renderedsitesettingsblock-2{
|
||||
.site_setting_entity{
|
||||
h1{
|
||||
font-family: 'dukefill';
|
||||
font-size: 2rem;
|
||||
line-height: 2rem;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
align-self: stretch;
|
||||
margin: auto;
|
||||
}
|
||||
.__info_colloque{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
& > div{
|
||||
height: auto;
|
||||
&:first-child{
|
||||
font-family: 'truenoregular';
|
||||
color: $color1;
|
||||
font-size: 0.9rem;
|
||||
padding-bottom: 0.4rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
&:last-child{
|
||||
color: $color2;
|
||||
font-family: 'truenoregular';
|
||||
font-weight: bold;
|
||||
font-size: 0.7rem;
|
||||
line-height: 1;
|
||||
width: min-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#block-mainnavigation{
|
||||
ul{
|
||||
li{
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.8rem;
|
||||
a{
|
||||
color: black;
|
||||
font-family: 'truenoregular';
|
||||
|
||||
@@ -61,9 +61,19 @@ function slide() {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function burger() {
|
||||
var hamburgers = document.querySelector(".hamburger");
|
||||
var nav = document.querySelector(".nav-main");
|
||||
hamburgers.addEventListener("click", function() {
|
||||
this.classList.toggle("is-active");
|
||||
nav.classList.toggle("is-active");
|
||||
$('html, body').toggleClass("is-active");
|
||||
$('#block-popsu-colloque-branding').toggleClass("is-active");
|
||||
});
|
||||
}
|
||||
|
||||
$( document ).ready(function() {
|
||||
notes();
|
||||
slide();
|
||||
burger();
|
||||
});
|
||||
|
||||
@@ -29,6 +29,13 @@
|
||||
#}
|
||||
<div{{ attributes }}>
|
||||
{% block content %}
|
||||
<div class="nav-main">
|
||||
{{ content }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
<button class="hamburger hamburger--collapse burger" type="button">
|
||||
<span class="hamburger-box">
|
||||
<span class="hamburger-inner"></span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
+1
-1
@@ -27,7 +27,7 @@
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
<div{{ attributes }} class="col">
|
||||
<div{{ attributes }} class="col-md-3 col-lg-3 col-xl-2">
|
||||
{{ title_prefix }}
|
||||
{% if label %}
|
||||
<h2{{ title_attributes }}>{{ label }}</h2>
|
||||
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
{#
|
||||
/**
|
||||
* @file site_setting_entity.html.twig
|
||||
* Default theme implementation to present Site Setting data.
|
||||
*
|
||||
* This template is used when viewing Site Setting pages.
|
||||
*
|
||||
*
|
||||
* Available variables:
|
||||
* - content: A list of content items. Use 'content' to print all content, or
|
||||
* - attributes: HTML attributes for the container element.
|
||||
*
|
||||
* @see template_preprocess_site_setting_entity()
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
<div{{ attributes.addClass('site_setting_entity') }}>
|
||||
{% if content %}
|
||||
{{- content.field_title_colloque -}}
|
||||
<div class="__info_colloque">
|
||||
{{content.field_date_du_colloque}}
|
||||
{{content.field_sub_title_du_colloque}}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
+72
@@ -0,0 +1,72 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Default theme implementation for a field.
|
||||
*
|
||||
* To override output, copy the "field.html.twig" from the templates directory
|
||||
* to your theme's directory and customize it, just like customizing other
|
||||
* Drupal templates such as page.html.twig or node.html.twig.
|
||||
*
|
||||
* Instead of overriding the theming for all fields, you can also just override
|
||||
* theming for a subset of fields using
|
||||
* @link themeable Theme hook suggestions. @endlink For example,
|
||||
* here are some theme hook suggestions that can be used for a field_foo field
|
||||
* on an article node type:
|
||||
* - field--node--field-foo--article.html.twig
|
||||
* - field--node--field-foo.html.twig
|
||||
* - field--node--article.html.twig
|
||||
* - field--field-foo.html.twig
|
||||
* - field--text-with-summary.html.twig
|
||||
* - field.html.twig
|
||||
*
|
||||
* Available variables:
|
||||
* - attributes: HTML attributes for the containing element.
|
||||
* - label_hidden: Whether to show the field label or not.
|
||||
* - title_attributes: HTML attributes for the title.
|
||||
* - label: The label for the field.
|
||||
* - multiple: TRUE if a field can contain multiple items.
|
||||
* - items: List of all the field items. Each item contains:
|
||||
* - attributes: List of HTML attributes for each item.
|
||||
* - content: The field item's content.
|
||||
* - entity_type: The entity type to which the field belongs.
|
||||
* - field_name: The name of the field.
|
||||
* - field_type: The type of the field.
|
||||
* - label_display: The display settings for the label.
|
||||
*
|
||||
* @see template_preprocess_field()
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
{%
|
||||
set title_classes = [
|
||||
label_display == 'visually_hidden' ? 'visually-hidden',
|
||||
]
|
||||
%}
|
||||
|
||||
{% if label_hidden %}
|
||||
{% if multiple %}
|
||||
<div{{ attributes }}>
|
||||
{% for item in items %}
|
||||
<div{{ item.attributes }}>{{ item.content }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% for item in items %}
|
||||
<h1>{{ item.content }}</h1>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div{{ attributes }}>
|
||||
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
|
||||
{% if multiple %}
|
||||
<div>
|
||||
{% endif %}
|
||||
{% for item in items %}
|
||||
<div{{ item.attributes }}>{{ item.content }}</div>
|
||||
{% endfor %}
|
||||
{% if multiple %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
Reference in New Issue
Block a user