From dee69f89202945677421509ff4388a843fbe508d Mon Sep 17 00:00:00 2001
From: alexisben <alexiben7@gmail.com>
Date: Fri, 29 Jul 2022 15:06:18 +0200
Subject: [PATCH] picto and menus
---
assets/js/theme/nav/mainMenu.js | 4 +--
assets/sass/_theme/_utils.sass | 3 ++-
assets/sass/_theme/design-system/nav.sass | 31 +++++++++++++++--------
3 files changed, 24 insertions(+), 14 deletions(-)
diff --git a/assets/js/theme/nav/mainMenu.js b/assets/js/theme/nav/mainMenu.js
index 3fa3cace..89904b51 100644
--- a/assets/js/theme/nav/mainMenu.js
+++ b/assets/js/theme/nav/mainMenu.js
@@ -11,7 +11,7 @@ class MainMenu {
this.element = document.querySelector(selector);
this.menu = this.element.querySelector('.menu');
this.mainButton = this.element.querySelector('button');
- this.dropdownsButtons = this.element.querySelectorAll('.has-children a[role="button"]');
+ this.dropdownsButtons = this.element.querySelectorAll('.has-children [role="button"]');
this.state = {
isOpened: false,
@@ -113,7 +113,7 @@ class MainMenu {
y = window.scrollY,
isNearTop = y < offset;
- if (isNearTop) {
+ if (isNearTop) {
this.element.classList.remove(CLASSES.sticky);
} else {
this.element.classList.add(CLASSES.sticky);
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index 21805a7e..081aaf53 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -49,7 +49,7 @@
// NEW UTILS
-@mixin icon($icon-name: '', $pseudo-element: before)
+@mixin icon($icon-name: '', $pseudo-element: before, $font-size: px2rem(7))
&::#{$pseudo-element}
content: map-get($icons, $icon-name)
display: inline-block
@@ -61,6 +61,7 @@
speak: never
text-transform: none
vertical-align: middle
+ @content // TODO : important de documenter ça
@mixin container
margin-left: auto
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index c062254a..a9e60be6 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -30,6 +30,19 @@
font-size: px2rem(18)
line-height: px2rem(26)
color: $header-color
+ cursor: pointer
+ transition: text-decoration 0.15s
+ &:not(:hover)
+ text-decoration-color: transparent
+ &[aria-expanded]
+ @include icon('caret', 'after')
+ font-size: px2rem(6)
+ margin-left: px2rem(5)
+ transition: transform 0.15s
+ &[aria-expanded="true"]
+ &::after
+ transform: rotate(180deg)
+
@include media-breakpoint-up(md)
a:hover,
a:focus
@@ -50,12 +63,12 @@
@include grid(1)
> li
> a, span
- padding: $spacing1
display: block
+ padding: $spacing1
&:last-child a
padding-right: 0
li.has-children
- a[aria-expanded="true"] + .dropdown-menu
+ [aria-expanded="true"] + .dropdown-menu
display: block
animation-duration: $header-dropdown-transition
animation-fill-mode: both
@@ -67,9 +80,8 @@
@include container
@include grid(4, md)
> li
- &,
- & > a,
- & > span
+ > a,
+ > span
font-size: px2rem(16)
line-height: px2rem(26)
@include media-breakpoint-up(lg)
@@ -93,7 +105,7 @@
> li:not(:last-child)
border-bottom: 1px solid #adb5bd
li.has-children
- a[role="button"]
+ [role="button"]
align-items: center
display: flex
justify-content: space-between
@@ -105,11 +117,8 @@
display: none
padding-top: 0
- a[aria-expanded=true]
- @include icon("caret-top", after)
-
- + .dropdown-menu
- display: block
+ [aria-expanded=true] + .dropdown-menu
+ display: block
body
&::after
--
GitLab