Skip to content
This repository was archived by the owner on May 13, 2024. It is now read-only.

fix: cannot click tag labels on outside of the text (fix #84) #85

Merged
merged 2 commits into from
Jun 9, 2020
Merged

fix: cannot click tag labels on outside of the text (fix #84) #85

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
20fb0db
Clickable tag labels (incl. outside of the text)
twitwi Jun 1, 2020
33a83d9
style: format
billyyyyy3320 Jun 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 39 additions & 34 deletions components/PostTag.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<template>
<li class="post-tag">
<router-link :to="'/tag/' + tag"> {{ tag }} </router-link>
<router-link :to="'/tag/' + tag">
<span>{{ tag }}</span>
</router-link>
</li>
</template>

Expand All @@ -18,48 +20,51 @@ export default {

<style scoped lang="stylus">
.post-tag
background-color $postTagBgColor
border-radius 3px 0 0 3px
height 26px
padding 0 20px 0 23px
position relative
cursor pointer
height 26px

&:not(:last-child)
margin-right 10px

a
color $postTagColor
background-color $postTagBgColor
border-radius 3px 0 0 3px
padding 0 20px 0 23px
position relative
text-decoration none
transition color 0.2s
height 26px
display inline-block

&:before
position absolute
left 10px
top 10px
background #fff
border-radius 50%
box-shadow inset 0 1px rgba(0, 0, 0, 0.25)
content ''
height 6px
width 6px
span
color $postTagColor
transition color 0.2s

&:after
position absolute
right 0
top 0
background $bgColor
border-bottom 13px solid transparent
border-left 10px solid $postTagBgColor
border-top 13px solid transparent
content ''

&:hover
background-color $accentColor
&:before
position absolute
left 10px
top 10px
background #fff
border-radius 50%
box-shadow inset 0 1px rgba(0, 0, 0, 0.25)
content ''
height 6px
width 6px

&:after
border-left-color $accentColor
position absolute
right 0
top 0
background $bgColor
border-bottom 13px solid transparent
border-left 10px solid $postTagBgColor
border-top 13px solid transparent
content ''

&:hover
background-color $accentColor

&:after
border-left-color $accentColor

a
color #fff
span
color #fff
</style>