95 lines
No EOL
1.2 KiB
Vue
95 lines
No EOL
1.2 KiB
Vue
<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;
|
|
|
|
&.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: 0 1 50%;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
flex: 0 1 100%;
|
|
}
|
|
}
|
|
|
|
&.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;
|
|
}
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
</style> |