nav#main__menu { height: 100vh; @media (max-width: 768px) { min-height: calc(100vh - 50px); } .unread { font-weight: bolder; } .badge { float: right; margin-right: 2px; } .icon { padding: 3px; } .menu-search { form { display: flex; solid-form-placeholder-text { display: contents; } } input { background: var(--color-heading); color: #D0D4DA; margin-top: 0; padding: 12px 13px; height: 50px; background-image: url("/images/calendar.svg"); background-position: right 12px top 50%; background-repeat: no-repeat; background-size: 14px; /* https://css-tricks.com/almanac/selectors/p/placeholder/ */ &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #D0D4DA; } &::-moz-placeholder { /* Firefox 19+ */ color: #D0D4DA; } &:-moz-placeholder { /* Firefox 18- */ color: #D0D4DA; } &:focus { background: #202B3C; color: white; } } button { background: transparent; } } .menu-header { /* Chevron animation */ .transform-up { transform: rotateX(180deg); } .badge { padding-top: 2px; margin-right: 5px; } /* For the icon and the small sub-sub-menu*/ &:not(:hover) .menu-options, &:not(:hover) .menu-admin { display: none; } .menu-options { float: right; } .menu-admin { position: absolute; z-index: 3016; left: 48px; bottom: 37px; @media (max-width: 768px) { width: 100%; left: 0; height: 9vh; top: 0; } } } .sub-menu { /* Styles for the small icon */ .sub-menu-icon { margin-left: 3px; opacity: 0.8; width: 12px; >div { line-height: 19px; } } .sub-menu-name { margin-right: 15px; margin-left: 3px; vertical-align: middle; } } /* Ellipsis */ .ellipsis { hubl-menu-fix-url-circle, hubl-menu-fix-url-project { display: block; } .ellipsis-content, .ellipsis-content>div { display: block; line-height: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; @media (max-width: 768px) { display: block; } } } .empty { display: flex; flex-wrap: wrap; padding-left: 13px; width: 87%; } .divider { height: 1px; background-color: #D7DBE0; opacity: 0.2; } /* Header's general counter appear or disappear on click (JS animation) */ .menu-header>div:not(.transform-up)~.badge { display: none; } .menu-header>div.transform-up~.badge { display: block; } /* End */ /* The little cross icon on contacts' name appears or disapear + hover + styles */ .sub-menu__contacts>div>solid-display { hubl-menu-contact-removed { display: none; } } .sub-menu__contacts>div>solid-display { &:hover { display: flex; hubl-menu-fix-url-contact { width: 100%; background: #202B3C; } hubl-menu-contact-removed { display: block; background: #202B3C; padding-top: 5px; margin-left: auto; padding-right: 10px; .button-remove button::before { font-size: 18px; color: white; } } } } /* End */ /* Modal to keep/remove a contact */ hubl-menu-contact-removed dialog { border: none; padding: 60px 30px; text-align: center; @media (max-width: 768px) { width: 100vw; } p { margin-bottom: 30px; font-size: 16px; } &::before, p::before, div::before, button::before { display: none; } } /* End */ &.jsLeftMenu { display: inline-block; @media(max-width: 768px) { display: none; } } &.jsLeftMenu[open] { display: none; @media (max-width: 768px) { display: block; bottom: 0; box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); width: 100%; position: fixed; right: 0; top: 50px; z-index: 3000; } } }