arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-20 15:01:47 +01:00
Code Issues 31 Packages Projects Releases Wiki Activity

fix workskill hover color

Browse Source
This commit is contained in:
Arthur Danjou
2020-12-28 18:12:18 +01:00
parent e5f696a8aa
commit 40c47e421e
1 changed files with 56 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
components/WorkSkill.vue
View File

@@ -1,5 +1,8 @@
<template>
<div class="m-2 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
<div
class="m-2 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25"
:class="getColor"
>
<div class="w-full h-full flex flex-col justify-center items-center">
<div>
<img class="rounded-sm" alt="Skill Img" :src="require(`@/assets/img/skills/${cover}.png`)">
@@ -25,6 +28,58 @@ export default {
type: String,
default: "logo.jpg"
}
},
computed: {
getColor() {
switch (this.color) {
case 'orange':
return 'hover:bg-orange-600'
case 'purple':
return 'hover:bg-purple-600'
case 'blue':
return 'hover:bg-blue-600'
case 'green':
return 'hover:bg-green-600'
case 'yellow':
return 'hover:bg-yellow-600'
case 'cyan':
return 'hover:bg-cyan-600'
case 'teal':
return 'hover:bg-teal-600'
case 'amber':
return 'hover:bg-amber-600'
case 'blueGray':
return 'hover:bg-blueGray-600'
case 'emerald':
return 'hover:bg-emerald-600'
case 'lightBlue':
return 'hover:bg-lightBlue-600'
case 'lime':
return 'hover:bg-lime-600'
case 'rose':
return 'hover:bg-rose-600'
case 'black':
return 'hover:bg-black'
case 'white':
return 'hover:bg-white'
case 'pink':
return 'hover:bg-pink-600'
case 'fuchsia':
return 'hover:bg-fuchsia-600'
case 'violet':
return 'hover:bg-violet-600'
case 'indigo':
return 'hover:bg-indigo-600'
case 'warmGray':
return 'hover:bg-warmGray-600'
case 'trueGray':
return 'hover:bg-trueGray-600'
case 'gray':
return 'hover:bg-gray-600'
case 'coolGray':
return 'hover:bg-coolGray-600'
}
}
}
}
</script>