chad/awesome-cheatsheets
1
0
Fork 0
mirror of https://github.com/LeCoupa/awesome-cheatsheets.git synced 2025-11-08 22:11:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(base-cheatsheet): initialize component

Browse Source
This commit is contained in:
Julien
2018-09-09 19:46:23 +02:00
parent 93b68991dc
commit fb5da7dff2
4 changed files with 175 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
components/BaseCheatsheet.vue Normal file
View File

@@ -0,0 +1,65 @@
<!-- *************************************************************************
TEMPLATE
************************************************************************* -->
<template lang="pug">
.c-base-cheatsheet
img(
:src="thumbnail"
class="c-base-cheatsheet__thumbnail"
)
.c-base-cheatsheet__content
span.c-base-cheatsheet__name The {{ name }} Cheatsheet
</template>
<!-- *************************************************************************
SCRIPT
************************************************************************* -->
<script>
export default {
props: {
name: {
type: String,
required: true
},
thumbnail: {
type: String,
required: true
}
}
};
</script>
<!-- *************************************************************************
STYLE
************************************************************************* -->
<style lang="scss">
$c: ".c-base-cheatsheet";
#{$c} {
padding: 10px;
border: 1px solid #313d4f;
border-radius: 4px;
background: #273142;
#{$c}__thumbnail {
width: 100%;
height: 160px;
border-radius: 4px;
margin-bottom: 5px;
}
#{$c}__content {
padding: 10px;
text-align: left;
#{$c}__name {
margin-bottom: 20px;
color: #ffffff;
font-size: 18px;
}
}
}
</style>

4
components/BaseDivider.vue
View File

@@ -36,11 +36,11 @@ $c: ".c-base-divider";
align-items: center;
#{$c}__category {
font-size: 18px;
margin-right: 40px;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
margin-right: 40px;
font-size: 18px;
}
#{$c}__line {