SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Removed ImageParagraph component

Browse source
This commit is contained in:
Sebin Nyshkim 2019-11-06 12:23:59 +01:00
parent ef4fbbc711
commit 4948252f16
2 changed files with 33 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

104
src/components/ImageParagraph.vue
View file

@ -1,104 +0,0 @@
<template>
<div class="image-paragraph" :class="imgPos">
<div class="image">
<img :src="imgSrc" alt="Image" />
</div>
<div class="text">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "ImageParagraph",
props: {
imgSrc: String,
imgPos: String
}
};
</script>
<style lang="scss" scoped>
.image-paragraph {
margin: 1em 0;
display: flex;
flex-flow: row;
&.right div,
&.left div {
align-self: center;
}
&.left .text {
@media (min-width: 35em) {
padding-left: 1em;
}
}
&.right .text {
@media (min-width: 35em) {
padding-right: 1em;
}
}
&.left,
&.right {
flex-wrap: wrap;
@media (min-width: 35em) {
flex-wrap: nowrap;
}
.image {
flex: 0 1 100%;
@media (min-width: 35em) {
flex: 1;
}
}
.text {
flex: 1;
}
}
&.top,
&.bottom {
flex-wrap: wrap;
justify-content: center;
.image {
flex: 0 1 auto;
}
.text {
flex: 0 1 100%;
}
}
&.top .text {
margin-top: 1em;
}
&.bottom .text {
margin-bottom: 1em;
}
@media (min-width: 35em) {
&.bottom .image,
&.right .image {
order: 2;
}
}
.image {
text-align: center;
img {
max-width: 100%;
}
}
}
</style>