[Summary view] [Print] [Text view]

   1  //
   2  // Pagination (multiple pages)
   3  // --------------------------------------------------
   4  
   5  // Space out pagination from surrounding content
   6  .pagination {
   7    margin: @baseLineHeight 0;
   8  }
   9  
  10  .pagination ul {
  11    // Allow for text-based alignment
  12    display: inline-block;
  13    .ie7-inline-block();
  14    // Reset default ul styles
  15    margin-left: 0;
  16    margin-bottom: 0;
  17    // Visuals
  18    .border-radius(@baseBorderRadius);
  19    .box-shadow(0 1px 2px rgba(0,0,0,.05));
  20  }
  21  .pagination ul > li {
  22    display: inline; // Remove list-style and block-level defaults
  23  }
  24  .pagination ul > li > a,
  25  .pagination ul > li > span {
  26    float: left; // Collapse white-space
  27    padding: 4px 12px;
  28    line-height: @baseLineHeight;
  29    text-decoration: none;
  30    background-color: @paginationBackground;
  31    border: 1px solid @paginationBorder;
  32    border-left-width: 0;
  33  }
  34  .pagination ul > li > a:hover,
  35  .pagination ul > li > a:focus,
  36  .pagination ul > .active > a,
  37  .pagination ul > .active > span {
  38    background-color: @paginationActiveBackground;
  39  }
  40  .pagination ul > .active > a,
  41  .pagination ul > .active > span {
  42    color: @grayLight;
  43    cursor: default;
  44  }
  45  .pagination ul > .disabled > span,
  46  .pagination ul > .disabled > a,
  47  .pagination ul > .disabled > a:hover,
  48  .pagination ul > .disabled > a:focus {
  49    color: @grayLight;
  50    background-color: transparent;
  51    cursor: default;
  52  }
  53  .pagination ul > li:first-child > a,
  54  .pagination ul > li:first-child > span {
  55    border-left-width: 1px;
  56    .border-left-radius(@baseBorderRadius);
  57  }
  58  .pagination ul > li:last-child > a,
  59  .pagination ul > li:last-child > span {
  60    .border-right-radius(@baseBorderRadius);
  61  }
  62  
  63  
  64  // Alignment
  65  // --------------------------------------------------
  66  
  67  .pagination-centered {
  68    text-align: center;
  69  }
  70  .pagination-right {
  71    text-align: right;
  72  }
  73  
  74  
  75  // Sizing
  76  // --------------------------------------------------
  77  
  78  // Large
  79  .pagination-large {
  80    ul > li > a,
  81    ul > li > span {
  82      padding: @paddingLarge;
  83      font-size: @fontSizeLarge;
  84    }
  85    ul > li:first-child > a,
  86    ul > li:first-child > span {
  87      .border-left-radius(@borderRadiusLarge);
  88    }
  89    ul > li:last-child > a,
  90    ul > li:last-child > span {
  91      .border-right-radius(@borderRadiusLarge);
  92    }
  93  }
  94  
  95  // Small and mini
  96  .pagination-mini,
  97  .pagination-small {
  98    ul > li:first-child > a,
  99    ul > li:first-child > span {
 100      .border-left-radius(@borderRadiusSmall);
 101    }
 102    ul > li:last-child > a,
 103    ul > li:last-child > span {
 104      .border-right-radius(@borderRadiusSmall);
 105    }
 106  }
 107  
 108  // Small
 109  .pagination-small {
 110    ul > li > a,
 111    ul > li > span {
 112      padding: @paddingSmall;
 113      font-size: @fontSizeSmall;
 114    }
 115  }
 116  // Mini
 117  .pagination-mini {
 118    ul > li > a,
 119    ul > li > span {
 120      padding: @paddingMini;
 121      font-size: @fontSizeMini;
 122    }
 123  }