formstone/src/less/themes/light/pagination.less

Library of modular front end components.

/**
 * @theme
 * @name Light
 * @component Pagination
 */

.fs-pagination {

  @import "_config.less";

  @theme_name: fs-light;

  // Config

  @fs-pagination-height: 40px;

  @fs-pagination-background-color: @fs-light-white;

  @fs-pagination-border-width: 1px;
  @fs-pagination-border-color: @fs-light-primary_600;
  @fs-pagination-border-radius: 2px;

  @fs-pagination-font-size: 14px;
  @fs-pagination-text-color: @fs-light-primary_600;

  @fs-pagination-margin: 0 0 10px 0;

  @fs-pagination-page-padding: 0 7px;
  @fs-pagination-page-margin: 5px;

  // Controls

  @fs-pagination-control-caret-color: @fs-light-primary_900;
  @fs-pagination-control-caret-size: 7px;

  @fs-pagination-control-caret-width: (@fs-pagination-control-caret-size * 1.5);
  @fs-pagination-control-caret-margin: (@fs-pagination-height - (@fs-pagination-control-caret-size * 2.2)) / 2;

  @fs-pagination-control-border-width: 2px;
  @fs-pagination-control-border-radius: 4px;

  // Hover

  @fs-pagination-hover-background: @fs-light-primary_100;
  @fs-pagination-hover-text-color: @fs-light-primary_900;

  @fs-pagination-control-hover-background: @fs-light-primary_100;

  // Active

  @fs-pagination-active-background: @fs-light-primary_100;
  @fs-pagination-active-text-color: @fs-light-primary_900;


  &.@{theme_name} {
    position: relative;

    background: @fs-pagination-background-color;
    border: @fs-pagination-border-width solid @fs-pagination-border-color;
    border-radius: @fs-pagination-border-radius;
    display: flex;
    flex-wrap: nowrap;
    margin: @fs-pagination-margin;

    .no-touchevents &:hover {
      // border-color: @fs-pagination-hover-border-color;
    }
  }

  &.@{theme_name} &-pages {
    flex-grow: 1;
    text-align: center;
  }

  &.@{theme_name} &-page,
  &.@{theme_name} &-ellipsis,
  &.@{theme_name} &-control,
  &-mobile.@{theme_name} &-position {
    color: @fs-pagination-text-color;
    font-size: @fs-pagination-font-size;
    text-decoration: none;
  }

  &.@{theme_name} &-page,
  &.@{theme_name} &-ellipsis {
    height: @fs-pagination-height - (@fs-pagination-page-margin * 2);

    line-height: @fs-pagination-height - (@fs-pagination-page-margin * 2);
    margin: @fs-pagination-page-margin 0;
    padding: @fs-pagination-page-padding;
  }

  &.@{theme_name} &-control,
  &-mobile.@{theme_name} &-position {
    height: @fs-pagination-height;

    line-height: @fs-pagination-height;
  }

  &.@{theme_name} &-page {
    border-radius: @fs-pagination-border-radius;
  }

  .no-touchevents .@{theme_name} &-page:hover,
  .no-touchevents .@{theme_name} &-page:focus {
    background: @fs-pagination-hover-background;
    color: @fs-pagination-hover-text-color;
  }

  &.@{theme_name} &-active,
  &.@{theme_name} &-first,
  &.@{theme_name} &-last,
  &.@{theme_name} &-visible {

  }

  &.@{theme_name} &-active {
    color: @fs-pagination-active-text-color;
    background: @fs-pagination-active-background;
  }

  &.@{theme_name} &-control {
    width: @fs-pagination-height;

    position: relative;

    background: @fs-pagination-background-color;
    border: @fs-pagination-control-border-width solid @fs-pagination-background-color;
    border-radius: @fs-pagination-control-border-radius;
    display: block;
    opacity: 0;
    overflow: hidden;
    text-indent: 200%;
    visibility: hidden;
    white-space: nowrap;

    &:before {
      height: 0px;
      width: 0px;

      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      margin: auto;
      content: '';
    }

    &_previous {
      order: -1;

      &:before {
        border-top: @fs-pagination-control-caret-size solid transparent;
        border-bottom: @fs-pagination-control-caret-size solid transparent;
        border-right: @fs-pagination-control-caret-width solid @fs-pagination-control-caret-color;
        border-left: none;
        margin-left: @fs-pagination-control-caret-margin;
        margin-right: auto;
      }
    }

    &_next {
      order: 1;

      &:before {
        border-top: @fs-pagination-control-caret-size solid transparent;
        border-bottom: @fs-pagination-control-caret-size solid transparent;
        border-left: @fs-pagination-control-caret-width solid @fs-pagination-control-caret-color;
        border-right: none;
        margin-right: @fs-pagination-control-caret-margin;
        margin-left: auto;
      }
    }

    &:focus,
    .no-touchevents &:hover {
      background: @fs-pagination-control-hover-background;
    }
  }

  &.@{theme_name} &-control&-visible {
    opacity: 1;
    visibility: visible;;
  }

  &.@{theme_name} &-position,
  &.@{theme_name} &-select {
  }

  &-mobile.@{theme_name} &-pages {
  }

  &-mobile.@{theme_name} &-position {
    position: relative;

    flex-grow: 1;
    text-align: center;
  }

  &-mobile.@{theme_name} &-select {
  }

  &-mobile.@{theme_name} &-current,
  &-mobile.@{theme_name} &-total {
    color: @fs-pagination-active-text-color;
  }

}