40 lines
914 B
Vue
40 lines
914 B
Vue
<template>
|
|
<span
|
|
v-if="gender"
|
|
class="gender"
|
|
:class="{ [gender]: true }"
|
|
>
|
|
<Icon :icon="gender" />
|
|
</span>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
gender: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.gender {
|
|
&.female .icon {
|
|
fill: var(--female);
|
|
filter: drop-shadow(0 0 1px var(--shadow-weak-20));
|
|
}
|
|
|
|
&.male .icon {
|
|
fill: var(--male);
|
|
filter: drop-shadow(0 0 1px var(--shadow-weak-20));
|
|
}
|
|
|
|
&.transsexual .icon {
|
|
fill: var(--text-light);
|
|
filter: drop-shadow(1px 0 0 var(--female)) drop-shadow(-1px 0 0 var(--female)) drop-shadow(0 1px 0 var(--female)) drop-shadow(0 -1px 0 var(--female))
|
|
drop-shadow(1px 0 0 var(--male)) drop-shadow(-1px 0 0 var(--male)) drop-shadow(0 1px 0 var(--male)) drop-shadow(0 -1px 0 var(--male))
|
|
drop-shadow(0 0 1px var(--shadow-weak-20))
|
|
}
|
|
}
|
|
</style>
|