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

119 lines
2.3 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;
align-items: center;
2021-07-02 05:13:54 -04:00
top: 0;
background: var(--primary-background);
padding: 5px 0;
2021-07-02 05:13:54 -04:00
z-index: 10;
cursor: pointer;
svg {
margin-inline-end: 4px;
}
}
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: 0 10px;
height: 60px;
2021-06-19 15:00:30 -04:00
display: flex;
border-radius: 5px;
align-items: center;
cursor: pointer;
&:hover {
background: var(--secondary-background);
:global(.button) {
background-color: var(--primary-background);
}
}
.name {
flex-grow: 1;
margin: 0 12px;
font-size: 16px;
font-weight: 600;
2021-06-19 15:00:30 -04:00
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;
font-weight: 400;
2021-06-19 15:00:30 -04:00
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;
.button {
width: 36px;
height: 36px;
&:hover.error {
background: var(--error);
}
&:hover.success {
background: var(--success);
}
2021-06-19 15:00:30 -04:00
}
}
}
.divider {
width: 1px;
height: 24px;
margin: 0 8px;
background: var(--primary-background);
}
2021-07-02 05:39:07 -04:00
@media only screen and (max-width: 768px) {
.list {
padding: 0 8px 8px 8px;
2021-07-02 05:39:07 -04:00
}
.call {
display: none;
}
2021-07-02 05:39:07 -04:00
}
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;
}