Add animaition

This commit is contained in:
syuilo 2019-03-02 14:27:30 +09:00
parent 41ae0ccd6f
commit 15da2de256
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69

View File

@ -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)