zui/src/less/components/pager.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// Bootstrap: pager.less
/// https://github.com/twbs/bootstrap/blob/master/less/pager.less
/// https://github.com/twbs/bootstrap/blob/master/less/pagination.less
///
/// ZUI: The file has been changed in ZUI. It will not keep update with the
/// Bootsrap version in the future.
/// http://openzui.com
/// ========================================================================
/// Bootrap: Copyright 2011-2016 Twitter, Inc. Licensed under MIT
/// ========================================================================


// Base style

.pager {
  display: inline-block;
  padding-left: 0;
  margin: @line-height-computed 0;
  list-style: none;

  > li {
    display: inline; // Remove list-style and block-level defaults
    > a,
    > span {
      position: relative;
      float: left; // Collapse white-space
      padding: @padding-base-vertical @padding-base-horizontal;
      line-height: @line-height-base;
      text-decoration: none;
      background-color: @pager-bg;
      border: 1px solid @pager-border;
      margin-left: -1px;
    }
    &:first-child {
      > a,
      > span {
        margin-left: 0;
        .border-left-radius(@border-radius-base);
      }
    }
    &:last-child {
      > a,
      > span {
        .border-right-radius(@border-radius-base);
      }
    }
  }

  > li > a,
  > li > span {
    &:hover,
    &:focus {
      z-index: 2;
      background-color: @pager-hover-bg;
    }
  }

  > li.active > a,
  > li.active > span {
    &,
    &:hover {
      z-index: 3;
      color: @pager-active-color;
      background-color: @pager-active-bg;
      border-color: @pager-active-bg;
      cursor: default;
    }
  }

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


// Justified pager

.pager-justify {
  display: block;

  &:extend(.clearfix all);

  .next {
    > a,
    > span {
      float: right;
      border-radius: @border-radius-base;
    }
  }

  .previous {
    > a,
    > span {
      float: left;
      border-radius: @border-radius-base;
    }
  }
}


// Pager.js

.pager-goto {
  width: 100px;
  text-align: center;
}
.pager > li {
  > div {
    float: left;
  }

  .pager-goto,
  .pager-size-menu,
  &.space {
    margin: 0 5px;
  }
}

.pager-label {
  position: relative;
  float: left; // Collapse white-space
  padding: @padding-base-vertical (@padding-small-horizontal)/2;
  line-height: @line-height-base;
  text-decoration: none;
  border: 1px solid transparent;
  margin-left: -1px;
}

.pager-item-left > a {
  .border-left-radius(@border-radius-base);
}
.pager-item-right > a {
  .border-right-radius(@border-radius-base);
}