git.roojs.org Git - roojs1/blob - scss/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   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 }