}
/* 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) {
+.dropdown:not(.btn-group):not(.dropdown-root):not(.action-dropdown):not(.input-group-prepend):not(.column-toggle) {
z-index: z(dropdown) !important;
&.list-overflow-menu,
// On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
.modal-open {
overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
- position: fixed; // Fix the body position to disable any scroll content
- width: 100vw; // Make sure the content fits all the available width when position: fixed
+ 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('header') - 1;
+ }
+ }
+ }
}
// Nav customizations
position: absolute;
right: .5rem;
height: 95%;
+ font-size: 14px;
&:hover {
color: rgba(0, 0, 0, 0.7);