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

Updated styling

Browse source
This commit is contained in:
Sebin Nyshkim 2019-11-06 16:19:49 +01:00
parent e5b53b0a6d
commit 4182f7a93b
1 changed files with 15 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/RichFigure.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<figure :class="[{ float: imgPos }, imgPos]" :style="'width: ' + imgW"> <figure :class="[{ float: imgPos }, imgPos]">
<img :src="imgSrc" :alt="caption" /> <img :src="imgSrc" :alt="caption" />
<figcaption>{{ caption }}</figcaption> <figcaption>{{ caption }}</figcaption>
</figure> </figure>
@ -20,9 +20,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
figure { figure {
position: relative; position: relative;
overflow: hidden;
margin: 0; margin: 0;
line-height: 1; line-height: 1;
figcaption { figcaption {
@ -32,7 +31,6 @@ figure {
right: 0; right: 0;
line-height: 1.5; line-height: 1.5;
background: rgba(#000, 0.5); background: rgba(#000, 0.5);
color: #fff; color: #fff;
text-align: center; text-align: center;
@ -44,14 +42,20 @@ figure {
} }
.float { .float {
&.left { width: 100%;
float: left;
margin: 0 0.75em 0.375em 0;
}
&.right { @media (min-width: 35em) {
float: right; width: 20em;
margin: 0 0 1em 1em;
&.left {
float: left;
margin: 0 0.75em 0.375em 0;
}
&.right {
float: right;
margin: 0 0 1em 1em;
}
} }
} }
</style> </style>