bulma/sass/components/pagination.scss

@import "../utilities/controls";
@import "../utilities/mixins";

$pagination-color: getVar("text-strong") !default;
$pagination-border-color: getVar("border") !default;
$pagination-margin: -0.25rem !default;
$pagination-min-width: $control-height !default; // TODO

$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: getVar("link-hover") !default;
$pagination-hover-border-color: getVar("link-hover-border") !default;

$pagination-focus-color: getVar("link-focus") !default;
$pagination-focus-border-color: getVar("link-focus-border") !default;

$pagination-active-color: getVar("link-active") !default;
$pagination-active-border-color: getVar("link-active-border") !default;

$pagination-disabled-color: getVar("text-light") !default;
$pagination-disabled-background-color: getVar("border") !default;
$pagination-disabled-border-color: getVar("border") !default;

$pagination-current-color: getVar("link-invert") !default;
$pagination-current-background-color: getVar("link") !default;
$pagination-current-border-color: getVar("link") !default;

$pagination-ellipsis-color: getVar("grey-light") !default;

$pagination-shadow-inset: inset 0 1px 2px rgba(getVar("shadow-color-rgb"), 0.2) !default;

:root {
  @include register-vars(
    (
      pagination-color: #{$pagination-color},
      pagination-border-color: #{$pagination-border-color},
      pagination-margin: #{$pagination-margin},
      pagination-min-width: #{$pagination-min-width},
      pagination-item-font-size: #{$pagination-item-font-size},
      pagination-item-margin: #{$pagination-item-margin},
      pagination-item-padding-left: #{$pagination-item-padding-left},
      pagination-item-padding-right: #{$pagination-item-padding-right},
      pagination-nav-padding-left: #{$pagination-nav-padding-left},
      pagination-nav-padding-right: #{$pagination-nav-padding-right},
      pagination-hover-color: #{$pagination-hover-color},
      pagination-hover-border-color: #{$pagination-hover-border-color},
      pagination-focus-color: #{$pagination-focus-color},
      pagination-focus-border-color: #{$pagination-focus-border-color},
      pagination-active-color: #{$pagination-active-color},
      pagination-active-border-color: #{$pagination-active-border-color},
      pagination-disabled-color: #{$pagination-disabled-color},
      pagination-disabled-background-color: #{$pagination-disabled-background-color},
      pagination-disabled-border-color: #{$pagination-disabled-border-color},
      pagination-current-color: #{$pagination-current-color},
      pagination-current-background-color: #{$pagination-current-background-color},
      pagination-current-border-color: #{$pagination-current-border-color},
      pagination-ellipsis-color: #{$pagination-ellipsis-color},
      pagination-shadow-inset: #{$pagination-shadow-inset},
    )
  );
}

.#{$class-prefix}pagination {
  @extend %block;

  font-size: getVar("size-normal");
  margin: getVar("pagination-margin");

  // Sizes
  &.is-small {
    font-size: getVar("size-small");
  }

  &.is-medium {
    font-size: getVar("size-medium");
  }

  &.is-large {
    font-size: getVar("size-large");
  }

  &.is-rounded {
    .#{$class-prefix}pagination-previous,
    .#{$class-prefix}pagination-next {
      padding-left: 1em;
      padding-right: 1em;
      border-radius: getVar("radius-rounded");
    }

    .#{$class-prefix}pagination-link {
      border-radius: getVar("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: getVar("pagination-item-font-size");
  justify-content: center;
  margin: getVar("pagination-item-margin");
  padding-left: getVar("pagination-item-padding-left");
  padding-right: getVar("pagination-item-padding-right");
  text-align: center;
}

.#{$class-prefix}pagination-previous,
.#{$class-prefix}pagination-next,
.#{$class-prefix}pagination-link {
  border-color: getVar("pagination-border-color");
  color: getVar("pagination-color");
  min-width: getVar("pagination-min-width");

  &:hover {
    border-color: getVar("pagination-hover-border-color");
    color: getVar("pagination-hover-color");
  }

  &:focus {
    border-color: getVar("pagination-focus-border-color");
  }

  &:active {
    box-shadow: getVar("pagination-shadow-inset");
  }

  &[disabled],
  &.is-disabled {
    background-color: getVar("pagination-disabled-background-color");
    border-color: getVar("pagination-disabled-border-color");
    box-shadow: none;
    color: getVar("pagination-disabled-color");
    opacity: 0.5;
  }
}

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

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

.#{$class-prefix}pagination-ellipsis {
  color: getVar("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;
      }
    }
  }
}