UNPKG

1.8 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 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}