cinny/src/app/organisms/room/PeopleDrawer.scss
Ajay Bura 36380fe5fd Add search in People drawer
Signed-off-by: Ajay Bura <ajbura@gmail.com>
2021-10-21 17:50:49 +05:30

74 lines
No EOL
1.3 KiB
SCSS

.people-drawer-flexBox {
display: flex;
flex-direction: column;
}
.people-drawer-flexItem {
flex: 1;
min-height: 0;
min-width: 0;
}
.people-drawer {
@extend .people-drawer-flexBox;
width: var(--people-drawer-width);
background-color: var(--bg-surface-low);
border-left: 1px solid var(--bg-surface-border);
[dir=rtl] & {
border: {
left: none;
right: 1px solid var(--bg-surface-hover);
}
}
&__member-count {
color: var(--tc-surface-low);
}
&__content-wrapper {
@extend .people-drawer-flexItem;
@extend .people-drawer-flexBox;
}
&__scrollable {
@extend .people-drawer-flexItem;
}
&__sticky {
& .people-search {
--search-input-height: 40px;
min-height: var(--search-input-height);
margin: 0 var(--sp-normal);
position: relative;
bottom: var(--sp-normal);
& .input {
height: var(--search-input-height);
}
}
}
}
.people-drawer__content {
padding-top: var(--sp-extra-tight);
padding-bottom: calc(2 * var(--sp-normal));
}
.people-drawer__load-more {
padding: var(--sp-normal);
padding: {
bottom: 0;
right: var(--sp-extra-tight);
}
[dir=rtl] & {
padding-right: var(--sp-normal);
padding-left: var(--sp-extra-tight);
}
& .btn-surface {
width: 100%;
}
}