KayFaraday
/
Zaimki
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

#25 extract SquareButton

This commit is contained in:
Avris 2020-07-26 16:45:22 +02:00
parent 4b664f0825
commit 4f2b1ee947
2 changed files with 46 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/Share.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="shareon">
<a v-for="network in networks" :href="link(network)" target="_blank" rel="noopener" class="btn-square m-1" :style="'background-color: ' + colour(network)">
<div>
<SquareButton v-for="network in networks" :link="link(network)" :colour="colour(network)">
<Icon :v="icon(network)" set="b"/>
</a>
</SquareButton>
</div>
</template>
@ -77,32 +77,3 @@
}
}
</script>
<style lang="scss" scoped>
@import "assets/style";
$size: 2.2rem;
.btn-square {
display: inline-grid;
place-items: center;
height: $size;
min-width: $size;
background-color: #ccc;
border-radius: $border-radius;
border: none;
color: white;
line-height: 1.5;
font-size: $size * 0.6;
transition: opacity 300ms ease;
&:hover {
border: none;
cursor: pointer;
opacity: .7;
color: white;
text-decoration: none;
}
}
</style>

43
components/SquareButton.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<a :href="link" target="_blank" rel="noopener" class="btn-square m-1" :style="colour ? ('background-color: ' + colour) : 'colour'">
<slot></slot>
</a>
</template>
<script>
export default {
props: {
link: { required: true },
colour: { },
},
}
</script>
<style lang="scss" scoped>
@import "assets/style";
$size: 2.2rem;
.btn-square {
display: inline-grid;
place-items: center;
height: $size;
min-width: $size;
background-color: $primary;
border-radius: $border-radius;
border: none;
color: white;
line-height: 1.5;
font-size: $size * 0.6;
transition: opacity 300ms ease;
&:hover {
border: none;
cursor: pointer;
opacity: .7;
color: white;
text-decoration: none;
}
}
</style>