mattwr18 81cbb7a85c Refactor styling, fix naming convention
- Emotions buttons were not displaying images correctly
- Follow vue guidelines for multiword naming convention
- Favor tokens over magic px numbers
2020-01-15 17:37:54 +01:00

43 lines
725 B
Vue

<template>
<div class="pagination-buttons">
<base-button
@click="$emit('back')"
:disabled="!hasPrevious"
icon="arrow-left"
circle
data-test="previous-button"
/>
<base-button
@click="$emit('next')"
:disabled="!hasNext"
icon="arrow-right"
circle
data-test="next-button"
/>
</div>
</template>
<script>
export default {
props: {
hasNext: {
type: Boolean,
default: false,
},
hasPrevious: {
type: Boolean,
default: false,
},
},
}
</script>
<style lang="scss">
.pagination-buttons {
display: flex;
justify-content: space-around;
width: $size-width-paginate;
margin: $space-x-small auto;
}
</style>