csit.infra.dash/app/pal/static/sass/bootstrap/_pagination.scss

   1 .pagination {
   2   // scss-docs-start pagination-css-vars
   3   --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
   4   --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
   5   @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
   6   --#{$prefix}pagination-color: #{$pagination-color};
   7   --#{$prefix}pagination-bg: #{$pagination-bg};
   8   --#{$prefix}pagination-border-width: #{$pagination-border-width};
   9   --#{$prefix}pagination-border-color: #{$pagination-border-color};
  10   --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
  11   --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
  12   --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
  13   --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
  14   --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
  15   --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
  16   --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
  17   --#{$prefix}pagination-active-color: #{$pagination-active-color};
  18   --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
  19   --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
  20   --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
  21   --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
  22   --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
  23   // scss-docs-end pagination-css-vars
  24
  25   display: flex;
  26   @include list-unstyled();
  27 }
  28
  29 .page-link {
  30   position: relative;
  31   display: block;
  32   padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
  33   @include font-size(var(--#{$prefix}pagination-font-size));
  34   color: var(--#{$prefix}pagination-color);
  35   text-decoration: if($link-decoration == none, null, none);
  36   background-color: var(--#{$prefix}pagination-bg);
  37   border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
  38   @include transition($pagination-transition);
  39
  40   &:hover {
  41     z-index: 2;
  42     color: var(--#{$prefix}pagination-hover-color);
  43     text-decoration: if($link-hover-decoration == underline, none, null);
  44     background-color: var(--#{$prefix}pagination-hover-bg);
  45     border-color: var(--#{$prefix}pagination-hover-border-color);
  46   }
  47
  48   &:focus {
  49     z-index: 3;
  50     color: var(--#{$prefix}pagination-focus-color);
  51     background-color: var(--#{$prefix}pagination-focus-bg);
  52     outline: $pagination-focus-outline;
  53     box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
  54   }
  55
  56   &.active,
  57   .active > & {
  58     z-index: 3;
  59     color: var(--#{$prefix}pagination-active-color);
  60     @include gradient-bg(var(--#{$prefix}pagination-active-bg));
  61     border-color: var(--#{$prefix}pagination-active-border-color);
  62   }
  63
  64   &.disabled,
  65   .disabled > & {
  66     color: var(--#{$prefix}pagination-disabled-color);
  67     pointer-events: none;
  68     background-color: var(--#{$prefix}pagination-disabled-bg);
  69     border-color: var(--#{$prefix}pagination-disabled-border-color);
  70   }
  71 }
  72
  73 .page-item {
  74   &:not(:first-child) .page-link {
  75     margin-left: $pagination-margin-start;
  76   }
  77
  78   @if $pagination-margin-start == ($pagination-border-width * -1) {
  79     &:first-child {
  80       .page-link {
  81         @include border-start-radius(var(--#{$prefix}pagination-border-radius));
  82       }
  83     }
  84
  85     &:last-child {
  86       .page-link {
  87         @include border-end-radius(var(--#{$prefix}pagination-border-radius));
  88       }
  89     }
  90   } @else {
  91     // Add border-radius to all pageLinks in case they have left margin
  92     .page-link {
  93       @include border-radius(var(--#{$prefix}pagination-border-radius));
  94     }
  95   }
  96 }
  97
  98
  99 //
 100 // Sizing
 101 //
 102
 103 .pagination-lg {
 104   @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
 105 }
 106
 107 .pagination-sm {
 108   @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
 109 }