}
/* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
-.dropdown:not(.btn-group):not(.dropdown-root):not(.action-dropdown):not(.input-group-prepend):not(.column-toggle) {
+.dropdown {
z-index: z(dropdown) !important;
+}
- &.list-overflow-menu,
- &.parent-entry {
- z-index: z(header) - 1 !important;
- }
+.list-overflow-menu,
+.parent-entry {
+ z-index: z(header) - 1 !important;
+}
+
+.btn-group,
+.dropdown-root,
+.action-dropdown,
+.input-group-prepend,
+.column-toggle {
+ z-index: inherit !important;
}
+
.dropdown-menu {
z-index: z(dropdown) + 1 !important;
width: 100vw; // Make sure the content fits all the available width
}
+// On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
+@media (hover: none) and (pointer: coarse) {
+ .modal-open, .menu-open {
+ overflow: hidden !important;
+ }
+
+ // On touchscreen devices display content overlay when opened menu
+ .menu-open {
+ .main-col {
+ &::before {
+ background-color: black;
+ width: 100vw;
+ height: 100vh;
+ opacity: 0.75;
+ content: '';
+ display: block;
+ position: fixed;
+ z-index: z('menu') - 1;
+ }
+ }
+ }
+}
+
// Nav customizations
.nav .nav-link {
display: flex !important;