overlay animation

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 () {

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
 

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

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)

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

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

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