Add animaition
This commit is contained in:
parent
41ae0ccd6f
commit
15da2de256
|
@ -11,8 +11,8 @@
|
||||||
<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</span>
|
<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</span>
|
||||||
<span :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.title }}</span>
|
<span :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.title }}</span>
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<button :data-active="src == 'mentions'" @click="src = 'mentions'" :title="$t('mentions')"><fa icon="at"/><i class="badge" v-if="$store.state.i.hasUnreadMentions"><fa icon="circle"/></i></button>
|
<button :data-active="src == 'mentions'" @click="src = 'mentions'" :title="$t('mentions')"><fa icon="at"/><i class="indicator" v-if="$store.state.i.hasUnreadMentions"><fa icon="circle"/></i></button>
|
||||||
<button :data-active="src == 'messages'" @click="src = 'messages'" :title="$t('messages')"><fa :icon="['far', 'envelope']"/><i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i></button>
|
<button :data-active="src == 'messages'" @click="src = 'messages'" :title="$t('messages')"><fa :icon="['far', 'envelope']"/><i class="indicator" v-if="$store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i></button>
|
||||||
<button @click="chooseTag" :title="$t('hashtag')" ref="tagButton"><fa icon="hashtag"/></button>
|
<button @click="chooseTag" :title="$t('hashtag')" ref="tagButton"><fa icon="hashtag"/></button>
|
||||||
<button @click="chooseList" :title="$t('list')" ref="listButton"><fa icon="list"/></button>
|
<button @click="chooseList" :title="$t('list')" ref="listButton"><fa icon="list"/></button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -219,12 +219,13 @@ export default Vue.extend({
|
||||||
line-height 42px
|
line-height 42px
|
||||||
color var(--faceTextButton)
|
color var(--faceTextButton)
|
||||||
|
|
||||||
> .badge
|
> .indicator
|
||||||
position absolute
|
position absolute
|
||||||
top -4px
|
top -4px
|
||||||
right 4px
|
right 4px
|
||||||
font-size 10px
|
font-size 10px
|
||||||
color var(--notificationIndicator)
|
color var(--notificationIndicator)
|
||||||
|
animation blink 1s infinite
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color var(--faceTextButtonHover)
|
color var(--faceTextButtonHover)
|
||||||
|
|
Loading…
Reference in New Issue