UX: flat design for thread list (#23821)

* UX: thread list flat design

* UX: thread list mobile
This commit is contained in:
chapoi
2023-10-06 21:56:36 +02:00
committed by GitHub
parent 77e1d69b74
commit cac5592251
2 changed files with 10 additions and 7 deletions

View File

@@ -1,24 +1,25 @@
@mixin thread-list-item { @mixin thread-list-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 0.5rem; padding: 1rem;
margin-inline: 0.5rem;
border-radius: var(--d-border-radius); border-radius: var(--d-border-radius);
background-color: var(--primary-very-low); border-bottom: 1px solid var(--primary-low);
border: 1px solid transparent; cursor: pointer;
} }
.chat-thread-list-item { .chat-thread-list-item {
@include thread-list-item; @include thread-list-item;
cursor: pointer;
margin: 0.75rem;
& + .chat-thread-list-item { & + .chat-thread-list-item {
margin-top: 0; margin-top: -1px;
} }
.touch & { .touch & {
&:active { &:active {
background-color: var(--d-hover); background-color: var(--d-hover);
padding-inline: 1.5rem;
margin-inline: 0;
} }
} }
@@ -26,6 +27,8 @@
&:hover, &:hover,
&:active { &:active {
background-color: var(--d-hover); background-color: var(--d-hover);
padding-inline: 1.5rem;
margin-inline: 0;
} }
} }

View File

@@ -1,7 +1,7 @@
.chat-thread-list { .chat-thread-list {
&__items { &__items {
.chat-thread-list-item { .chat-thread-list-item {
margin: 0.5rem; padding: 0.5rem 0.25rem;
} }
&__no-threads { &__no-threads {