scss: include reponsive menu mask display option (#72654) #87

Merged
smihai merged 1 commits from wip/72654-show-menu-mask-option into main 2022-12-23 10:51:43 +01:00
3 changed files with 25 additions and 0 deletions

View File

@ -383,6 +383,17 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
left-to-right</p></td>
<td><p><var>top-to-bottom</var></p></td>
</tr>
<tr>
<td><p><code>$responsive-menu-mask</code></p></td>
<td><p>Affichage d'un masque lorsque le menu mobile est déplié. Valable
uniquement si <code>$responsive-menu=left-to-right</code></p></td>
<td><p><var>false</var></p></td>
</tr>
<tr>
<td><p><code>$responsive-menu-mask-background</code></p></td>
<td><p>Couleur de fond du masque du menu mobile</p></td>
<td><p><var>rgba(0, 0, 0, 0.45)</var></p></td>
</tr>
<tr>
<td><p><code>$nav-button-background</code></p></td>
<td><p>Couleur de fond du bouton de navigation (menu hamburger)</p></td>

View File

@ -35,6 +35,8 @@ $nav-mobile-menu-item-hover-background: $nav-item-hover-background !default;
$nav-mobile-menu-item-hover-color: $nav-item-hover-color !default;
$nav-item-spacing: 0px !default;
$responsive-menu: top-to-bottom !default; // or left-to-right
$responsive-menu-mask: false !default;
tjund marked this conversation as resolved Outdated
Outdated
Review

Pourquoi pas simplement $responsive-menu-mask ?

Pourquoi pas simplement `$responsive-menu-mask` ?

Pourquoi pas simplement $responsive-menu-mask ?

C'est ma pérception de la chose: comme c'est un booléen il faut un verbe.
Mais ça me va de faire sans.

> Pourquoi pas simplement `$responsive-menu-mask` ? C'est ma pérception de la chose: comme c'est un booléen il faut un verbe. Mais ça me va de faire sans.
$responsive-menu-mask-background: rgba(0, 0, 0, 0.45) !default;
$nav-after-image: true !default;
$nav-after-image-height: 300px !default;
@ -363,6 +365,17 @@ div.menucell {
transform: translateX(0);
}
}
Outdated
Review

Je proposais de positionner en dehors de ul, juste après

Et il manque la condition left-to-right

@if ($responsive-menu-mask == true and $responsive-menu == left-to-right)

Je proposais de positionner en dehors de ul, juste après Et il manque la condition left-to-right `@if ($responsive-menu-mask == true and $responsive-menu == left-to-right)`
@if $responsive-menu-mask == true and $responsive-menu == left-to-right {
Outdated
Review

À supprimer, (c'est inutile tu es déjà dans une condition nav mobile)

À supprimer, (c'est inutile tu es déjà dans une condition nav mobile)
~ div.gru-nav-mask {
position: fixed;
z-index: 1999;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: $responsive-menu-mask-background;
}
}
}
}
}

View File

@ -15,6 +15,7 @@
{% show_menu depth=2 ignore_visibility=True %}
{% placeholder "menu_right" %}
{% endblock %}
<div class="gru-nav-mask"></div>
{% block nav-bottom %}{% endblock %}
</div> <!-- nav -->
{% block nav-post %}{% endblock %}