hong
108 lines
2.4 KiB
SCSS
108 lines
2.4 KiB
SCSS
@use '../abstracts/variables' as *;
|
|
@use '../abstracts/color-functions' as *;
|
|
@use '../abstracts/mixins' as *;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Pagination Component
|
|
// Based on Figma design: node-id=985-1102
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Pagination variables
|
|
$pagination-gap: 13px;
|
|
$pagination-icon-size: 24px;
|
|
$pagination-font-size: 18px;
|
|
$pagination-text-active: #212529;
|
|
$pagination-text-inactive: #5f666c;
|
|
$pagination-text-disabled: #adb5bd;
|
|
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: $pagination-gap;
|
|
margin-top:50px;
|
|
|
|
// Page navigation buttons (first, prev, next, last)
|
|
.page-first,
|
|
.page-prev,
|
|
.page-next,
|
|
.page-last {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: $pagination-icon-size;
|
|
height: $pagination-icon-size;
|
|
color: $pagination-text-active;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: $transition-fast;
|
|
|
|
&:hover:not(.disabled) {
|
|
color: $primary-blue;
|
|
}
|
|
|
|
&.disabled {
|
|
color: $pagination-text-disabled;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
// SVG icons inherit color from parent
|
|
svg {
|
|
width: $pagination-icon-size;
|
|
height: $pagination-icon-size;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
// Page number links
|
|
.page-num {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 10px;
|
|
height: 21px;
|
|
font-family: $font-family-primary;
|
|
font-size: $pagination-font-size;
|
|
font-weight: $font-weight-regular;
|
|
color: $pagination-text-inactive;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
transition: $transition-fast;
|
|
|
|
&:hover:not(.page-current) {
|
|
color: $primary-blue;
|
|
}
|
|
|
|
// Current active page
|
|
&.page-current {
|
|
font-weight: $font-weight-bold;
|
|
color: $pagination-text-active;
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
// Screen reader only text
|
|
.blind {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
// Pagination wrapper for alignment
|
|
.pagination-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: $spacing-lg 0;
|
|
margin-top: $spacing-lg;
|
|
}
|