2020-01-25 00:26:13 +00:00
|
|
|
<template>
|
2020-07-05 02:27:46 +00:00
|
|
|
<span
|
|
|
|
|
v-if="gender"
|
|
|
|
|
class="gender"
|
|
|
|
|
:class="{ [gender]: true }"
|
|
|
|
|
><Icon :icon="gender" /></span>
|
2020-01-25 00:26:13 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
2020-07-05 02:27:46 +00:00
|
|
|
props: {
|
|
|
|
|
gender: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: null,
|
|
|
|
|
},
|
|
|
|
|
},
|
2020-01-25 00:26:13 +00:00
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@import 'theme';
|
|
|
|
|
|
|
|
|
|
.gender {
|
|
|
|
|
&.female .icon {
|
2020-07-05 02:27:46 +00:00
|
|
|
fill: var(--female);
|
2021-03-23 19:37:20 +00:00
|
|
|
filter: drop-shadow(0 0 1px var(--darken));
|
2020-01-25 00:26:13 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.male .icon {
|
2020-07-05 02:27:46 +00:00
|
|
|
fill: var(--male);
|
2021-03-23 19:37:20 +00:00
|
|
|
filter: drop-shadow(0 0 1px var(--darken));
|
2020-01-25 00:26:13 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.transsexual .icon {
|
2021-03-23 19:37:20 +00:00
|
|
|
fill: var(--text-light);
|
2020-07-05 02:27:46 +00:00
|
|
|
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))
|
2021-03-23 19:37:20 +00:00
|
|
|
drop-shadow(0 0 1px var(--darken))
|
2020-01-25 00:26:13 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
