131 lines
2.3 KiB
SCSS
131 lines
2.3 KiB
SCSS
// studio - elements - pagination
|
|
// ==========================
|
|
|
|
%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;
|
|
padding: ($baseline/4) ($baseline*0.75);
|
|
|
|
&.previous {
|
|
margin-right: ($baseline/2);
|
|
}
|
|
|
|
&.next {
|
|
margin-left: ($baseline/2);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $blue;
|
|
border-radius: 3px;
|
|
color: $white;
|
|
}
|
|
|
|
&.is-disabled {
|
|
background-color: transparent;
|
|
color: $gray-l2;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.nav-label {
|
|
@extend %cont-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);
|
|
margin: 0 ($baseline*0.75);
|
|
padding: ($baseline/4);
|
|
text-align: center;
|
|
color: $gray-d2;
|
|
}
|
|
|
|
.current-page {
|
|
@extend %ui-depth1;
|
|
|
|
position: absolute;
|
|
|
|
@include left(-($baseline/4));
|
|
}
|
|
|
|
.page-divider {
|
|
@extend %t-title4;
|
|
@extend %t-regular;
|
|
|
|
vertical-align: middle;
|
|
color: $gray;
|
|
}
|
|
|
|
.pagination-form {
|
|
@extend %ui-depth2;
|
|
|
|
position: relative;
|
|
|
|
.page-number-label,
|
|
.submit-pagination-form {
|
|
@extend %cont-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($paleYellow, tint($paleYellow, 90%));
|
|
|
|
opacity: 1;
|
|
box-shadow: 0 0 3px $shadow-d1 inset;
|
|
background-color: $white;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|