traxxx-web/components/tiles/gender.vue

40 lines
914 B
Vue
Raw Normal View History

<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>