42 lines
908 B
Vue
42 lines
908 B
Vue
<template>
|
|
<span
|
|
v-if="gender"
|
|
class="gender"
|
|
:class="{ [gender]: true }"
|
|
><Icon :icon="gender" /></span>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
gender: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import 'theme';
|
|
|
|
.gender {
|
|
&.female .icon {
|
|
fill: $female;
|
|
filter: drop-shadow(0 0 1px $shadow);
|
|
}
|
|
|
|
&.male .icon {
|
|
fill: $male;
|
|
filter: drop-shadow(0 0 1px $shadow);
|
|
}
|
|
|
|
&.transsexual .icon {
|
|
fill: $text-contrast;
|
|
filter: drop-shadow(1px 0 0 $female) drop-shadow(-1px 0 0 $female) drop-shadow(0 1px 0 $female) drop-shadow(0 -1px 0 $female)
|
|
drop-shadow(1px 0 0 $male) drop-shadow(-1px 0 0 $male) drop-shadow(0 1px 0 $male) drop-shadow(0 -1px 0 $male)
|
|
drop-shadow(0 0 1px $shadow)
|
|
}
|
|
}
|
|
</style>
|