You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
4.0 KiB
166 lines
4.0 KiB
@import "../utilities/controls" |
|
@import "../utilities/mixins" |
|
|
|
$pagination-color: $text-strong !default |
|
$pagination-border-color: $border !default |
|
$pagination-margin: -0.25rem !default |
|
$pagination-min-width: $control-height !default |
|
|
|
$pagination-item-font-size: 1em !default |
|
$pagination-item-margin: 0.25rem !default |
|
$pagination-item-padding-left: 0.5em !default |
|
$pagination-item-padding-right: 0.5em !default |
|
|
|
$pagination-nav-padding-left: 0.75em !default |
|
$pagination-nav-padding-right: 0.75em !default |
|
|
|
$pagination-hover-color: $link-hover !default |
|
$pagination-hover-border-color: $link-hover-border !default |
|
|
|
$pagination-focus-color: $link-focus !default |
|
$pagination-focus-border-color: $link-focus-border !default |
|
|
|
$pagination-active-color: $link-active !default |
|
$pagination-active-border-color: $link-active-border !default |
|
|
|
$pagination-disabled-color: $text-light !default |
|
$pagination-disabled-background-color: $border !default |
|
$pagination-disabled-border-color: $border !default |
|
|
|
$pagination-current-color: $link-invert !default |
|
$pagination-current-background-color: $link !default |
|
$pagination-current-border-color: $link !default |
|
|
|
$pagination-ellipsis-color: $grey-light !default |
|
|
|
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default |
|
|
|
.pagination |
|
@extend %block |
|
font-size: $size-normal |
|
margin: $pagination-margin |
|
// Sizes |
|
&.is-small |
|
font-size: $size-small |
|
&.is-medium |
|
font-size: $size-medium |
|
&.is-large |
|
font-size: $size-large |
|
&.is-rounded |
|
.pagination-previous, |
|
.pagination-next |
|
padding-left: 1em |
|
padding-right: 1em |
|
border-radius: $radius-rounded |
|
.pagination-link |
|
border-radius: $radius-rounded |
|
|
|
.pagination, |
|
.pagination-list |
|
align-items: center |
|
display: flex |
|
justify-content: center |
|
text-align: center |
|
|
|
.pagination-previous, |
|
.pagination-next, |
|
.pagination-link, |
|
.pagination-ellipsis |
|
@extend %control |
|
@extend %unselectable |
|
font-size: $pagination-item-font-size |
|
justify-content: center |
|
margin: $pagination-item-margin |
|
padding-left: $pagination-item-padding-left |
|
padding-right: $pagination-item-padding-right |
|
text-align: center |
|
|
|
.pagination-previous, |
|
.pagination-next, |
|
.pagination-link |
|
border-color: $pagination-border-color |
|
color: $pagination-color |
|
min-width: $pagination-min-width |
|
&:hover |
|
border-color: $pagination-hover-border-color |
|
color: $pagination-hover-color |
|
&:focus |
|
border-color: $pagination-focus-border-color |
|
&:active |
|
box-shadow: $pagination-shadow-inset |
|
&[disabled] |
|
background-color: $pagination-disabled-background-color |
|
border-color: $pagination-disabled-border-color |
|
box-shadow: none |
|
color: $pagination-disabled-color |
|
opacity: 0.5 |
|
|
|
.pagination-previous, |
|
.pagination-next |
|
padding-left: $pagination-nav-padding-left |
|
padding-right: $pagination-nav-padding-right |
|
white-space: nowrap |
|
|
|
.pagination-link |
|
&.is-current |
|
background-color: $pagination-current-background-color |
|
border-color: $pagination-current-border-color |
|
color: $pagination-current-color |
|
|
|
.pagination-ellipsis |
|
color: $pagination-ellipsis-color |
|
pointer-events: none |
|
|
|
.pagination-list |
|
flex-wrap: wrap |
|
li |
|
list-style: none |
|
|
|
+mobile |
|
.pagination |
|
flex-wrap: wrap |
|
.pagination-previous, |
|
.pagination-next |
|
flex-grow: 1 |
|
flex-shrink: 1 |
|
.pagination-list |
|
li |
|
flex-grow: 1 |
|
flex-shrink: 1 |
|
|
|
+tablet |
|
.pagination-list |
|
flex-grow: 1 |
|
flex-shrink: 1 |
|
justify-content: flex-start |
|
order: 1 |
|
.pagination-previous, |
|
.pagination-next, |
|
.pagination-link, |
|
.pagination-ellipsis |
|
margin-bottom: 0 |
|
margin-top: 0 |
|
.pagination-previous |
|
order: 2 |
|
.pagination-next |
|
order: 3 |
|
.pagination |
|
justify-content: space-between |
|
margin-bottom: 0 |
|
margin-top: 0 |
|
&.is-centered |
|
.pagination-previous |
|
order: 1 |
|
.pagination-list |
|
justify-content: center |
|
order: 2 |
|
.pagination-next |
|
order: 3 |
|
&.is-right |
|
.pagination-previous |
|
order: 1 |
|
.pagination-next |
|
order: 2 |
|
.pagination-list |
|
justify-content: flex-end |
|
order: 3
|
|
|