azalea/corner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[+] Place after as an element

Browse Source
This commit is contained in:
Hykilpikonna
2021-12-26 17:02:52 -05:00
parent 4c87ad5c03
commit 3009173e79
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tag.vue
+11 -9
View File
@@ -1,5 +1,8 @@
<template> <template>
<div class="tag fbox-vcenter"><slot></slot></div> <div class="tag fbox-vcenter">
<slot></slot>
<div class="after"></div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -32,12 +35,11 @@ $triangle-width: $tag-height / 2 * 0.8
margin-right: $triangle-width margin-right: $triangle-width
transition: color 0.2s transition: color 0.2s
.tag::after .after
content: '' border-bottom: $tag-height / 2 solid transparent
border-bottom: $tag-height / 2 solid transparent border-top: $tag-height / 2 solid transparent
border-top: $tag-height / 2 solid transparent border-left: $triangle-width solid $tag-color
border-left: $triangle-width solid $tag-color position: absolute
position: absolute right: -$triangle-width
right: -$triangle-width top: 0
top: 0
</style> </style>