archiwum/old-gractwo-pl
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

card hover styles

Browse Source
This commit is contained in:
Jakub Mańczak
2021-04-12 08:14:56 +02:00
parent 30399f031d
commit 572e88bbaf
2 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@@ -22,10 +22,11 @@
<style lang="sass"> <style lang="sass">
@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap') @import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap')
@import url('https://fonts.googleapis.com/css2?family=Material+Icons&display=swap')
:root :root
--dark-bg: #1a1a1a --dark-bg: #1a1a1a
--dark-bg2: #212121 --dark-bg2: #212121
--dark-bg3: #414141 --dark-bg3: #313131
--light: #c0c0c0 --light: #c0c0c0
* *
margin: 0 margin: 0

6
src/components/card.vue
View File

@@ -33,6 +33,7 @@ export default defineComponent({
user-select: none user-select: none
color: inherit color: inherit
text-decoration: inherit text-decoration: inherit
transition-duration: 100ms
img img
width: 84px width: 84px
border-radius: 8px 0 0 8px border-radius: 8px 0 0 8px
@@ -42,4 +43,9 @@ export default defineComponent({
.name .name
font-size: 1.7em font-size: 1.7em
letter-spacing: 0.1em letter-spacing: 0.1em
.meta
opacity: 0.5
&:focus,&:hover
background-color: var(--dark-bg3)
transform: scale(1.05)
</style> </style>