hugo-theme-zzo/assets/sass/components/_pagination.scss

165 lines
3.3 KiB
SCSS

.pagination {
border-radius: 0.25rem;
margin: 2rem 1rem;
padding: 0.5rem 0;
@include flexbox();
@include align-items(center);
@include justify-content(center);
@include themify($themes) {
background-color: themed('pagination-background-color');
}
li {
border-radius: 0.25rem;
&.disabled {
a {
@include on-event {
@include themify($themes) {
color: themed('pagination-number-color');
text-decoration: none;
}
}
}
}
&.active {
a {
@include themify($themes) {
color: themed('link-hover');
}
}
}
}
a {
font-size: 1.25rem;
padding: 0.5rem 0.75rem;
@include themify($themes) {
color: themed('pagination-number-color');
@include on-event {
color: themed('link-hover');
}
}
}
.active {
@include themify($themes) {
background-color: themed('pagination-background-color');
}
}
}
.pagination-single {
@include flexbox();
@include align-items(center);
@include justify-content(space-between);
width: 100%;
margin: 1rem 0;
&__left,
&__right {
@include flex-basis(auto);
@include flex-grow(0);
@include flex-shrink(0);
@include flexbox();
@include align-items(center);
border-radius: 0.125rem;
}
&__left {
@include align-items(center);
@include justify-content(center);
padding: 0 0.5rem 0 0.25rem;
&-title {
@include truncate(250px);
@include respond-to(sm) {
@include truncate(150px);
}
padding-bottom: 0.3rem;
}
&-title--icon {
@include themify($themes) {
color: themed('social-icon-color');
}
}
}
&__right {
@include align-items(center);
@include justify-content(center);
padding: 0 0.25rem 0 0.5rem;
&-title {
@include truncate(250px);
@include respond-to(sm) {
@include truncate(150px);
}
padding-bottom: 0.3rem;
}
&-title--icon {
@include themify($themes) {
color: themed('social-icon-color');
}
}
}
}
.pagination-list {
border-radius: 0.25rem;
margin: 2rem 1rem;
padding: 0.5rem 0;
@include flexbox();
@include align-items(center);
@include justify-content(space-around);
@include themify($themes) {
background-color: themed('pagination-background-color');
}
&__item {
font-size: 0.95rem;
text-decoration: none !important;
@include flexbox();
@include align-items(center);
&--number {
@include themify($themes) {
color: themed('pagination-number-color');
}
}
.enable {
padding: 0 0.125rem;
@include themify($themes) {
color: themed('pagination-link-color');
}
@include on-event {
cursor: pointer;
border-radius: 0.1rem;
text-decoration: underline;
@include themify($themes) {
color: themed('link-hover');
}
}
}
.disabled {
cursor: default;
@include themify($themes) {
color: themed('pagination-disabled-color');
}
}
}
.icon {
@include flexbox();
@include align-items(stretch);
@include justify-content(center);
}
}