[Summary view] [Print] [Text view]

   1  .pagination {
   2    display: flex;
   3    @include list-unstyled();
   4    @include border-radius();
   5  }
   6  
   7  .page-link {
   8    position: relative;
   9    display: block;
  10    padding: $pagination-padding-y $pagination-padding-x;
  11    margin-left: -$pagination-border-width;
  12    line-height: $pagination-line-height;
  13    color: $pagination-color;
  14    text-decoration: if($link-decoration == none, null, none);
  15    background-color: $pagination-bg;
  16    border: $pagination-border-width solid $pagination-border-color;
  17  
  18    &:hover {
  19      z-index: 2;
  20      color: $pagination-hover-color;
  21      text-decoration: none;
  22      background-color: $pagination-hover-bg;
  23      border-color: $pagination-hover-border-color;
  24    }
  25  
  26    &:focus {
  27      z-index: 3;
  28      outline: $pagination-focus-outline;
  29      box-shadow: $pagination-focus-box-shadow;
  30    }
  31  }
  32  
  33  .page-item {
  34    &:first-child {
  35      .page-link {
  36        margin-left: 0;
  37        @include border-left-radius($border-radius);
  38      }
  39    }
  40    &:last-child {
  41      .page-link {
  42        @include border-right-radius($border-radius);
  43      }
  44    }
  45  
  46    &.active .page-link {
  47      z-index: 3;
  48      color: $pagination-active-color;
  49      background-color: $pagination-active-bg;
  50      border-color: $pagination-active-border-color;
  51    }
  52  
  53    &.disabled .page-link {
  54      color: $pagination-disabled-color;
  55      pointer-events: none;
  56      // Opinionated: remove the "hand" cursor set previously for .page-link
  57      cursor: auto;
  58      background-color: $pagination-disabled-bg;
  59      border-color: $pagination-disabled-border-color;
  60    }
  61  }
  62  
  63  
  64  //
  65  // Sizing
  66  //
  67  
  68  .pagination-lg {
  69    @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
  70  }
  71  
  72  .pagination-sm {
  73    @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
  74  }