Make ChatListItem use focused-style

This commit is contained in:
tusooa 2023-03-02 21:26:31 -05:00
parent 830085b3e4
commit 090f4b854e
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
2 changed files with 13 additions and 8 deletions

View File

@ -1,3 +1,5 @@
@import "src/mixins";
.chat-list-item { .chat-list-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -7,11 +9,11 @@
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
:focus { @include unfocused-style {
outline: none; outline: none;
} }
&:hover { @include focused-style {
background-color: var(--selectedPost, $fallback--lightBg); background-color: var(--selectedPost, $fallback--lightBg);
box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%); box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
} }
@ -63,13 +65,15 @@
pointer-events: none; pointer-events: none;
} }
&:hover .animated.avatar { @include focused-style {
canvas { .animated.avatar {
display: none; canvas {
} display: none;
}
img { img {
visibility: visible; visibility: visible;
}
} }
} }

View File

@ -1,6 +1,7 @@
<template> <template>
<div <div
class="chat-list-item" class="chat-list-item"
tabindex="0"
@click.capture.prevent="openChat" @click.capture.prevent="openChat"
> >
<div class="chat-list-item-left"> <div class="chat-list-item-left">