]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | .pagination { |
2 | display: flex; | |
3 | // 1-2: Disable browser default list styles | |
4 | padding-left: 0; // 1 | |
5 | list-style: none; // 2 | |
6 | @include border-radius(); | |
7 | } | |
8 | ||
9 | .page-item { | |
10 | &:first-child { | |
11 | .page-link { | |
12 | margin-left: 0; | |
13 | @include border-left-radius($border-radius); | |
14 | } | |
15 | } | |
16 | &:last-child { | |
17 | .page-link { | |
18 | @include border-right-radius($border-radius); | |
19 | } | |
20 | } | |
21 | ||
22 | &.active .page-link { | |
23 | z-index: 2; | |
24 | color: $pagination-active-color; | |
25 | background-color: $pagination-active-bg; | |
26 | border-color: $pagination-active-border; | |
27 | } | |
28 | ||
29 | &.disabled .page-link { | |
30 | color: $pagination-disabled-color; | |
31 | pointer-events: none; | |
32 | cursor: $cursor-disabled; // While `pointer-events: none` removes the cursor in modern browsers, we provide a disabled cursor as a fallback. | |
33 | background-color: $pagination-disabled-bg; | |
34 | border-color: $pagination-disabled-border; | |
35 | } | |
36 | } | |
37 | ||
38 | .page-link { | |
39 | position: relative; | |
40 | display: block; | |
41 | padding: $pagination-padding-y $pagination-padding-x; | |
42 | margin-left: -1px; | |
43 | line-height: $pagination-line-height; | |
44 | color: $pagination-color; | |
45 | background-color: $pagination-bg; | |
46 | border: $pagination-border-width solid $pagination-border-color; | |
47 | ||
48 | @include hover-focus { | |
49 | color: $pagination-hover-color; | |
50 | text-decoration: none; | |
51 | background-color: $pagination-hover-bg; | |
52 | border-color: $pagination-hover-border; | |
53 | } | |
54 | } | |
55 | ||
56 | ||
57 | // | |
58 | // Sizing | |
59 | // | |
60 | ||
61 | .pagination-lg { | |
62 | @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg); | |
63 | } | |
64 | ||
65 | .pagination-sm { | |
66 | @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm); | |
67 | } |