hubl/src/styles/left-nav/_index.scss

325 lines
5.4 KiB
SCSS
Raw Normal View History

2021-01-15 13:00:06 +00:00
nav#main__menu {
2021-04-01 05:10:59 +00:00
height: 100vh;
2021-04-06 11:24:07 +00:00
&.searching {
background-image: url('../images/magnify-white.svg');
background-color: var(--color-heading);
background-repeat: no-repeat;
2021-04-06 11:27:49 +00:00
background-position-x: right -20px;
2021-04-06 11:24:07 +00:00
background-position-y: 150px;
2021-04-06 11:27:49 +00:00
background-size: 80%;
@media (max-width: 768px) {
background-size: 60%;
}
2021-04-06 11:24:07 +00:00
}
2021-01-19 18:59:24 +00:00
@media (max-width: 768px) {
min-height: calc(100vh - 50px);
}
2021-04-06 11:24:07 +00:00
.transparent-background {
background-color: transparent;
&.active[active] {
background-color: var(--color-third);
}
&.hover:hover:not([active]) {
background-color: #202B3C;
}
&.reverse {
background-color: var(--color-third);
}
}
.unread {
font-weight: bolder;
}
.badge {
float: right;
margin-right: 2px;
}
.icon {
padding: 3px;
}
2021-04-01 05:10:59 +00:00
.menu-search {
padding: 0;
2021-04-01 05:10:59 +00:00
form::before,
solid-form-placeholder-text::before {
display: none;
}
2021-04-01 05:10:59 +00:00
form {
display: flex;
solid-form-placeholder-text {
display: contents;
}
}
2021-04-01 05:10:59 +00:00
input {
2021-04-06 11:24:07 +00:00
background: transparent;
2021-04-01 05:10:59 +00:00
color: #D0D4DA;
margin-top: 0;
padding: 12px 13px;
height: 50px;
/* https://css-tricks.com/almanac/selectors/p/placeholder/ */
2021-04-06 11:24:07 +00:00
&::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
2021-04-01 05:10:59 +00:00
color: #D0D4DA;
}
2021-04-06 11:24:07 +00:00
&::-moz-placeholder {
/* Firefox 19+ */
2021-04-01 05:10:59 +00:00
color: #D0D4DA;
}
&:focus {
/*background: #202B3C;*/
2021-04-01 05:10:59 +00:00
color: white;
}
}
2021-05-11 10:50:11 +00:00
div>button {
2021-04-01 05:10:59 +00:00
background: transparent;
border: none;
color: #D0D4DA;
margin-top: 0 !important;
2021-05-11 10:50:11 +00:00
height: 100%;
@media (max-width: 768px) {
width: 20%;
}
&:hover::before {
color: white;
}
2021-04-01 05:10:59 +00:00
}
}
.menu-header {
/* Chevron animation */
.transform-up {
transform: rotateX(180deg);
}
.badge {
padding-top: 2px;
margin-right: 5px;
}
2021-04-06 11:58:24 +00:00
@media (min-width: 768.01px) {
&:not(:hover) .menu-options,
&:not(:hover) .menu-admin {
display: none;
}
}
2021-04-01 05:10:59 +00:00
.menu-options {
float: right;
}
2021-04-01 05:10:59 +00:00
.menu-admin {
position: absolute;
z-index: 3016;
2021-04-08 18:22:39 +00:00
left: 15%;
top: 36px;
text-align: end;
2021-04-08 18:22:39 +00:00
width: 80%;
2021-04-06 11:24:07 +00:00
@media (max-width: 768px) {
width: 100%;
left: 0;
height: 9vh;
top: 0;
text-align: center;
2021-04-06 11:58:24 +00:00
position: fixed;
top: 50px;
height: calc(100% - 50px);
}
}
2021-04-01 05:10:59 +00:00
}
.sub-menu {
2021-04-01 05:10:59 +00:00
/* Styles for the small icon */
.sub-menu-icon {
margin-left: 3px;
opacity: 0.8;
width: 12px;
2021-04-06 11:24:07 +00:00
>div {
line-height: 19px;
}
2021-04-01 05:10:59 +00:00
}
.sub-menu-name {
margin-right: 15px;
margin-left: 3px;
vertical-align: middle;
2021-04-28 15:18:49 +00:00
width: calc(75% - 15px);
}
}
2020-12-18 17:29:54 +00:00
/* Ellipsis */
.ellipsis {
hubl-menu-fix-url-circle,
hubl-menu-fix-url-project {
display: block;
}
.ellipsis-content,
.ellipsis-content>div {
2021-01-18 17:33:34 +00:00
display: block;
line-height: 19px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
2020-12-18 17:29:54 +00:00
2021-01-18 17:33:34 +00:00
@media (max-width: 768px) {
2020-12-18 17:29:54 +00:00
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;
}
2021-04-06 11:24:07 +00:00
/* 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 {
2021-04-06 11:24:07 +00:00
height: 28px;
display: block;
&:hover {
hubl-menu-fix-url-contact {
2021-04-06 11:24:07 +00:00
display: inline-block;
width: 100%;
}
2021-04-06 11:24:07 +00:00
hubl-counter {
padding-right: 25px;
}
solid-set-default[name="message"] {
margin-right: 9px;
2021-04-09 08:47:31 +00:00
width: 74%;
2021-04-06 11:24:07 +00:00
}
hubl-menu-contact-removed {
2021-04-06 11:24:07 +00:00
width: 38px;
height: 27.75px;
text-align: right;
position: relative;
top: -28px;
display: block;
2021-04-06 11:24:07 +00:00
left: calc(100% - 47px);
padding-top: 5px;
button {
&::before {
font-size: 18px;
color: white;
}
}
}
}
}
2021-04-06 11:24:07 +00:00
/* End */
/* Modal to keep/remove a contact */
hubl-menu-contact-removed dialog {
background: white !important;
border: none;
padding: 60px 30px;
text-align: center;
@media (max-width: 768px) {
width: 100vw;
}
p {
margin-bottom: 30px;
font-size: 16px;
}
2021-04-06 11:24:07 +00:00
div,
p {
background: white !important;
}
&::before,
p::before,
div::before,
button::before {
display: none;
}
}
2021-04-06 11:24:07 +00:00
/* End */
2021-01-15 13:00:06 +00:00
&.jsLeftMenu {
2021-01-18 10:51:33 +00:00
display: inline-block;
2021-01-15 13:00:06 +00:00
2021-01-18 10:51:33 +00:00
@media(max-width: 768px) {
display: none;
2021-01-15 13:00:06 +00:00
}
}
&.jsLeftMenu[open] {
2021-01-18 17:33:34 +00:00
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;
2021-01-15 13:00:06 +00:00
}
}
2021-04-06 11:24:07 +00:00
}