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

feat: add dropshadow prop to figure component

Browse source
This commit is contained in:
Sebin Nyshkim 2022-01-28 23:31:47 +01:00
parent 96005f3a9c
commit a4fadab6ad
2 changed files with 15 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/Figure.vue
View file

@ -5,7 +5,12 @@
:class="{ 'figure__border--polaroid': polaroidBorder }"
>
<template v-if="!nsfw || $root.nsfw">
<div class="figure__image"><slot name="img"></slot></div>
<div
class="figure__image"
:class="{ 'figure__image--dropshadow': dropshadow }"
>
<slot name="img"></slot>
</div>
</template>
<template v-else>
@ -47,6 +52,7 @@ import NsfwSwitch from "@/components/NsfwSwitch.vue";
export default {
props: {
polaroidBorder: Boolean,
dropshadow: Boolean,
nsfw: Boolean,
id: String,
},
@ -66,7 +72,6 @@ export default {
justify-content: center;
margin: 1em auto;
padding: 0 1em;
text-align: center;
&__border {
@ -104,6 +109,10 @@ export default {
max-width: 100%;
max-height: 35em;
}
&--dropshadow {
filter: drop-shadow(0.5em 0.25em 0.375em #000);
}
}
&__meta {
@ -125,7 +134,7 @@ export default {
max-height: 70em;
position: relative;
background-color: $bg-color-light;
background-color: $bg-color-lighter;
overflow: hidden;
@include mq-desktop {