lbry-desktop/ui/scss/component/_pagination.scss

80 lines
1.5 KiB
SCSS
Raw Normal View History

2017-07-29 21:34:22 +02:00
.pagination {
2019-07-21 23:31:22 +02:00
@extend .ul--no-style;
display: flex;
align-items: center;
+ .form-field {
2019-06-11 20:10:58 +02:00
margin-left: var(--spacing-medium);
}
2020-01-08 20:20:30 +01:00
@media (max-width: $breakpoint-small) {
font-size: var(--font-small);
}
2017-07-29 21:34:22 +02:00
}
.pagination__item {
width: 3rem;
height: 3rem;
border-radius: 50%;
text-align: center;
2019-01-08 20:48:09 +01:00
&:not(.pagination__item--selected):hover {
2019-11-22 22:13:00 +01:00
background-color: var(--color-button-secondary-bg);
2019-01-08 20:48:09 +01:00
}
&:not(.pagination__item--selected):not(.pagination__item--break):not(.disabled):hover {
2019-11-22 22:13:00 +01:00
color: var(--color-button-secondary-text);
&:hover {
background-color: var(--color-button-secondary-bg-hover);
}
}
2018-06-21 20:32:16 +02:00
&:not(.pagination__item--previous):not(.pagination__item--next) {
2019-11-07 20:39:22 +01:00
font-weight: var(--font-weight-bold);
line-height: 3rem;
margin: 0 0.5em;
}
&:not(.pagination__item--break):not(.disabled) {
2018-06-21 20:32:16 +02:00
cursor: pointer;
2017-07-29 21:34:22 +02:00
}
2018-06-21 20:32:16 +02:00
2017-07-29 21:34:22 +02:00
> a {
display: block;
2019-07-21 23:31:22 +02:00
height: 100%;
2017-07-29 21:34:22 +02:00
}
2020-01-08 20:20:30 +01:00
@media (max-width: $breakpoint-small) {
width: 2rem;
height: 2rem;
&:not(.pagination__item--previous):not(.pagination__item--next) {
font-weight: var(--font-weight-bold);
line-height: 2rem;
}
}
2017-07-17 08:06:04 +02:00
}
.pagination__item--break {
opacity: 0.3;
2017-07-17 08:06:04 +02:00
}
.pagination__item--previous,
.pagination__item--next {
line-height: 1.5;
position: relative;
2019-07-21 23:31:22 +02:00
padding-top: var(--spacing-small);
2017-08-09 06:31:56 +02:00
}
2017-07-29 21:34:22 +02:00
.pagination__item--selected {
2019-11-22 22:13:00 +01:00
background-color: var(--color-button-secondary-bg);
}
.paginate-channel {
width: 5rem;
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}