From 254bb8ea8f3a7d6fba37af75a588adbc63531849 Mon Sep 17 00:00:00 2001
From: alexisben <alexiben7@gmail.com>
Date: Fri, 29 Jul 2022 12:28:30 +0200
Subject: [PATCH] overlay animation
---
assets/js/theme/nav/mainMenu.js | 10 +++++++
assets/sass/_theme/_configuration.sass | 5 ++--
assets/sass/_theme/_utils.sass | 3 +-
assets/sass/_theme/blocks/video.sass | 10 +++----
assets/sass/_theme/design-system/layout.sass | 6 ++--
assets/sass/_theme/design-system/nav.sass | 25 ++++++++++++----
assets/sass/_theme/sections/diplomas.sass | 31 ++++++++++++++++++++
7 files changed, 73 insertions(+), 17 deletions(-)
diff --git a/assets/js/theme/nav/mainMenu.js b/assets/js/theme/nav/mainMenu.js
index 3fa3cace..d4f78d40 100644
--- a/assets/js/theme/nav/mainMenu.js
+++ b/assets/js/theme/nav/mainMenu.js
@@ -2,6 +2,7 @@ import breakpoints from '../utils/breakpoints';
const CLASSES = {
mainMenuOpened: 'is-opened',
+ isAnimating: 'is-animating',
scrollingDown: 'is-scrolling-down',
menusOpened: 'has-menu-opened',
sticky: 'is-sticky'
@@ -100,6 +101,15 @@ class MainMenu {
updateOverlay () {
const classAction = this.state.hasDropdownOpened || this.state.isOpened ? 'add' : 'remove';
document.documentElement.classList[classAction](CLASSES.menusOpened);
+
+ // Add class for animation transition
+ let transitionDuration = window.getComputedStyle(this.element).transitionDuration;
+ // TODO : regex for getting 'ms' or other units value
+ transitionDuration = parseFloat(transitionDuration.replace('s', ''));
+ document.documentElement.classList.add(CLASSES.isAnimating);
+ setTimeout(() => {
+ document.documentElement.classList.remove(CLASSES.isAnimating);
+ }, transitionDuration * 1000);
}
closeEverything () {
diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 891fe733..2900af41 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -75,8 +75,9 @@ $header-color: $main-color !default
$header-hover-color: rgba($header-color, 0.7) !default // TODO : Réflechir à plus élégant / générique
$header-background-color: $main-background-color !default
$header-sticky-enabled: true !default
-$header-sticky-transition: 0.3s !default
-$header-dropdown-transition: 0.3s !default
+$header-transition: 0.3s !default
+$header-sticky-transition: $header-transition !default
+$header-dropdown-transition: $header-transition !default
$header-height: 61px !default
$header-height-md: 74px !default
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index 1ae14507..ff8f7f3d 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -49,11 +49,12 @@
// NEW UTILS
-@mixin icon($icon-name: '', $pseudo-element: before)
+@mixin icon($icon-name: '', $pseudo-element: before, $font-size: px2rem(10))
&::#{$pseudo-element}
content: map-get($icons, $icon-name)
display: inline-block
font-family: 'Icon'
+ font-size: $font-size
font-style: normal
font-variant: normal
font-weight: normal
diff --git a/assets/sass/_theme/blocks/video.sass b/assets/sass/_theme/blocks/video.sass
index 1584b365..3681d9d5 100644
--- a/assets/sass/_theme/blocks/video.sass
+++ b/assets/sass/_theme/blocks/video.sass
@@ -6,8 +6,8 @@
.transcription
margin-top: $spacing1
- @include media-breakpoint-up(md)
- @include in-page-without-aside
- .block-content
- margin-left: col(2)
- width: col(8)
+ // @include media-breakpoint-up(md)
+ // @include in-page-without-aside
+ // .block-content
+ // margin-left: col(2)
+ // width: col(8)
diff --git a/assets/sass/_theme/design-system/layout.sass b/assets/sass/_theme/design-system/layout.sass
index 4f8dbce3..143a1e25 100644
--- a/assets/sass/_theme/design-system/layout.sass
+++ b/assets/sass/_theme/design-system/layout.sass
@@ -9,9 +9,9 @@ body
@media (prefers-reduced-motion: reduce)
*
transition-duration: 0s !important
- &:not(.is-loaded)
- *
- transition-duration: 0s !important
+ // &:not(.is-loaded)
+ // *
+ // transition-duration: 0s !important
main
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index c062254a..3cdd4a4c 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -50,8 +50,10 @@
@include grid(1)
> li
> a, span
- padding: $spacing1
+ @include icon('caret', 'after')
display: block
+ padding: $spacing1
+
&:last-child a
padding-right: 0
li.has-children
@@ -111,20 +113,31 @@
+ .dropdown-menu
display: block
+// TODO : Est-ce au bon endroit ?
body
&::after
+ @include inset(0)
background-color: $body-overlay-color
content: ""
- display: none
- inset: 82px 0 0 0
+ pointer-events: none
position: fixed
+ opacity: 0
+ visibility: hidden
+ transition: opacity $header-transition
z-index: $zindex-body-overlay
+
html.has-menu-opened &
&::after
display: block
- animation-duration: $header-dropdown-transition
- animation-fill-mode: both
- animation-name: showIn
+ opacity: 1
+ pointer-events: inherit
+ visibility: inherit
+
+ html.is-animating:not(.has-menu-opened) &
+ &::after
+ display: block
+ visibility: inherit
+ opacity: 0
.share
display: flex
diff --git a/assets/sass/_theme/sections/diplomas.sass b/assets/sass/_theme/sections/diplomas.sass
index 956e6c7b..6063a041 100644
--- a/assets/sass/_theme/sections/diplomas.sass
+++ b/assets/sass/_theme/sections/diplomas.sass
@@ -15,3 +15,34 @@ ul.diplomas
width: col(6)
.title
@extend .h4
+
+.diplomas-select
+ text-align: right
+ position: relative
+ @extend .h3
+ button
+ @include button-reset
+ @include icon('caret', 'after')
+
+ .dropdown-menu
+ @include inset(100%, 0, auto, auto)
+ background-color: black
+ position: absolute
+ @include media-breakpoint-down(md)
+ // padding-left: $container-gutter-width
+ // padding-right: $container-gutter-width
+ &,
+ a
+ color: white
+ display: block
+ a
+ padding: $spacing0
+ white-space: normal
+ &:not(:first-child)
+ border-top: 1px solid $main-border-color
+ @include media-breakpoint-up(md)
+ font-size: px2rem(22)
+ &:hover
+ background-color: lighten(black, 3)
+ &:focus
+ color: black
\ No newline at end of file
--
GitLab