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

6
src/views/Anatomy.vue
View file

@ -17,7 +17,7 @@
<prose> <prose>
<h2>Anatomy</h2> <h2>Anatomy</h2>
<ref-figure> <ref-figure dropshadow>
<template #img> <template #img>
<img <img
v-if="$root.nsfw" v-if="$root.nsfw"
@ -104,7 +104,7 @@
</p> </p>
<h3>Head</h3> <h3>Head</h3>
<ref-figure> <ref-figure dropshadow>
<template #img> <template #img>
<img <img
src="@/assets/refs/sebin-ref-expressions.png" src="@/assets/refs/sebin-ref-expressions.png"
@ -353,7 +353,7 @@
<template v-if="$root.nsfw"> <template v-if="$root.nsfw">
<h3>Penis</h3> <h3>Penis</h3>
<ref-figure> <ref-figure dropshadow>
<template #img> <template #img>
<img <img
src="@/assets/refs/sebin-ref-penis.png" src="@/assets/refs/sebin-ref-penis.png"