entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 10 Releases Wiki Activity

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

This commit is contained in:
Serghei Mihai 2022-12-20 17:18:32 +01:00 committed by Gitea
parent 7984eb26ea
commit e3a3970775
3 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
help/fr/misc-scss.page
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>

13
static/includes/_nav.scss
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;
$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);
}
}
@if $responsive-menu-mask == true and $responsive-menu == left-to-right {
~ div.gru-nav-mask {
position: fixed;
z-index: 1999;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: $responsive-menu-mask-background;
}
}
}
}
}

1
templates/includes/nav.html
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 %}