156 lines
2.7 KiB
SCSS
156 lines
2.7 KiB
SCSS
|
|
// TODO: replace with UX Pattern Library/UI Toolkit pattern
|
|
// Copied from _pagination.scss in cms
|
|
|
|
.pagination {
|
|
@include clearfix();
|
|
|
|
display: inline-block;
|
|
width: flex-grid(3, 12);
|
|
|
|
&.pagination-compact {
|
|
@include text-align(right);
|
|
}
|
|
|
|
&.pagination-full {
|
|
display: block;
|
|
width: flex-grid(4, 12);
|
|
margin: $baseline auto;
|
|
}
|
|
|
|
.nav-item {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.nav-link {
|
|
@include transition(all $tmg-f2 ease-in-out 0s);
|
|
|
|
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: $blue;
|
|
background-image: none;
|
|
border-radius: 3px;
|
|
color: $white;
|
|
}
|
|
|
|
&.is-disabled {
|
|
background-color: transparent;
|
|
color: $gray-l2;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.nav-label {
|
|
@extend %text-sr;
|
|
}
|
|
|
|
.pagination-form,
|
|
.current-page,
|
|
.page-divider,
|
|
.total-pages {
|
|
display: inline-block;
|
|
}
|
|
|
|
.current-page,
|
|
.page-number-input,
|
|
.total-pages {
|
|
@extend %t-copy-base;
|
|
@extend %t-strong;
|
|
|
|
width: ($baseline*2.5);
|
|
vertical-align: middle;
|
|
margin: 0 ($baseline*0.75);
|
|
padding: ($baseline/4);
|
|
text-align: center;
|
|
color: $gray-d1;
|
|
}
|
|
|
|
.current-page {
|
|
@extend %ui-depth1;
|
|
|
|
position: absolute;
|
|
|
|
@include left(-($baseline/4));
|
|
}
|
|
|
|
.page-divider {
|
|
@extend %t-title4;
|
|
@extend %t-regular;
|
|
|
|
vertical-align: middle;
|
|
color: $gray-l2;
|
|
}
|
|
|
|
.pagination-form {
|
|
@extend %ui-depth2;
|
|
|
|
position: relative;
|
|
|
|
.page-number-label,
|
|
.submit-pagination-form {
|
|
@extend %text-sr;
|
|
}
|
|
|
|
.page-number-input {
|
|
@include transition(all $tmg-f2 ease-in-out 0s);
|
|
|
|
border: 1px solid transparent;
|
|
border-bottom: 1px dotted $gray-l2;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
background: none;
|
|
|
|
&:hover {
|
|
background-color: $white;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
&:focus {
|
|
// borrowing the base input focus styles to match overall app
|
|
@include linear-gradient($yellow-l4, tint($yellow-l4, 90%));
|
|
|
|
opacity: 1;
|
|
box-shadow: 0 0 3px $shadow-d1 inset;
|
|
background-color: $white;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// styles for search/pagination metadata and sorting
|
|
.listing-tools {
|
|
@extend %t-copy-sub1;
|
|
|
|
color: $gray-d1;
|
|
|
|
label { // override
|
|
color: inherit;
|
|
font-size: inherit;
|
|
cursor: auto;
|
|
}
|
|
|
|
.listing-sort-select {
|
|
@extend %t-copy-sub1;
|
|
@extend %t-regular;
|
|
|
|
border: 0;
|
|
}
|
|
}
|