Files
habitica/website/client/src/components/ui/showMoreButton.vue
negue bad3f82dfb Inventory: fixes / layout (#11948)
Co-authored-by: Sabe Jones <sabrecat@gmail.com>
2020-10-19 23:54:51 +02:00

42 lines
735 B
Vue

<template>
<button class="btn btn-flat btn-show-more mb-4"
@click="$emit('click')"
>
<span class="button-text">
{{ showAll ? $t('showLess') : $t('showMore') }}
</span>
</button>
</template>
<script>
export default {
props: ['showAll'],
};
</script>
<style scoped lang="scss">
@import '~@/assets/scss/colors.scss';
.btn-show-more {
height: 2rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
border-radius: 2px;
.button-text {
height: 1.5rem;
font-size: 14px;
font-weight: bold;
line-height: 1.71;
text-align: center;
color: $gray-100;
}
&:hover {
.button-text {
color: $purple-300;
}
}
}
</style>