@import "../base/base.less"; // Classic theme overrides .topNav { box-shadow: 4px 3px 3px rgba(0, 0, 0, 0.075) !important; } .topNavIcon { font-size: 18px !important; } .topNavHoverClass { width: 30px !important; height: 30px !important; padding: 5px !important; } /* TOP NAV */ // TOPNAV MOBILE RESULTS STYLING .topNavDropdownHeader { padding: 0.5rem 1rem; text-transform: uppercase; color: @label-grey; font-size: 12px; } .topNav { box-shadow: 4px 3px 3px rgba(0, 0, 0, 0.075) !important; min-width: 320px; background-color: @topnav-background-color; z-index: 10; height: 60px; padding: 0; @media screen and (max-width: 767px) { padding: 0; overflow: hidden; } .topNavIcon { font-size: 18px !important; color: @topnav-font-color; width: 35px !important; } .topNavCollapseLineIcon { margin-left: -6px; } .topNavHoverClass { width: 30px !important; height: 30px !important; padding: 5px !important; align-items: center; justify-content: center; display: flex; border-radius: 50% !important; transition: ease-in-out .5s; &:hover { background: fade(@topnav-font-color, 60%) !important; } } .topNavIconHoverBadge { width: 30px !important; height: 30px !important; padding: 5px !important; align-items: center; justify-content: center; display: flex; border-radius: 50% !important; transition: ease-in-out .5s; &:hover { background: fade(@topnav-font-color, 60%) !important; } position: relative !important; } .topNavIconBadge { font-size: 18px !important; color: @topnav-font-color; position: relative !important; } .notificationCount { background-color: red !important; color: white !important; border-radius: 50% !important; padding: 3px 5px !important; font-size: 8px !important; position: absolute !important; top: -7px !important; right: -9px !important; display: inline-block !important; min-width: 15px !important; text-align: center !important; line-height: 1 !important; } #reportOptionsIcon { font-size: 22px !important; width: 15px !important; text-align: center; padding-top: 1px; } .topNavUsername { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: text-top; @media screen and (min-width: 767px) and (max-width: 992px) { display: none; } @media screen and (min-width: 993px) { max-width: 150px; } @media screen and (min-width: 1200px) { max-width: none; } } .rhDropdownmenu { padding-bottom: 0px !important; @media screen and (max-width: 767px) { display: none; } } .topNavLogoContainer { height: 100%; width: 240px; padding-left: 1rem; display: flex; align-items: center; background-color: @topnav-secondary-background-color; @media screen and (max-width: 767px) { width: auto; background-color: transparent; padding-left: 0; } .topNavLogo { max-height: 33px; width: auto; @media screen and (max-width: 767px) { max-width: 350px; } @media screen and (max-width: 545px) { max-width: 250px; } @media screen and (max-width: 425px) { max-width: 200px; } @media screen and (max-width: 365px) { max-width: 150px; } } } .topNavLeft { display: flex; align-items: center; height: 100%; } .reportNavOptions { margin-right: 1rem; @media screen and (max-width: 992px) { margin-left: 5px; } @media screen and (max-width: 767px) { margin-left: 20px; } } .topNavSideMenuToggle { display: flex; align-items: center; justify-content: center; .topNavSideMenuToggleArrow { margin-left: -6px; font-size: 20px; } } .topNavHamburger { outline: none; align-items: center; height: 100%; padding-top: 18px; z-index: 10; &:focus { outline: none; } } .topNavHamburgerInner, .topNavHamburgerInner::before, .topNavHamburgerInner::after { width: 35px; background-color: @topnav-font-color !important; } .topNavRight { align-items: center; height: 100%; padding-right: 10px; &:focus { outline: none; } } .topNavMobileOptions { padding-right: 1rem; .topNavMobileIcon { padding: 10px 5px; color: @sidenav-link-color; background-color: @sidenav-background-color; } .mobileSearchButton { padding: 10px 5px 10px 10px; color: @sidenav-link-color; background-color: @sidenav-background-color; } .mobileSearchContainer { position: relative; .topNavMobileSearchInput { border: none; width: 0; display:none; &:focus { outline: none; } } .searchInputOpen { width: 95% !important; padding: 10px; display:block; } .mobileSearchGoButton { background-color: @sidenav-background-color; color: @sidenav-link-color; display: none; position: absolute; right: 0; top: 0; bottom: 0; border: none; width: 50px; } } .mobileSearchContainerOpen { width: 100%; } .topNavSearchResultsContainermobile { background-color: white; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; margin-right: 3rem; background-color: white; z-index: 1; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); position: absolute; top: 45px !important; left: 0 !important; right: 0 !important; width: 100%; display: none; @media screen and (max-width: 767px) { position: fixed; top: 50px !important; } } } .topNavMobileOptionsSearchOpen { padding: 0 5px; width: 100%; display: flex; } .tenantLinkactive { background-color: @secondary-color !important; // color: #fff; color: @sidenav-font-hover !important; } .topNavSearchContainer { display: inline-flex; border: 1px solid #ced4da; border-radius: 5rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; //margin-right: 1rem; margin-left: 1rem; background-color: #fff; @media screen and (max-width: 860px) { margin-right: 10px; margin-left: 10px; } .topNavSearchResultsContainer { position: absolute; top: 50px; width: 295px; border: 1px solid #ced4da; // border-radius: .25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; margin-right: 3rem; background-color: white; z-index: 1; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); display: none; } .topNavSearchInput { padding: 0.275rem 0.75rem; font-family: @primary-Font; font-size: 1rem; line-height: 1.5; color: #495057; background-color: transparent; background-clip: padding-box; border: none; outline: none; display: inline-block; width: 300px; vertical-align: middle; @media screen and (max-width: 992px) { width: 250px; } @media screen and (max-width: 900px) { width: 215px; } @media screen and (max-width: 860px) { width: 210px; } @media screen and (max-width: 800px) { width: 170px; } } .topNavSearchIcon { margin-right: 0.5rem; color: #ced4da; } } } .rhDropdownmenu { margin-right: 0.5rem; @media screen and (max-width: 992px) { margin-right: 0; } .bookmarkContainer { overflow: auto !important; max-height: 350px !important; } .rhDropdownMenu { box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); border: none; border-radius: 0; min-height: 48px; padding-bottom: 0px !important; background-color: @sidenav-background-color !important; color: @sidenav-link-color !important; @media screen and (max-height: 475px) { overflow: hidden scroll; height: 250px; } .editFavourites { display: flex; justify-content: center; cursor: pointer; font-size: 0.8rem; font-weight: bold; padding-right: 0.5rem; color: #7a7a7a; .doneText { display: none; } } .dropdown-item.selected-tab { background-color: fade(@secondary-color, 60%) !important; color: @sidenav-font-hover !important; cursor: default; } .favouritesDropdownItem { display: flex; justify-content: space-between; padding: 0.25rem 0.75rem; background-color: transparent !important; color: @sidenav-link-color !important; &:hover { .favouriteIcon { background-color: @secondary-color !important; color: @sidenav-font-hover !important; } background-color: @secondary-color !important; color: @sidenav-font-hover !important; } :active { background-color: transparent; } .favouriteDropdownText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } } } .rhOptionDropdownItem { padding: 0.5rem; margin: 0.5rem 0.1rem; color: @sidenav-link-color; border-radius: 5px; width: inherit; border: none; &:hover { background-color: fade(@secondary-color, 60%); color: @sidenav-font-hover !important; } } .viewOptionsTrigger { display: flex; align-items: center; } .rhDropdownmenuButton { border-radius: 0; padding: 0 0.5rem 0 0; background: inherit; border: none; // color: @topnav-font-color; &:focus { outline: none; box-shadow: none; } // .favouriteIcon { // color: #dda602; // } .topNavFavouritesIcon { &:last-of-type { margin-left: -3px; } } } .favouriteDropdownItemContainer { background-color: @sidenav-background-color !important; color: @sidenav-link-color !important; &:hover { background-color: @secondary-color !important; .favouriteDropdownText { color: @sidenav-font-hover !important; } .removeFavouriteIcon { color: @sidenav-font-hover !important; } .favouritesDropdownItem { color: @sidenav-font-hover !important; } } } .removeFavouriteButton { border: none; display: none; outline: none; cursor: pointer; padding: 0; margin-left: 10px; margin-right: 5px; } .desktopRemoveFavouriteButton { display: flex !important; align-items: center; background-color: transparent; color: @sidenav-link-color !important; } } .mobileNavShareOptions { display: inline-block; vertical-align: top; .mobileNavShareOptionsLink { // display: inline-block; display: flex; padding: 0; color: @topnav-font-color; &:hover { color: @primary-color; } } .mobileTopNavReportOptions { margin: 0; padding: 0; left: auto !important; right: 0 !important; top: 25px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); border: none; border-radius: 0; min-width: 200px; background-color: @sidenav-background-color !important; color: @sidenav-link-color !important; .rhOptionTitle { background-color: @sidenav-background-color !important; color: @sidenav-link-color !important; } &:hover { .favouriteIcon { background-color: @secondary-color !important; color: @sidenav-font-hover !important; } } } .topNavDropdownItemContainer { margin: 0; padding: 0; left: auto !important; right: 0 !important; top: 45px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); border: none; border-radius: 0; min-width: 200px; z-index: 99; //some divs come up on menu so i added z-index //LLakhyan:Matching colors of menus background-color: @sidenav-background-color !important; color: @sidenav-link-color !important; @media screen and (max-height: 475px) { overflow: hidden scroll; height: 250px; } } } .topNavUser { display: inline-flex; vertical-align: top; .topNavUserDropdown { position: relative; flex-direction: row; list-style: none; display: flex; align-items: center; } .topNavDropdownItemContainer::-webkit-scrollbar { width: 4px !important; } .topNavDropdownItemContainer { margin: 0; padding: 0; left: auto !important; right: 0 !important; top: 45px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); border: none; border-radius: 0; min-width: 200px; // Prevent less overriding with calc result max-height: ~"calc(100vh - 60px)"; overflow: hidden; //LLakhyan:Matching colors of menus background-color: @sidenav-background-color !important; color: @sidenav-link-color !important; .sideNavAdminMenuContainer { // since overflow set on this inner container, max-height can't be relative (i.e. 100%) max-height: ~"calc(100vh - 100px)" !important; overflow: hidden auto; } .adminMenuIcon { padding-right: 12px; } } .adminMenuItem { color: @sidenav-link-color; border-bottom: 1px solid fade(@label-grey, 30%); &:hover, &:focus { background-color: fade(@secondary-color, 60%); color: @sidenav-font-hover; text-decoration: none; } .topNavIcon { padding-right: 30px; } } .topNavDropdownItemContainer a { padding: 0.5rem 1rem; &:hover { background-color: @secondary-color; // color: #fff; color: @sidenav-font-hover !important; } } .topNavUserLink { // display: inline-block; display: flex; padding: 0; color: @topnav-font-color; &:hover { color: @primary-color; } } .topNavUserPicture { height: 25px; width: 25px; height: 25px; width: 25px; margin-bottom: 3px; border-radius: 50%; margin-right: 0.5rem; } .topNavUserIcon { padding-top: 0.1rem; } .dropdown-toggle::after { display: none; } } .mobileOptionsMenuOpen { display: flex !important; } .topNavNoBoxShadow { box-shadow: none !important; } .mobileOptionsMenu { display: none; position: fixed; top: 60px; left: 0; right: 0; z-index: 1; background-color: @sidenav-background-color; justify-content: flex-end; .rhOptionTitle { color: #222; padding: .5rem 1rem; border-bottom: 1px solid fade(@label-grey, 30%); cursor: pointer; &:hover { background-color: @primary-color; color: #FFF; } } .rhFileOptionContainer { color: #222; border-bottom: 1px solid #eee; cursor: pointer; } .rhFileOptionTitle { padding: .5rem 1rem; } .rhFileOption { color: #888; padding: 5px 5px 5px 45px; &:hover { background-color: @primary-color; color: #FFF; } } .topNavDropdownHeader { padding: 0.5rem 1rem; text-transform: uppercase; color: @label-grey; font-size: 12px; } .topNavIcon { font-size: 15px !important; color: @topnav-font-color; width: 18px !important; } .rhDropdownmenu { .rhDropdownmenuButton { padding: 12px; padding-left: 0px; } .rhDropdownMenu { margin-top: 0; left: auto; right: 0; } } .topNavUser { .topNavUserDropdown { padding-right: 20px; } .topNavDropdownItemContainer { min-width: auto; left: -1px; @media screen and (max-height: 475px) { overflow: hidden scroll; height: 250px; } } } } #divtopmenu{ z-index:11; } #divtopmenuMobile { z-index: 11 !important; } /* SIDE NAV */ .sideNav { width: 240px; background-color: @sidenav-background-color; position: fixed; left: 0; top: 0; bottom: 0; z-index: 10; padding-top: 60px; transition: all 0.5s ease; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4); /* @media screen and (orientation: portrait ) and (max-width: 767px) { width: calc(100vw); left: calc(-100vw); opacity: 0.75; box-shadow: none; }*/ .sideNavInner { display: flex; flex-direction: column; overflow-y: auto; height: 100%; // padding-bottom: 56px; padding-bottom: 0; // scroll-padding: 70px 0 56px 0; scroll-padding: 70px 0 0 0; @media (min-width: 768px) { &::-webkit-scrollbar { display: none; } } @media (max-width: 767px) { padding-bottom: 0; } @media (hover: none) { &::-webkit-scrollbar { display: block; } // padding-bottom: 0; } #sideNavigation { overflow-x: hidden; } } .sideNavInnerScrollArrow { position: absolute; // right: 3px; right: 25px; color: fade(@sidenav-link-color, 50%); font-size: 16px; display: none; @media (max-width: 767px) { display: none; } @media (hover: none) { display: none !important; } &.sideNavInnerContainerUp { top: 128px; } &.sideNavInnerContainerDown { //bottom: 55px; bottom: 0; } } .sideNavCollapseToggle { width: 25px; height: 25px; border-radius: 50%; background: white; display: flex; justify-content: center; align-items: center; position: absolute; right: -10px; top: 84px; font-size: 13px; color: #555; box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.5); z-index: 10; visibility: hidden; opacity: 0; transition: all 0.2s ease-in-out; @media (max-width: 767px) { display: none !important; } } .sideNavIcon { width: 35px !important; display: flex; justify-content: center; align-items: center; //padding-left: 3px; margin-left: 8px; margin-right: -10px; } .sideNavTitleContainer { position: relative; display: flex; flex: 1 0 0; width: 100%; align-items: center; justify-content: space-between; } .secondaryLogoContainer { background-color: @sidenav-secondary-background-color; display: flex; flex-direction: row; // justify-content: center; //padding: 10px 5px 10px 10px; padding: 10px 5px; position: absolute; top: 060px; left: 0; right: 0; z-index: 5; .secondayLogoImageContainer { display: flex; justify-content: center; align-items: center; .secondayLogoImageInner { // background-color: #FFF; // border-radius: 50%; width: 50px; height: 50px; transition: all 0.5s ease; overflow: hidden; .secondaryLogo { width: 50px; max-height: 50px; } } .secondaryLogoInnerContainer { display: flex; height: 100%; // padding: 2px; justify-content: center; align-items: center; } } .secondaryLogoTextContainer { margin: auto 0; padding-left: 15px; // padding-left: 10px; } .companyName { color: @sidenav-link-color; font-size: 1.2rem; margin-bottom: 0; } .companyCopy { color: @sidenav-link-color; font-size: 0.9rem; margin-bottom: 0; } } .sideNavArrow { font-size: 0.9rem; @media screen and (max-width: 767px) { margin-right: 1rem; } } .sideNavSectionTitle { color: @sidenav-header-color; margin: 0.5rem auto; padding: 0; height: 40px; display: flex; align-items: center; .sideNavSectionIcon { color: @secondary-color; } } .sideNavItemContainer { // margin-top: 1rem; margin-top: 80px; //margin-bottom: 1rem; margin-bottom: 0; } .sideNavArrow { padding-right: 0.5rem; padding-top: 0.3rem; } .sideNavItemSelected { background-color: @secondary-color; } .sideNavItem { .sideNavItemLink { color: @sidenav-link-color; -webkit-transition: background-color 0.75s ease-in-out; -ms-transition: background-color 0.75s ease; transition: background-color 0.75s ease; position: relative; display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center; padding: 10px 0; //height: 40px; height: auto; // min-height: 40px; &:hover { color: @sidenav-font-hover; background-color: darken(@sidenav-secondary-background-color, 20%); padding-left: 5px; } } .sideNavItemTitle { // width: 170px; width: 170px; // white-space: nowrap; //overflow: hidden; //text-overflow: ellipsis; display: inline-block; font-size: 0.9rem; // padding-left: 5px; text-indent: 0; padding-left: 5px; margin-left: 10px; @media screen and (max-width: 767px) { flex: 1 0; width: auto; } } } /* SUBMENUS */ .sideNavLinkSelected { color: #fff; } //.sideNavFirstLevelSelected { // background-color: @secondary-color; // background-color: @secondary-color; //color: @sidenav-font-hover !important; //} //.sideNavLinkSelected { // position: relative; /* Needed for pseudo-element positioning */ //} //.sideNavLinkSelected::before { // content: ''; // position: absolute; // left: 0; // top: 0; // height: 100%; // width: 5px; // background-color: @secondary-color !important; //} .active-nav-parents { position: relative; /* Needed for pseudo-element positioning */ } .active-nav-parents::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 5px; background-color: @secondary-color !important; } .active-nav { color: @sidenav-font-hover !important; background-color: @secondary-color !important; } .sideNavSubMenu { display: none; // background-color: @secondary-color; background-color: @secondary-color; color: @sidenav-font-hover !important; //.sideNavSubmenuItemLink { //padding-left: 20px; //} } .subMenuLevelOne { //text-indent: 10px; //background-color: darken(@sidenav-secondary-background-color, 10%); background-color: @sidenav-secondary-background-color; // color: #fff; color: @sidenav-font-hover !important; } .subMenuLevelTwo { //text-indent: 20px; //background-color: darken(@sidenav-secondary-background-color, 20%); background-color: @sidenav-secondary-background-color; // color: #fff; color: @sidenav-font-hover !important; } .sideNavAdminContainer { background-color: @sidenav-secondary-background-color; position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; .sideAdminArrowIcon { padding-right: 0.5rem; padding-top: 0.3rem; } .sideNavAdminItems { display: none; margin-bottom: 1rem; .sideNavAdminLink { padding-left: 12px; color: @sidenav-link-color; -webkit-transition: background-color 0.75s ease-in-out; -ms-transition: background-color 0.75s ease; transition: background-color 0.75s ease; position: relative; display: flex; flex-direction: row; width: 100%; align-items: center; padding: 0; height: 40px; &:hover { color: @sidenav-font-hover; } .sideNavAdminIcon { padding-right: .75rem; } } } } &.sideNavNoSecondaryLogo { .sideNavItemContainer { margin-top: 10px; } .sideNavInnerScrollArrow { &.sideNavInnerContainerUp { top: 60px; } } } &.sideNavNoAdminMenu { .sideNavInner { padding-bottom: 0; } .sideNavInnerScrollArrow { &.sideNavInnerContainerDown { bottom: 0px; } } } } .sideNavRight { left: 0 !important; opacity: 1 !important; } .sideNavCollapse { @media screen and (max-width: 767.98px) { width: 0px !important; } width: 50px !important; } .sideNavCollapseToggleHover { visibility: visible !important; opacity: 1 !important; } .secondayLogoImageInnerCollapse { width: 40px !important; height: 40px !important; } .form-control { font-family: @primary-Font !important; } .adminTenantSearchContainer { display: flex; align-items: center; justify-content: center; padding: 0 1rem; .twitter-typeahead { width: 100%; } .adminTenantSearch { width: 100%; border: 1px solid #eee; padding: 5px; box-shadow: none; outline: none; &::selection { outline: none !important; } } } .adminTenantContainer::-webkit-scrollbar { width: 4px !important; } .adminTenantContainer { max-height: 272px; overflow-y: scroll; overflow-x: hidden; .adminTenantMenuItem { .adminTenantMenuItemName { display: inline-block !important; white-space: nowrap; vertical-align: middle; color: @sidenav-link-color; &:hover { color: @sidenav-font-hover; } } } }