open-vault/ui/app/styles/components/list-pagination.scss

79 lines
1.3 KiB
SCSS

.list-pagination {
@extend .has-slim-padding;
position: relative;
top: 1px;
background-color: $grey-lightest;
margin-bottom: $size-4;
a {
text-decoration: none;
height: 1.5rem;
min-width: 1.5rem;
border: none;
}
a.pagination-link {
width: 3ch;
}
a:not(.is-current):hover {
text-decoration: underline;
color: $blue;
}
a.is-current {
background-color: $grey;
}
.pagination {
justify-content: center;
}
.pagination-list {
flex-grow: 0;
}
.pagination-ellipsis {
margin: 0;
padding-left: 0;
padding-right: 0;
}
}
.list-pagination .pagination-previous,
.list-pagination .pagination-next {
@extend .button;
@extend .is-primary;
@extend .is-outlined;
@extend .is-compact;
background: $white;
max-width: 8rem;
@include until($tablet) {
max-width: 2rem;
padding-left: 0;
padding-right: 0;
}
.pagination-next-label,
.pagination-previous-label {
@include until($tablet) {
display: none;
}
}
.icon {
height: 1em;
width: 1em;
vertical-align: middle;
&:last-child:not(:first-child),
&:first-child:not(:last-child) {
margin: -0.1em 0 0;
}
}
.button .icon {
margin: 0;
}
}
.list-pagination .pagination-next {
@include until($tablet) {
order: 3;
}
}