traxxx/assets/components/expand/expand.vue

64 lines
824 B
Vue
Raw Normal View History

<template>
<div>
<div
v-show="expanded"
class="expand expanded"
@click="$emit('expand', false)"
><Icon icon="arrow-up3" /></div>
<div
v-show="!expanded"
class="expand"
@click="$emit('expand', true)"
><Icon icon="arrow-down3" /></div>
</div>
</template>
<script>
export default {
props: {
expanded: {
type: Boolean,
default: false,
},
},
};
</script>
<style lang="scss" scoped>
.expand {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: .5rem;
.icon {
fill: var(--shadow);
}
&:hover {
cursor: pointer;
background: var(--shadow-hint);
.icon {
fill: var(--text);
}
}
}
.expand-dark {
.icon {
fill: var(--lighten);
}
&:hover {
background: var(--lighten-hint);
.icon {
fill: var(--text-light);
}
}
}
</style>