talos

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, $pagination-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, $pagination-border-radius-sm);
74
}
75