src/components/styles/Pagination.css
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
float: right;
}
.pageNumber {
display: inline;
border-radius: 50%;
margin: 0 10px;
color: #777777;
position: relative;
padding: 8px 13px;
margin-left: -1px;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
cursor: pointer;
}
.pageItem {
display: inline-block;
}
.pageNumber:not(.pageActive):hover {
background-color: #eeeeee;
}
.pageActive {
background-color: var(--primary-color);
border: 1px solid #dddddd;
color: #FFFFFF;
padding: 10px 15px;
}
.pageActive:hover {
background-color: var(--secondary-color);
}
.pageWrapper {
margin-top: .5rem;
}
.ellipsis {
display: inline;
color: #777777;
position: relative;
margin-left: .5rem;
margin-right: 1.5rem;
text-decoration: none;
background-color: #ffffff;
}
@media only screen and (max-width: 767px) {
.pagination {
display: flex;
float: unset;
margin: auto;
margin-top: 2.5rem;
margin-bottom: 1.5rem;
width: 84%;
}
.pageWrapper {
margin: auto;
}
.pageNumber {
display: inline-flex;
}
}