revite/src/pages/friends/Friend.module.scss

103 lines
2.1 KiB
SCSS
Raw Normal View History

2021-06-19 15:00:30 -04:00
.list {
2021-07-02 05:13:54 -04:00
padding: 0 20px 20px 20px;
2021-06-19 15:00:30 -04:00
user-select: none;
overflow-y: scroll;
.overline {
display: flex;
2021-07-02 05:13:54 -04:00
position: sticky;
top: 0;
background: var(--primary-background);
padding: 8px 0;
z-index: 10;
}
2021-06-19 15:00:30 -04:00
&[data-empty="true"] {
img {
height: 120px;
border-radius: 8px;
}
gap: 16px;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
}
.friend {
padding: 10px;
display: flex;
border-radius: 5px;
align-items: center;
flex-direction: row;
cursor: pointer;
&:hover {
background: var(--secondary-background);
:global(.button) {
background-color: var(--primary-background);
}
}
.name {
flex-grow: 1;
margin: 0 12px;
font-size: 16px;
display: flex;
flex-direction: column;
text-overflow: ellipsis;
overflow: hidden;
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2021-06-19 15:00:30 -04:00
.subtext {
font-size: 12px;
color: var(--tertiary-foreground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
2021-06-19 15:00:30 -04:00
}
}
.actions {
display: flex;
gap: 12px;
2021-07-02 05:13:54 -04:00
> a {
height: 40px;
width: 40px;
&:nth-child(1):hover {
background: var(--status-online); //TOFIX: change to normal green color
}
&:nth-child(3):hover {
background: var(--error);
}
2021-06-19 15:00:30 -04:00
}
}
}
2021-07-02 05:39:07 -04:00
@media only screen and (max-width: 768px) {
.list {
padding: 0 12px 12px 12px;
}
}
2021-06-19 15:00:30 -04:00
//! FIXME: Move this to the Header component, do this:
// 1. Check if header has topic, if yes, flex-grow: 0 on the title.
// 2. If header has no topic (example: friends page), flex-grow 1 on the header title.
.title {
flex-grow: 1;
}