$page-active-color: #3c4258;
%page-link {
border-radius: 3px; transition: .3s all; margin: 0 7px; color: #1a1f36; display: block; cursor: pointer; padding: .5rem .75rem; &:disabled { cursor: not-allowed; } &.js-active, &:hover { background-color: $page-active-color; color: #fff; }
}
.pagination-wrap {
display: flex; .pagination-input { display: none; } > .input-group { width: initial; } > .input, > .input-group > .input { width: 7em; &.is-invalid:focus { box-shadow: 0 0 0 1px #cd3d64; color: #cd3d64; } } .input-group-append > .input-group-text { background-color: $page-active-color; color: #fff; height: 100%; } @media (max-width: $screen-sm) { display: block; > .input-group { margin-top: 1em; } > .pagination { justify-content: space-between; } }
}
.pagination {
display: flex; list-style: none; flex-wrap: wrap; @media (max-width: $screen-sm) { .page-link { margin-left: 3px; margin-right: 3px; } .page-link, .page-link-btn { padding: .2em .5em; i { font-size: 12px; } } }
}
.page-link {
@extend %page-link;
}
.pagination-lg .page-link {
padding: 1rem 1.5rem; font-size: 1.25rem; line-height: 1.5;
} .pagination-sm .page-link {
padding: .25rem .5rem; font-size: .875rem; line-height: 1.5;
}
.page-link-btn {
font-weight: 900; @extend %page-link; box-shadow: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.12) 0 1px 1px 0, rgba(60, 66, 87, 0.16) 0 0 0 1px, rgba(60, 66, 87, 0.12) 0 2px 5px 0; &:hover { box-shadow: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.12) 0 1px 1px 0, rgba(60, 66, 87, 0.16) 0 0 0 1px, rgba(60, 66, 87, 0.12) 0 3px 9px 0, rgba(60, 66, 87, 0.12) 0 2px 5px 0; }
}
.page-item.disabled {
.page-link, .page-link-btn { cursor: not-allowed; opacity: .5; &:hover { background-color: initial; color: initial; } }
}