traxxx/assets/components/expand/expand.vue

64 lines
870 B
Vue
Raw Normal View History

<template>
<div>
<div
v-show="expanded"
class="expand-button expanded noselect"
@click="$emit('expand', false)"
><Icon icon="arrow-up3" /></div>
<div
v-show="!expanded"
class="expand-button noselect"
@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-button {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: .5rem;
.icon {
2021-01-14 00:37:50 +00:00
fill: var(--lighten);
}
&:hover {
cursor: pointer;
2021-01-14 00:37:50 +00:00
background: var(--lighten-hint);
.icon {
2021-01-14 00:37:50 +00:00
fill: var(--text-light);
}
}
}
.expand-dark {
.icon {
fill: var(--darken-weak);
}
&:hover {
background: var(--darken-hint);
.icon {
fill: var(--darken);
}
}
}
</style>