blob: 461b8547a05ec38c38364a2104c80d46923e5ccf [file] [log] [blame]
Michael Davis6af13462017-04-04 14:07:02 -05001.pagination,
2.pagination li a {
3 display: -webkit-box;
4 display: -ms-flexbox;
5 display: flex;
6 -ms-flex-wrap: wrap;
7 flex-wrap: wrap;
8 -webkit-box-pack: center;
9 -ms-flex-pack: center;
10 justify-content: center;
11 -webkit-box-align: center;
12 -ms-flex-align: center;
13 align-items: center;
Iftekharul Islamcd789502017-04-19 14:37:55 -050014 padding: 0 10px;
Michael Davis6af13462017-04-04 14:07:02 -050015}
16
17.pagination li { background-color: transparent; list-style-type: none; }
18
19.pagination a {
20 font-weight: 300;
21 padding-top: 1px;
22 text-decoration:none;
23 border: 1px solid $medgrey;
24 border-left-width: 0;
25 min-width:44px;
26 min-height:44px;
27 color: $darkbg__primary;
28}
29
30.pagination li:not([class*="current"]) a:hover {
31 background-color: $primebtn__bg;
32 color: $white;
33}
34
35.pagination li:not([class*="current"]) a:focus,
36.pagination li:not([class*="current"]) a:active {;
37 //box-shadow: 0px 0px 10px 1px rgba(0,0,0,.25);
38 border-left-width:1px;
39}
40
41.pagination li:first-of-type a {
42 border-left-width: 1px;
43}
44
45.pagination li:first-of-type span,
46.pagination li:last-of-type span,
47.pagination li:nth-of-type(2) span,
48.pagination li:nth-last-of-type(2) span {
49 /* screen readers only */
50 position: absolute;
51 top: -9999px;
52 left: -9999px;
53}
54
55.pagination li:first-child a::before,
56.pagination li:last-child a::after,
57.pagination li:nth-of-type(2) a::before,
58.pagination li:nth-last-of-type(2) a::after {
59 display: inline-block;
60 text-rendering: auto;
61 font-size: 1.3em;
62 -webkit-font-smoothing: antialiased;
63 -moz-osx-font-smoothing: grayscale;
64 -webkit-transform: translate(0, 0);
65 transform: translate(0, 0);
66}
67
68.pagination li:first-child a::before,
Iftekharul Islamcd789502017-04-19 14:37:55 -050069
Michael Davis6af13462017-04-04 14:07:02 -050070
71.pagination li:nth-of-type(2) a::before,
Iftekharul Islamcd789502017-04-19 14:37:55 -050072
Michael Davis6af13462017-04-04 14:07:02 -050073
74.pagination li:first-child a::before,
75.pagination li:nth-of-type(2) a::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
76
Iftekharul Islamcd789502017-04-19 14:37:55 -050077.pagination li.current a, .pagination li.active a {
Michael Davis6af13462017-04-04 14:07:02 -050078 padding-top:.25em;
79 color: $white;
80 background-color: $lightbg__primary;
81 cursor: default;
82 pointer-events: none;
83 font-weight: 700;
84}
85
86@media only screen and ( max-width: 64.063em ) {
87 .pagination li:first-child,
88 .pagination li:last-child {
89 /* screen readers only */
90 position: absolute;
91 top: -9999px;
92 left: -9999px;
93 }
94
95 .pagination li:nth-of-type(2) a { border-left-width: 1px; }
96
97}
98
99@media only screen and ( max-width: 40.063em ) {
100 .pagination li {
101 /* screen readers only */
102 position: absolute;
103 top: -9999px;
104 left: -9999px;
105 }
106
107 .pagination li.current,
108 .pagination li:first-of-type,
109 .pagination li:last-of-type,
110 .pagination li:nth-of-type(2),
111 .pagination li:nth-last-of-type(2){
112 position: initial;
113 top: initial;
114 left: initial;
115 }
116
117 .pagination li:nth-of-type(2) a { border-left-width: 0; }
118
119}
120
121@media only screen and ( max-width: 30.063em ) {
122
123 h1 { font-size: 1.35em !important; }
124
125 .pagination li:first-child,
126 .pagination li:last-child {
127 /* screen readers only */
128 position: absolute;
129 top: -9999px;
130 left: -9999px;
131 }
132
133 .pagination li:nth-of-type(2) a { border-left-width: 1px; }
134
135}
136
137@media only screen and ( max-width: 15.063em ) { /* For watches? */
138
139 .pagination li { width: 50%;}
140
141 .pagination li.current {
142 -webkit-box-ordinal-group: 3;
143 -ms-flex-order: 2;
144 order: 2;
145 width: 100%;
146 border-left-width: 1px;
147
148 }
149
150}