1
1
mirror of https://github.com/namibia/awesome-cheatsheets.git synced 2024-11-15 09:44:16 +00:00
awesome-cheatsheets/components/BaseCheatsheet.vue

90 lines
1.8 KiB
Vue
Raw Normal View History

<!-- *************************************************************************
TEMPLATE
************************************************************************* -->
<template lang="pug">
2018-09-09 18:07:59 +00:00
a(
:href="link"
class="c-base-cheatsheet"
targer="_blank"
)
img(
2018-09-09 18:07:59 +00:00
:src="'/images/components/BaseCheatsheet/' + thumbnail"
class="c-base-cheatsheet__thumbnail"
)
.c-base-cheatsheet__content
span.c-base-cheatsheet__name The {{ name }} Cheatsheet
2018-09-09 18:07:59 +00:00
.c-base-cheatsheet__share
span(
v-for="network in networks"
:src="'/images/components/BaseCheatsheet/' + network"
class="c-base-cheatsheet__icon"
)
</template>
<!-- *************************************************************************
SCRIPT
************************************************************************* -->
<script>
export default {
props: {
2018-09-09 18:07:59 +00:00
link: {
type: String,
required: true
},
name: {
type: String,
required: true
},
thumbnail: {
type: String,
required: true
}
2018-09-09 18:07:59 +00:00
},
data() {
return {
// --> COMPONENTS <--
networks: ["twitter", "slack", "messenger", "telegram", "linkedin"]
};
}
};
</script>
<!-- *************************************************************************
STYLE
************************************************************************* -->
<style lang="scss">
$c: ".c-base-cheatsheet";
#{$c} {
2018-09-09 18:07:59 +00:00
display: block;
padding: 10px;
border: 1px solid #313d4f;
border-radius: 4px;
background: #273142;
2018-09-09 18:07:59 +00:00
cursor: pointer;
#{$c}__thumbnail {
2018-09-09 17:49:42 +00:00
margin-bottom: 5px;
width: 100%;
height: 160px;
border-radius: 4px;
}
#{$c}__content {
padding: 10px;
text-align: left;
#{$c}__name {
margin-bottom: 20px;
color: #ffffff;
font-size: 18px;
}
}
}
</style>