kihashi/stardew_community_checklist
1
0
Fork 0
mirror of https://github.com/kihashi/stardew_community_checklist.git synced 2025-10-19 08:03:17 +00:00
Code Issues Releases Activity

Display season and skill names on icon hover (#105)

Browse Source
This commit is contained in:
Sean Corrales 2019-10-28 08:18:58 -05:00 committed by John Cleaver
parent 73f21bffb0
commit 2b3d9f2785
2 changed files with 38 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/SeasonIcon.vue
View File

@ -1,5 +1,5 @@
<template>
<span class="icon">
<span class="icon" v-bind:data-season="season.id">
<spring-icon v-if="season.id === 'spring'"/>
<summer-icon v-if="season.id === 'summer'"/>
<fall-icon v-if="season.id === 'fall'"/>
@ -35,6 +35,23 @@ export default {
}
</script>
<style>
<style scoped>
.icon {
position: relative;
}
.icon:hover::after {
content: attr(data-season);
display: block;
position: absolute;
bottom: -1.85rem;
border-radius: 3px;
font-size: .75rem;
background-color: #00d1b2;
padding: .1rem .3rem;
text-transform: capitalize;
color: #000;
z-index: 100;
font-weight: bold;
}
</style>

21
src/components/SkillIcon.vue
View File

@ -1,5 +1,5 @@
<template>
<span class="icon">
<span class="icon" v-bind:data-skill="skill.id">
<farming-icon v-if="skill.id === 'farming'"/>
<mining-icon v-if="skill.id === 'mining'"/>
<foraging-icon v-if="skill.id === 'foraging'"/>
@ -38,6 +38,23 @@ export default {
}
</script>
<style>
<style scoped>
.icon {
position: relative;
}
.icon:hover::after {
content: attr(data-skill);
display: block;
position: absolute;
bottom: -1.85rem;
border-radius: 3px;
font-size: .75rem;
background-color: #209cee;
padding: .1rem .3rem;
text-transform: capitalize;
color: #FFF;
z-index: 100;
font-weight: bold;
}
</style>