133 lines
2.3 KiB
SCSS
133 lines
2.3 KiB
SCSS
// Copied from elements/_pagination.scss
|
|
|
|
.pagination {
|
|
@include clearfix();
|
|
|
|
display: inline-block;
|
|
width: flex-grid(3, 12); // TODO: remove flex-grid
|
|
|
|
&.pagination-compact {
|
|
@include text-align(right);
|
|
}
|
|
|
|
&.pagination-full {
|
|
display: block;
|
|
width: flex-grid(4, 12); // TODO: remove flex-grid
|
|
margin: $baseline auto;
|
|
}
|
|
|
|
.nav-item {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.nav-link {
|
|
display: block;
|
|
border: 0;
|
|
background-image: none;
|
|
background-color: transparent;
|
|
padding: ($baseline/2) ($baseline*0.75);
|
|
|
|
&.previous {
|
|
margin-right: ($baseline/2);
|
|
}
|
|
|
|
&.next {
|
|
margin-left: ($baseline/2);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: theme-color("primary");
|
|
background-image: none;
|
|
border-radius: 3px;
|
|
color: $white;
|
|
}
|
|
|
|
&.is-disabled {
|
|
background-color: transparent;
|
|
color: theme-color("disabled");
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.nav-label {
|
|
@extend .sr-only;
|
|
}
|
|
|
|
.pagination-form,
|
|
.current-page,
|
|
.page-divider,
|
|
.total-pages {
|
|
display: inline-block;
|
|
}
|
|
|
|
.current-page,
|
|
.page-number-input,
|
|
.total-pages {
|
|
width: ($baseline*2.5);
|
|
vertical-align: middle;
|
|
margin: 0 ($baseline*0.75);
|
|
padding: ($baseline/4);
|
|
text-align: center;
|
|
color: theme-color("dark");
|
|
}
|
|
|
|
.current-page {
|
|
position: absolute;
|
|
|
|
@include left(-($baseline/4));
|
|
}
|
|
|
|
.page-divider {
|
|
vertical-align: middle;
|
|
color: theme-color("dark");
|
|
}
|
|
|
|
.pagination-form {
|
|
position: relative;
|
|
z-index: 100;
|
|
|
|
.page-number-label,
|
|
.submit-pagination-form {
|
|
@extend .sr-only;
|
|
}
|
|
|
|
.page-number-input {
|
|
border: 1px solid transparent;
|
|
border-bottom: 1px dotted $gray;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
background: none;
|
|
|
|
&:hover {
|
|
background-color: $white;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
&:focus {
|
|
opacity: 1;
|
|
box-shadow: 0 0 3px $black inset;
|
|
background-color: $white;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// styles for search/pagination metadata and sorting
|
|
.listing-tools {
|
|
color: theme-color("dark");
|
|
|
|
label { // override
|
|
color: inherit;
|
|
font-size: inherit;
|
|
cursor: auto;
|
|
}
|
|
|
|
.listing-sort-select {
|
|
border: 0;
|
|
}
|
|
}
|