portal-FE-common/src/styles/bootstrap/_pagination.scss

   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   background-color: $pagination-bg;
  15   border: $pagination-border-width solid $pagination-border-color;
  16
  17   @include hover-focus {
  18     color: $pagination-hover-color;
  19     text-decoration: none;
  20     background-color: $pagination-hover-bg;
  21     border-color: $pagination-hover-border-color;
  22   }
  23
  24
  25   // Opinionated: add "hand" cursor to non-disabled .page-link elements
  26   &:not([disabled]):not(.disabled) {
  27     cursor: pointer;
  28   }
  29 }
  30
  31 .page-item {
  32   &:first-child {
  33     .page-link {
  34       margin-left: 0;
  35       @include border-left-radius($border-radius);
  36     }
  37   }
  38   &:last-child {
  39     .page-link {
  40       @include border-right-radius($border-radius);
  41     }
  42   }
  43
  44   &.active .page-link {
  45     z-index: 1;
  46     color: $pagination-active-color;
  47     background-color: $pagination-active-bg;
  48     border-color: $pagination-active-border-color;
  49   }
  50
  51   &.disabled .page-link {
  52     color: $pagination-disabled-color;
  53     pointer-events: none;
  54     // Opinionated: remove the "hand" cursor set previously for .page-link
  55     cursor: auto;
  56     background-color: $pagination-disabled-bg;
  57     border-color: $pagination-disabled-border-color;
  58   }
  59 }
  60
  61
  62 //
  63 // Sizing
  64 //
  65
  66 .pagination-lg {
  67   @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
  68 }
  69
  70 .pagination-sm {
  71   @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
  72 }