142 lines
3.2 KiB
Vue
142 lines
3.2 KiB
Vue
<template>
|
|
<div :class="{ compact }">
|
|
<ul class="filters">
|
|
<li class="filter">
|
|
<label
|
|
class="toggle"
|
|
:class="{ active: !localFilter.includes('lesbian') }"
|
|
>
|
|
<input
|
|
v-model="localFilter"
|
|
value="lesbian"
|
|
type="checkbox"
|
|
class="check"
|
|
@change="$emit('set-filter', localFilter)"
|
|
>lesbian
|
|
</label>
|
|
</li>
|
|
|
|
<li class="filter">
|
|
<label
|
|
class="toggle"
|
|
:class="{ active: !localFilter.includes('gay') }"
|
|
>
|
|
<input
|
|
v-model="localFilter"
|
|
value="gay"
|
|
type="checkbox"
|
|
class="check"
|
|
@change="$emit('set-filter', localFilter)"
|
|
>gay
|
|
</label>
|
|
</li>
|
|
|
|
<li class="filter">
|
|
<label
|
|
class="toggle"
|
|
:class="{ active: !localFilter.includes('transsexual') }"
|
|
>
|
|
<input
|
|
v-model="localFilter"
|
|
value="transsexual"
|
|
type="checkbox"
|
|
class="check"
|
|
@change="$emit('set-filter', localFilter)"
|
|
>trans
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="filters">
|
|
<li class="filter">
|
|
<label
|
|
class="toggle"
|
|
:class="{ active: !localFilter.includes('anal') }"
|
|
>
|
|
<input
|
|
v-model="localFilter"
|
|
value="anal"
|
|
type="checkbox"
|
|
class="check"
|
|
@change="$emit('set-filter', localFilter)"
|
|
>anal
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
filter: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
compact: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
localFilter: this.filter,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import 'theme';
|
|
|
|
.filters {
|
|
display: inline-block;
|
|
list-style: none;
|
|
padding: .5rem;
|
|
margin: 0;
|
|
|
|
&:not(:last-child) {
|
|
border-right: solid 1px $shadow-hint;
|
|
}
|
|
}
|
|
|
|
.filter {
|
|
display: inline-block;
|
|
}
|
|
|
|
.compact {
|
|
.filters {
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
.filter {
|
|
margin: 0 0 1.5rem 0;
|
|
}
|
|
}
|
|
|
|
.toggle {
|
|
color: $shadow-weak;
|
|
box-sizing: border-box;
|
|
padding: .5rem;
|
|
margin: 0 .25rem;
|
|
border: solid 1px transparent;
|
|
font-size: .9rem;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
|
|
.check {
|
|
display: none;
|
|
}
|
|
|
|
&:hover {
|
|
color: $shadow;
|
|
}
|
|
|
|
&.active {
|
|
color: $primary;
|
|
box-shadow: 0 0 2px $shadow-weak;
|
|
}
|
|
}
|
|
</style>
|