84 lines
1.5 KiB
SCSS
84 lines
1.5 KiB
SCSS
//
|
|
// Component: Pagination
|
|
//
|
|
|
|
.pagination-month {
|
|
.page-item {
|
|
justify-self: stretch;
|
|
|
|
.page-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
box-shadow: none;
|
|
}
|
|
&:first-child,
|
|
&:last-child {
|
|
.page-link {
|
|
height: 100%;
|
|
font-size: $font-size-lg;
|
|
}
|
|
}
|
|
.page-month {
|
|
margin-bottom: 0;
|
|
font-size: $font-size-lg;
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
.page-year {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&.pagination-lg {
|
|
.page-month {
|
|
font-size: ($font-size-lg * 1.25);
|
|
}
|
|
}
|
|
&.pagination-sm {
|
|
.page-month {
|
|
font-size: ($font-size-base);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include dark-mode () {
|
|
.page-item {
|
|
&.disabled a,
|
|
&.disabled .page-link {
|
|
background-color: lighten($dark, 2.5%) !important;
|
|
border-color: $gray-600 !important;
|
|
color: $gray-600;
|
|
}
|
|
|
|
.page-link {
|
|
color: $primary-alt;
|
|
}
|
|
|
|
&.active {
|
|
.page-link {
|
|
background-color: $primary-alt;
|
|
border-color: $primary-alt;
|
|
color: $white;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $gray-400 !important;
|
|
}
|
|
}
|
|
}
|
|
&:not(.active) {
|
|
.page-link {
|
|
background-color: $dark;
|
|
border-color: $gray-600;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: lighten($primary-alt, 5%);
|
|
background-color: lighten($dark, 5%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|