amazeui/less/pagination.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:                      Pagination
//
// Description:               Defines style for navigation
//
// Component:                `.am-pagination`
//
// Sub-objects:              `.am-pagination-prev`
//                           `.am-pagination-next`
//
// Modifiers:                `.am-pagination-centered`
//                           `.am-pagination-right`
//
// States:                   `.am-active`
//                           `.am-disabled`
//
// =============================================================================


/* ==========================================================================
   Component: Pagination
 ============================================================================ */

.@{ns}pagination {
  padding-left: 0;
  margin: @pagination-margin 0;
  list-style: none;
  color: @pagination-color;
  text-align: left;
  .clearfix();
  .hook-pagination;

  > li {
    display: inline-block;
    .hook-pagination-item;

    > a,
    > span {
      position: relative;
      // float: left; // Collapse white-space
      display: block;
      padding: @pagination-padding;
      text-decoration: none;
      line-height: @pagination-line-height;
      background-color: @pagination-bg;
      border: 1px solid @pagination-border;
      border-radius: @global-radius;
      margin-bottom: 5px;
      margin-right: 5px;
    }

    &:last-child {
      > a,
      > span {
        margin-right: 0;
      }
    }
  }

  > li > a,
  > li > span {
    &:hover,
    &:focus {
      background-color: @pagination-hover-bg;
    }
  }

  > .@{ns}active > a,
  > .@{ns}active > span {
    &,
    &:hover,
    &:focus {
      z-index: 2;
      color: @pagination-active-color;
      background-color: @pagination-active-bg;
      border-color: @pagination-active-bg;
      cursor: default;
    }
    .hook-pagination-item-active;
  }

  > .@{ns}disabled {
    > span,
    > span:hover,
    > span:focus,
    > a,
    > a:hover,
    > a:focus {
      color: @pagination-disabled-color;
      background-color: @pagination-bg;
      border-color: @pagination-border;
      cursor: not-allowed;
      pointer-events: none;
      .hook-pagination-item-disabled;
    }
  }

  .@{ns}pagination-prev {
    float: left;
    a {
      border-radius: @global-radius;
    }
  }

  .@{ns}pagination-next {
    float: right;
    a {
      border-radius: @global-radius;
    }
  }
}


// Modifier
// =============================================================================

.@{ns}pagination-centered {
  text-align: center;
}

.@{ns}pagination-right {
  text-align: right;
}


// Hooks
// =============================================================================

.hook-pagination() {}
.hook-pagination-item() {}
.hook-pagination-item-active() {}
.hook-pagination-item-disabled() {}