Commit e93a40b9 authored by Ben Hong's avatar Ben Hong

feature (#13): Add basic styles for pagination buttons

parent b531223a
......@@ -53,18 +53,22 @@ export default {
</li>
</ul>
<button v-show="displayRange.start !== 0"
@click="previousPage"
type="button"
>
Previous
</button>
<button v-show="displayRange.end < filteredList.length"
@click="nextPage"
type="button"
>
Next
</button>
<div class="pagination">
<button v-show="displayRange.start !== 0"
@click="previousPage"
class="button--pagination"
type="button"
>
Previous
</button>
<button v-show="displayRange.end < filteredList.length"
@click="nextPage"
class="button--pagination"
type="button"
>
Next
</button>
</div>
</div>
</template>
......@@ -77,4 +81,27 @@ export default {
.blog-list__item {
list-style-type: none;
}
.button--pagination {
background-color: #32c8cf;
border-radius: 4px;
color: #fff;
font-size: 0.8rem;
padding: 0.5rem 0.75rem;
text-transform: uppercase;
font-weight: 700;
box-shadow: 0 0;
transition: background-color 0.2s ease-in, color 0.2s ease-in;
}
.button--pagination:hover {
background-color: #fff;
border: 1px solid #32c8cf;
border-radius: 4px;
color: #32c8cf;
}
.pagination {
text-align: center;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment