misuzu/assets/less/classes/pagination.less

69 lines
1.6 KiB
Text

.pagination {
display: flex;
justify-content: space-between;
align-items: stretch;
width: 100%;
&__section {
display: flex;
align-items: stretch;
overflow: auto;
flex: 0 0 auto;
scrollbar-width: thin;
scrollbar-color: var(--accent-colour) var(--background-colour);
&--pages {
flex-shrink: 1;
@media (max-width: @site-mobile-width) {
display: none;
}
}
&:not(:last-child) {
margin-right: 1px;
}
}
&__link {
display: flex;
min-width: 40px;
font-size: 1.2em;
line-height: 1.5em;
padding: 3px 10px 4px;
text-align: center;
text-decoration: none;
background-color: var(--background-colour);
color: var(--accent-colour);
border: 1px solid var(--accent-colour);
border-radius: 2px;
transition: background-color .2s, color .2s;
text-align: center;
align-items: center;
justify-content: center;
flex: 1 0 auto;
&:not(:last-child) {
margin-right: 1px;
}
&--disabled {
--accent-colour: #555;
}
&--first,
&--last,
&--next,
&--prev {
padding-top: 5px;
}
&--current,
&:not(&--disabled):hover,
&:not(&--disabled):active,
&:not(&--disabled):focus {
background-color: var(--accent-colour);
color: var(--background-colour);
}
}
}