From f786391eaac0e9c6b946bd9c4778411bd39c4006 Mon Sep 17 00:00:00 2001
From: alexisben <alexiben7@gmail.com>
Date: Thu, 28 Jul 2022 17:24:53 +0200
Subject: [PATCH] light transition on dropdown & overlay
---
assets/sass/_theme/_configuration.sass | 4 +++
assets/sass/_theme/design-system/layout.sass | 9 +------
assets/sass/_theme/design-system/nav.sass | 28 +++++++++++++++++++-
3 files changed, 32 insertions(+), 9 deletions(-)
diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 7e5e93ed..65752868 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -76,9 +76,13 @@ $header-hover-color: rgba($header-color, 0.7) !default // TODO : Réflechir à p
$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-height: 61px !default
$header-height-md: 74px !default
+// Navs
+$body-overlay-color: rgba(0, 0, 0, 0.3) !default
+
// Footer
$footer-color: $main-color !default
$footer-background-color: darken($main-background-color, 2.5) !default
diff --git a/assets/sass/_theme/design-system/layout.sass b/assets/sass/_theme/design-system/layout.sass
index 1219d6f9..4f8dbce3 100644
--- a/assets/sass/_theme/design-system/layout.sass
+++ b/assets/sass/_theme/design-system/layout.sass
@@ -12,14 +12,7 @@ body
&:not(.is-loaded)
*
transition-duration: 0s !important
- html.has-menu-opened &
- &::after
- background-color: rgba(0,0,0,.3)
- content: ""
- display: block
- inset: 82px 0 0 0
- position: fixed
- z-index: $zindex-body-overlay
+
main
// Create padding-top for fixed header under md
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index ce2ac2ae..3d7af974 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -1,3 +1,11 @@
+@keyframes showIn
+ 0%
+ opacity: 0
+ 100%
+ opacity: 1
+ 0%
+ opacity: 0
+
.menu
@include media-breakpoint-down(md)
-webkit-flex-basis: 100vw
@@ -49,12 +57,15 @@
li.has-children
a[aria-expanded="true"] + .dropdown-menu
display: block
+ animation-duration: $header-dropdown-transition
+ animation-fill-mode: both
+ animation-name: showIn
.nav-level-2
@include grid(1)
@include media-breakpoint-up(md)
@include container
- @include grid(4, md)
+ @include grid(4, md)
> li
&,
& > a,
@@ -100,6 +111,21 @@
+ .dropdown-menu
display: block
+body
+ &::after
+ background-color: $body-overlay-color
+ content: ""
+ display: none
+ inset: 82px 0 0 0
+ position: fixed
+ z-index: $zindex-body-overlay
+ html.has-menu-opened &
+ &::after
+ display: block
+ animation-duration: $header-dropdown-transition
+ animation-fill-mode: both
+ animation-name: showIn
+
.share
display: flex
list-style: none
--
GitLab