}
/* 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 {
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 {
opacity: .9;
}
+ &:active {
+ color: pvar(--mainForegroundColor) !important;
+ }
+
&::after {
display: none;
}
// 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('menu') - 1;
+ }
+ }
+ }
}
// Nav customizations
.nav.nav-pills {
font-size: 16px !important;
+ font-weight: $font-semibold !important;
+
+ .nav-link {
+ opacity: 0.6 !important;
- .nav-link.active {
- font-weight: $font-semibold !important;
+ &.active, &:hover, &:active, &:focus {
+ opacity: 1 !important;
+ }
}
a {
}
}
-.nav-tabs {
-
- .nav-link {
- @include disable-default-a-behaviour;
+.nav-tabs .nav-link {
+ @include disable-default-a-behaviour;
- color: pvar(--mainForegroundColor) !important;
- }
-}
+ color: pvar(--mainForegroundColor);
+ font-weight: $font-semibold;
+ border: none;
+ border-bottom: 2px solid transparent;
+ opacity: 0.6;
-.nav-tabs .nav-link {
- &:not(.active) {
- border-bottom: 3px solid transparent;
- }
&.active {
- font-weight: $font-semibold;
+ color: pvar(--mainForegroundColor);
background-color: pvar(--mainBackgroundColor) !important;
- border: none;
- border-bottom: 2px solid pvar(--mainColor);
+ border-bottom-color: pvar(--mainColor);
}
- &:hover {
- border-top-color: transparent;
- border-left-color: transparent;
- border-right-color: transparent;
+
+ &.active, &:hover, &:active, &:focus {
+ opacity: 1;
}
}
position: absolute;
right: .5rem;
height: 95%;
+ font-size: 14px;
&:hover {
color: rgba(0, 0, 0, 0.7);