Make ChatListItem use focused-style
This commit is contained in:
parent
830085b3e4
commit
090f4b854e
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in New Issue