748286b5 |
1 | /// |
2 | /// Forty by HTML5 UP |
3 | /// html5up.net | @ajlkn |
4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
5 | /// |
6 | |
7 | /* Pagination */ |
8 | |
9 | ul.pagination { |
10 | cursor: default; |
11 | list-style: none; |
12 | padding-left: 0; |
13 | |
14 | li { |
15 | display: inline-block; |
16 | padding-left: 0; |
17 | vertical-align: middle; |
18 | |
19 | > .page { |
20 | @include vendor('transition', ( |
21 | 'background-color #{_duration(transition)} ease-in-out', |
22 | 'color #{_duration(transition)} ease-in-out' |
23 | )); |
24 | border-bottom: 0; |
25 | display: inline-block; |
26 | font-size: 0.8em; |
27 | font-weight: _font(weight-bold); |
28 | height: 1.5em; |
29 | line-height: 1.5em; |
30 | margin: 0 0.125em; |
31 | min-width: 1.5em; |
32 | padding: 0 0.5em; |
33 | text-align: center; |
34 | |
35 | &.active { |
cb4379e1 |
36 | background-color: _palette_light(fg-bold); |
37 | color: _palette_light(bg); |
38 | @media screen and (prefers-color-scheme: dark) { |
39 | background-color: _palette_dark(fg-bold); |
40 | color: _palette_dark(bg); |
41 | } |
748286b5 |
42 | |
43 | &:hover { |
cb4379e1 |
44 | background-color: _palette_light(highlight); |
45 | color: _palette_light(bg) !important; |
46 | @media screen and (prefers-color-scheme: dark) { |
47 | background-color: _palette_dark(highlight); |
48 | color: _palette_dark(bg) !important; |
49 | } |
748286b5 |
50 | } |
51 | |
52 | &:active { |
cb4379e1 |
53 | background-color: desaturate(darken(_palette_light(highlight), 15), 5); |
54 | @media screen and (prefers-color-scheme: dark) { |
55 | background-color: desaturate(darken(_palette_dark(highlight), 15), 5); |
56 | } |
748286b5 |
57 | } |
58 | } |
59 | } |
60 | |
61 | &:first-child { |
62 | padding-right: 0.75em; |
63 | } |
64 | |
65 | &:last-child { |
66 | padding-left: 0.75em; |
67 | } |
68 | } |
69 | |
70 | @include breakpoint('<=xsmall') { |
71 | li { |
72 | &:nth-child(n+2):nth-last-child(n+2) { |
73 | display: none; |
74 | } |
75 | |
76 | &:first-child { |
77 | padding-right: 0; |
78 | } |
79 | } |
80 | } |
c2ea6701 |
81 | } |
82 | |
83 | |
84 | ul.prev-next { |
85 | cursor: default; |
86 | list-style: none; |
87 | padding-left: 0; |
88 | |
89 | li { |
90 | display: inline-block; |
91 | padding-left: 0; |
92 | vertical-align: middle; |
93 | |
94 | &:first-child { |
95 | padding-right: 0.75em; |
96 | } |
97 | |
98 | &:last-child { |
99 | padding-left: 0.75em; |
100 | } |
101 | } |
102 | |
103 | @include breakpoint('<=xsmall') { |
104 | li { |
105 | &:nth-child(n+2):nth-last-child(n+2) { |
106 | display: none; |
107 | } |
108 | |
109 | &:first-child { |
110 | padding-right: 0; |
111 | } |
112 | } |
113 | } |
114 | } |