#column-left { display: flex; flex-direction: column; #chats-container { max-height: 100%; overflow: hidden; position: relative; } .sidebar-slider { height: 100%; } .sidebar-header__btn-container { position: relative; width: 39.75px; height: 39px; > * { visibility: hidden; opacity: 0; position: absolute; left: 0; top: 0; transition: .2s opacity; z-index: 2; &:before { transition: .2s transform; transform: rotate(180deg); } & + * { margin-left: 0!important; } &.active { //margin-top: 1px; opacity: 1; visibility: visible; color: #707579; &:before { transform: rotate(0deg); } } } } .sidebar-tools-button .btn-menu { width: 217px; .archived-count { border-radius: 12px; min-width: 24px; padding: 0 8px; height: 24px; text-align: center; line-height: 24px; color: #fff; font-weight: 500; background-color: #c5c9cc; justify-self: flex-end; position: absolute; right: 16px; } .archived-count:empty { display: none; } } .search-group-people { ul { display: flex; flex-direction: row; padding-left: 4px; margin-top: -1px; padding-bottom: 1px; } li { margin-right: 5px; padding: 0; } .rp { height: 98px; max-height: 98px; border-radius: 10px; max-width: 78px; width: 78px; align-items: center; position: relative; display: flex; flex-direction: column; cursor: pointer; padding: 12px 0 0 !important; overflow: hidden; margin: 0; } .dialog-avatar { width: 54px; height: 54px; } .user-caption { max-width: 65px; padding: 2px 0px 9px; font-size: 12px; } .user-title { max-width: unset; } .search-group-scrollable { position: relative; > .scrollable { position: relative; } } } .item-main .sidebar-content { .btn-menu { bottom: calc(100% + 10px); } &:hover { .btn-corner { transform: translateY(0px); &.menu-open:before { content: $tgico-close; } } } } } #search-container { transition: 150ms ease-in-out opacity,150ms ease-in-out transform; transform: scale(1.1, 1.1); opacity: 0; display: flex; &.active { transform: scale(1, 1); transform-origin: center; opacity: 1; } } .new-channel-container, .new-group-container, .edit-profile-container { .sidebar-content { flex-direction: column; } .avatar-edit { width: 120px; height: 120px; margin: 1px auto 32px; flex: 0 0 auto; } .input-wrapper { width: 380px; margin: 0 auto; flex: 0 0 auto; } .chats-container { flex: 1 1 auto; } .caption { font-size: 0.875rem; margin-top: 14px; margin-left: 23px; color: #707579; } } .new-group-members { padding: 1.5rem 0 0.4375rem; .search-group__name { text-transform: capitalize; } } .settings-container { .profile { &-button { display: flex; padding: 1.125rem 0.625rem; height: 3.5rem; line-height: 1.4; border-radius: 0.625rem; margin: 0px 0.5rem 0px 0.4375rem; &:hover { background: rgba(112, 117, 121, 0.08); cursor: pointer; } &:before { font-size: 24px; color: #707579; margin-left: 0.375rem; margin-top: -0.0625rem; } p { padding-left: 2rem; user-select: none; } } &-buttons { margin-top: .9375rem; width: 100%; } } } .edit-profile-container { .caption { margin-top: 1.063rem; margin-left: 1.438rem; line-height: 1.2; padding-bottom: 1.438rem; } .sidebar-left-h2 { color: #707579; padding: 0 1.438rem; padding-bottom: 1.5rem; font-weight: 500; } hr { margin-bottom: 1.5rem; } .scroll-wrapper { width: 100%; } }