UNPKG

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