bulma/sass/components/pagination.scss

@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;

.#{$class-prefix}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 {
    .#{$class-prefix}pagination-previous,
    .#{$class-prefix}pagination-next {
      padding-left: 1em;
      padding-right: 1em;
      border-radius: $radius-rounded;
    }

    .#{$class-prefix}pagination-link {
      border-radius: $radius-rounded;
    }
  }
}

.#{$class-prefix}pagination,
.#{$class-prefix}pagination-list {
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
}

.#{$class-prefix}pagination-previous,
.#{$class-prefix}pagination-next,
.#{$class-prefix}pagination-link,
.#{$class-prefix}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;
}

.#{$class-prefix}pagination-previous,
.#{$class-prefix}pagination-next,
.#{$class-prefix}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],
  &.is-disabled {
    background-color: $pagination-disabled-background-color;
    border-color: $pagination-disabled-border-color;
    box-shadow: none;
    color: $pagination-disabled-color;
    opacity: 0.5;
  }
}

.#{$class-prefix}pagination-previous,
.#{$class-prefix}pagination-next {
  padding-left: $pagination-nav-padding-left;
  padding-right: $pagination-nav-padding-right;
  white-space: nowrap;
}

.#{$class-prefix}pagination-link {
  &.is-current {
    background-color: $pagination-current-background-color;
    border-color: $pagination-current-border-color;
    color: $pagination-current-color;
  }
}

.#{$class-prefix}pagination-ellipsis {
  color: $pagination-ellipsis-color;
  pointer-events: none;
}

.#{$class-prefix}pagination-list {
  flex-wrap: wrap;

  li {
    list-style: none;
  }
}

@include mobile {
  .#{$class-prefix}pagination {
    flex-wrap: wrap;
  }

  .#{$class-prefix}pagination-previous,
  .#{$class-prefix}pagination-next {
    flex-grow: 1;
    flex-shrink: 1;
  }

  .#{$class-prefix}pagination-list {
    li {
      flex-grow: 1;
      flex-shrink: 1;
    }
  }
}

@include tablet {
  .#{$class-prefix}pagination-list {
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    order: 1;
  }

  .#{$class-prefix}pagination-previous,
  .#{$class-prefix}pagination-next,
  .#{$class-prefix}pagination-link,
  .#{$class-prefix}pagination-ellipsis {
    margin-bottom: 0;
    margin-top: 0;
  }

  .#{$class-prefix}pagination-previous {
    order: 2;
  }

  .#{$class-prefix}pagination-next {
    order: 3;
  }

  .#{$class-prefix}pagination {
    justify-content: space-between;
    margin-bottom: 0;
    margin-top: 0;

    &.is-centered {
      .#{$class-prefix}pagination-previous {
        order: 1;
      }

      .#{$class-prefix}pagination-list {
        justify-content: center;
        order: 2;
      }

      .#{$class-prefix}pagination-next {
        order: 3;
      }
    }

    &.is-right {
      .#{$class-prefix}pagination-previous {
        order: 1;
      }

      .#{$class-prefix}pagination-next {
        order: 2;
      }

      .#{$class-prefix}pagination-list {
        justify-content: flex-end;
        order: 3;
      }
    }
  }
}