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 { |
36 | background-color: _palette(fg-bold); |
37 | color: _palette(bg); |
38 | |
39 | &:hover { |
40 | background-color: _palette(highlight); |
41 | color: _palette(bg) !important; |
42 | } |
43 | |
44 | &:active { |
45 | background-color: desaturate(darken(_palette(highlight), 15), 5); |
46 | } |
47 | } |
48 | } |
49 | |
50 | &:first-child { |
51 | padding-right: 0.75em; |
52 | } |
53 | |
54 | &:last-child { |
55 | padding-left: 0.75em; |
56 | } |
57 | } |
58 | |
59 | @include breakpoint('<=xsmall') { |
60 | li { |
61 | &:nth-child(n+2):nth-last-child(n+2) { |
62 | display: none; |
63 | } |
64 | |
65 | &:first-child { |
66 | padding-right: 0; |
67 | } |
68 | } |
69 | } |
c2ea6701 |
70 | } |
71 | |
72 | |
73 | ul.prev-next { |
74 | cursor: default; |
75 | list-style: none; |
76 | padding-left: 0; |
77 | |
78 | li { |
79 | display: inline-block; |
80 | padding-left: 0; |
81 | vertical-align: middle; |
82 | |
83 | &:first-child { |
84 | padding-right: 0.75em; |
85 | } |
86 | |
87 | &:last-child { |
88 | padding-left: 0.75em; |
89 | } |
90 | } |
91 | |
92 | @include breakpoint('<=xsmall') { |
93 | li { |
94 | &:nth-child(n+2):nth-last-child(n+2) { |
95 | display: none; |
96 | } |
97 | |
98 | &:first-child { |
99 | padding-right: 0; |
100 | } |
101 | } |
102 | } |
103 | } |