Pagination | CodyHouse

├── partials ├── _variables.scss └── _layout.scss ├── README.md ├── img ├── cd-icon-arrow-2.svg └── cd-icon-arrow-1.svg ├── css ├── reset.css └── style.css ├── index.html ├── scss └── style.scss └── js └── modernizr.js /partials/_variables.scss: -------------------------------------------------------------------------------- 1 | // colors 2 | 3 | $color-1: #2E4057; // Pickled Bluewood 4 | $color-2: #64a281; // Aqua Forest 5 | $color-3: #ffffff; // White 6 | 7 | // fonts 8 | 9 | $primary-font: 'PT Sans', sans-serif; 10 | 11 | // border-radius 12 | 13 | $border-radius: .25em; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Pagination 2 | ========= 3 | 4 | A mobile-friendly pagination component, that can be easily customized using CSS or Sass. 5 | 6 | [Article on CodyHouse](http://codyhouse.co/gem/css-pagination/) 7 | 8 | [Demo](http://codyhouse.co/demo/pagination/index.html) 9 | 10 | [Terms](http://codyhouse.co/terms/) 11 | -------------------------------------------------------------------------------- /partials/_layout.scss: -------------------------------------------------------------------------------- 1 | // breakpoints 2 | 3 | $S: 480px; 4 | $M: 768px; 5 | $L: 1170px; 6 | 7 | // media queries 8 | 9 | @mixin MQ($canvas) { 10 | @if $canvas == S { 11 | @media only screen and (min-width: $S) { @content; } 12 | } 13 | @else if $canvas == M { 14 | @media only screen and (min-width: $M) { @content; } 15 | } 16 | @else if $canvas == L { 17 | @media only screen and (min-width: $L) { @content; } 18 | } 19 | } 20 | 21 | -------------------------------------------------------------------------------- /img/cd-icon-arrow-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | -------------------------------------------------------------------------------- /img/cd-icon-arrow-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section, main { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Pagination | CodyHouse 14 | 15 | 16 |

17 |

- 1 -

18 | 19 | 31 |

32 | 33 |

34 |

- 2 -

35 | 36 | 48 |

49 | 50 |

51 |

- 3 -

52 | 53 | 65 |

66 | 67 |

68 |

- 4 -

69 | 70 | 82 |

83 | 84 |

85 |

- 5 -

86 | 87 | 99 |

100 | 101 |

102 |

- 6 -

103 | 104 | 116 |

117 | 118 |

119 |

- 7 -

120 | 121 | 127 |

128 | 129 |

130 |

- 8 -

131 | 132 | 138 |

139 | 140 |

141 |

- 9 -

142 | 143 | 149 |

150 | 151 |

152 |

- 10 -

153 | 154 | 166 |

167 | 168 |

169 |

- 11 -

170 | 171 | 183 |

184 | 185 | -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | @import 'bourbon'; // http://bourbon.io/ 2 | 3 | @import '../partials/variables'; // colors, fonts etc... 4 | 5 | @import '../partials/layout'; // responsive grid and media queries 6 | 7 | *, *::after, *::before { 8 | @include box-sizing(border-box); 9 | } 10 | 11 | html { 12 | font-size: 62.5%; 13 | } 14 | 15 | html * { 16 | -webkit-font-smoothing: antialiased; 17 | -moz-osx-font-smoothing: grayscale; 18 | } 19 | 20 | body { 21 | font: { 22 | size: 1.6rem; 23 | family: $primary-font; // variables inside partials > _variables.scss 24 | } 25 | color: $color-1; 26 | background-color: $color-3; 27 | } 28 | 29 | a { 30 | color: $color-1; 31 | text-decoration: none; 32 | } 33 | 34 | section { 35 | /* used just to separate paginations */ 36 | border-bottom: 1px solid darken($color-3, 10%); 37 | 38 | h2 { 39 | width: 90%; 40 | margin: 2em auto 0; 41 | color: lighten($color-1, 35%); 42 | font-weight: 700; 43 | text-align: center; 44 | } 45 | 46 | @include MQ(L) { 47 | h2 { 48 | margin: 4em auto 0; 49 | } 50 | } 51 | } 52 | 53 | /* -------------------------------- 54 | 55 | Basic style 56 | 57 | -------------------------------- */ 58 | 59 | nav[role="navigation"] { 60 | text-align: center; 61 | } 62 | 63 | .cd-pagination { 64 | width: 90%; 65 | max-width: $M; 66 | margin: 2em auto 4em; 67 | text-align: center; 68 | 69 | li { 70 | /* hide numbers on small devices */ 71 | display: none; 72 | margin: 0 .2em; 73 | 74 | &.button { 75 | /* make sure prev next buttons are visible */ 76 | display: inline-block; 77 | } 78 | } 79 | 80 | a, span { 81 | display: inline-block; 82 | @include user-select(none); 83 | /* use padding and font-size to change buttons size */ 84 | padding: .6em .8em; 85 | font-size: 1.6rem; 86 | } 87 | 88 | a { 89 | border: 1px solid darken($color-3, 10%); 90 | border-radius: $border-radius; 91 | 92 | .no-touch &:hover { 93 | background-color: darken($color-3, 5%); 94 | } 95 | 96 | &:active { 97 | /* click effect */ 98 | @include transform(scale(.9)); 99 | } 100 | 101 | &.disabled { 102 | /* button disabled */ 103 | color: rgba($color-1, .4); 104 | pointer-events: none; 105 | 106 | &::before, &::after { 107 | opacity: .4; 108 | } 109 | } 110 | } 111 | 112 | .button:first-of-type a::before { 113 | content: '\00ab '; 114 | } 115 | 116 | .button:last-of-type a::after { 117 | content: ' \00bb'; 118 | } 119 | 120 | .current { 121 | /* selected number */ 122 | background-color: $color-2; 123 | border-color: $color-2; 124 | color: $color-3; 125 | pointer-events: none; 126 | } 127 | 128 | @include MQ(M) { 129 | li { 130 | display: inline-block; 131 | } 132 | } 133 | 134 | @include MQ(L) { 135 | margin: 4em auto 8em; 136 | } 137 | } 138 | 139 | /* -------------------------------- 140 | 141 | No space - remove distance between list items 142 | 143 | -------------------------------- */ 144 | 145 | .cd-pagination.no-space { 146 | width: auto; 147 | max-width: none; 148 | display: inline-block; 149 | border-radius: $border-radius; 150 | @include clearfix; 151 | border: 1px solid darken($color-3, 10%); 152 | 153 | li { 154 | margin: 0; 155 | float: left; 156 | border-right: 1px solid darken($color-3, 10%); 157 | 158 | &:last-of-type { 159 | border-right: none; 160 | } 161 | } 162 | 163 | a, span { 164 | float: left; 165 | border-radius: 0; 166 | padding: .8em 1em; 167 | border: none; 168 | } 169 | 170 | li:first-of-type a { 171 | border-radius: $border-radius 0 0 $border-radius; 172 | } 173 | 174 | li:last-of-type a { 175 | border-radius: 0 $border-radius $border-radius 0; 176 | 177 | } 178 | } 179 | 180 | /* -------------------------------- 181 | 182 | move buttons - move prev and next buttons to the sides 183 | 184 | -------------------------------- */ 185 | 186 | .cd-pagination.move-buttons { 187 | @include clearfix; 188 | 189 | .button:first-of-type { 190 | float: left; 191 | } 192 | 193 | .button:last-of-type { 194 | float: right; 195 | } 196 | } 197 | 198 | .cd-pagination.no-space.move-buttons { 199 | width: 90%; 200 | max-width: $M; 201 | display: block; 202 | overflow: hidden; 203 | 204 | li { 205 | float: none; 206 | border: none; 207 | } 208 | 209 | a, span { 210 | float: none; 211 | } 212 | } 213 | 214 | /* -------------------------------- 215 | 216 | custom icons - customize the small arrow inside the next and prev buttons 217 | 218 | -------------------------------- */ 219 | 220 | .cd-pagination.custom-icons { 221 | .button a { 222 | position: relative; 223 | } 224 | 225 | .button:first-of-type a { 226 | padding-left: 2.4em; 227 | } 228 | 229 | .button:last-of-type a { 230 | padding-right: 2.4em; 231 | } 232 | 233 | .button:first-of-type a::before, 234 | .button:last-of-type a::after { 235 | content: ''; 236 | position: absolute; 237 | display: inline-block; 238 | /* set size for custom icons */ 239 | width: 16px; 240 | height: 16px; 241 | top: 50%; 242 | /* set margin-top = icon height/2 */ 243 | margin-top: -8px; 244 | background: transparent url('../img/cd-icon-arrow-1.svg') no-repeat center center; 245 | } 246 | 247 | .button:first-of-type a::before { 248 | left: .8em; 249 | } 250 | 251 | .button:last-of-type a::after { 252 | right: .8em; 253 | @include transform(rotate(180deg)); 254 | } 255 | } 256 | 257 | /* -------------------------------- 258 | 259 | custom buttons - replace prev and next buttons text with a custom icon 260 | 261 | -------------------------------- */ 262 | 263 | .cd-pagination.custom-buttons { 264 | 265 | a, span { 266 | vertical-align: middle; 267 | } 268 | 269 | .button a { 270 | /* set custom width */ 271 | width: 40px; 272 | 273 | /* image replacement */ 274 | overflow: hidden; 275 | white-space: nowrap; 276 | text-indent: 100%; 277 | color: transparent; 278 | background-image: url('../img/cd-icon-arrow-2.svg'); 279 | background-repeat: no-repeat; 280 | background-position: center center; 281 | } 282 | 283 | .button:last-of-type a { 284 | @include transform(rotate(180deg)); 285 | 286 | .no-touch &:active { 287 | @include transform(scale(.9) rotate(180deg)); 288 | } 289 | } 290 | } 291 | 292 | .cd-pagination.no-space.custom-buttons { 293 | .button:last-of-type a { 294 | border-radius: $border-radius 0 0 $border-radius; 295 | } 296 | } 297 | 298 | /* -------------------------------- 299 | 300 | animated buttons - animate the text inside prev and next buttons 301 | 302 | -------------------------------- */ 303 | 304 | .cd-pagination.animated-buttons { 305 | a, span { 306 | padding: 0 1.4em; 307 | height: 50px; 308 | line-height: 50px; 309 | overflow: hidden; 310 | } 311 | 312 | .button a { 313 | position: relative; 314 | padding: 0 2em; 315 | } 316 | 317 | .button:first-of-type a::before, 318 | .button:last-of-type a::after { 319 | left: 50%; 320 | @include transform(translateX(-50%)); 321 | right: auto; 322 | @include transition(transform .3s); 323 | } 324 | 325 | .button:last-of-type a::after { 326 | @include transform(translateX(-50%) rotate(180deg)); 327 | } 328 | 329 | i { 330 | display: block; 331 | height: 100%; 332 | @include transform(translateY(100%)); 333 | @include transition(transform .3s); 334 | } 335 | } 336 | 337 | .no-touch .cd-pagination.animated-buttons .button a:hover i { 338 | @include transform(translateY(0)); 339 | } 340 | 341 | .no-touch .cd-pagination.animated-buttons .button:first-of-type a:hover::before { 342 | @include transform(translateX(-50%) translateY(-50px)); 343 | } 344 | 345 | .no-touch .cd-pagination.animated-buttons .button:last-of-type a:hover::after { 346 | @include transform(translateX(-50%) rotate(180deg) translateY(50px)); 347 | } 348 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | *, *::after, *::before { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-size: 62.5%; 9 | } 10 | 11 | html * { 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | body { 17 | font-size: 1.6rem; 18 | font-family: "PT Sans", sans-serif; 19 | color: #2E4057; 20 | background-color: #ffffff; 21 | } 22 | 23 | a { 24 | color: #2E4057; 25 | text-decoration: none; 26 | } 27 | 28 | section { 29 | /* used just to separate paginations */ 30 | border-bottom: 1px solid #e6e6e6; 31 | } 32 | section h2 { 33 | width: 90%; 34 | margin: 2em auto 0; 35 | color: #7d98ba; 36 | font-weight: 700; 37 | text-align: center; 38 | } 39 | @media only screen and (min-width: 1170px) { 40 | section h2 { 41 | margin: 4em auto 0; 42 | } 43 | } 44 | 45 | /* -------------------------------- 46 | 47 | Basic style 48 | 49 | -------------------------------- */ 50 | nav[role="navigation"] { 51 | text-align: center; 52 | } 53 | 54 | .cd-pagination { 55 | width: 90%; 56 | max-width: 768px; 57 | margin: 2em auto 4em; 58 | text-align: center; 59 | } 60 | .cd-pagination li { 61 | /* hide numbers on small devices */ 62 | display: none; 63 | margin: 0 .2em; 64 | } 65 | .cd-pagination li.button { 66 | /* make sure prev next buttons are visible */ 67 | display: inline-block; 68 | } 69 | .cd-pagination a, .cd-pagination span { 70 | display: inline-block; 71 | -webkit-user-select: none; 72 | -moz-user-select: none; 73 | -ms-user-select: none; 74 | user-select: none; 75 | /* use padding and font-size to change buttons size */ 76 | padding: .6em .8em; 77 | font-size: 1.6rem; 78 | } 79 | .cd-pagination a { 80 | border: 1px solid #e6e6e6; 81 | border-radius: 0.25em; 82 | } 83 | .no-touch .cd-pagination a:hover { 84 | background-color: #f2f2f2; 85 | } 86 | .cd-pagination a:active { 87 | /* click effect */ 88 | -webkit-transform: scale(0.9); 89 | -moz-transform: scale(0.9); 90 | -ms-transform: scale(0.9); 91 | -o-transform: scale(0.9); 92 | transform: scale(0.9); 93 | } 94 | .cd-pagination a.disabled { 95 | /* button disabled */ 96 | color: rgba(46, 64, 87, 0.4); 97 | pointer-events: none; 98 | } 99 | .cd-pagination a.disabled::before, .cd-pagination a.disabled::after { 100 | opacity: .4; 101 | } 102 | .cd-pagination .button:first-of-type a::before { 103 | content: '\00ab '; 104 | } 105 | .cd-pagination .button:last-of-type a::after { 106 | content: ' \00bb'; 107 | } 108 | .cd-pagination .current { 109 | /* selected number */ 110 | background-color: #64a281; 111 | border-color: #64a281; 112 | color: #ffffff; 113 | pointer-events: none; 114 | } 115 | @media only screen and (min-width: 768px) { 116 | .cd-pagination li { 117 | display: inline-block; 118 | } 119 | } 120 | @media only screen and (min-width: 1170px) { 121 | .cd-pagination { 122 | margin: 4em auto 8em; 123 | } 124 | } 125 | 126 | /* -------------------------------- 127 | 128 | No space - remove distance between list items 129 | 130 | -------------------------------- */ 131 | .cd-pagination.no-space { 132 | width: auto; 133 | max-width: none; 134 | display: inline-block; 135 | border-radius: 0.25em; 136 | border: 1px solid #e6e6e6; 137 | } 138 | .cd-pagination.no-space:after { 139 | content: ""; 140 | display: table; 141 | clear: both; 142 | } 143 | .cd-pagination.no-space li { 144 | margin: 0; 145 | float: left; 146 | border-right: 1px solid #e6e6e6; 147 | } 148 | .cd-pagination.no-space li:last-of-type { 149 | border-right: none; 150 | } 151 | .cd-pagination.no-space a, .cd-pagination.no-space span { 152 | float: left; 153 | border-radius: 0; 154 | padding: .8em 1em; 155 | border: none; 156 | } 157 | .cd-pagination.no-space li:first-of-type a { 158 | border-radius: 0.25em 0 0 0.25em; 159 | } 160 | .cd-pagination.no-space li:last-of-type a { 161 | border-radius: 0 0.25em 0.25em 0; 162 | } 163 | 164 | /* -------------------------------- 165 | 166 | move buttons - move prev and next buttons to the sides 167 | 168 | -------------------------------- */ 169 | .cd-pagination.move-buttons:after { 170 | content: ""; 171 | display: table; 172 | clear: both; 173 | } 174 | .cd-pagination.move-buttons .button:first-of-type { 175 | float: left; 176 | } 177 | .cd-pagination.move-buttons .button:last-of-type { 178 | float: right; 179 | } 180 | 181 | .cd-pagination.no-space.move-buttons { 182 | width: 90%; 183 | max-width: 768px; 184 | display: block; 185 | overflow: hidden; 186 | } 187 | .cd-pagination.no-space.move-buttons li { 188 | float: none; 189 | border: none; 190 | } 191 | .cd-pagination.no-space.move-buttons a, .cd-pagination.no-space.move-buttons span { 192 | float: none; 193 | } 194 | 195 | /* -------------------------------- 196 | 197 | custom icons - customize the small arrow inside the next and prev buttons 198 | 199 | -------------------------------- */ 200 | .cd-pagination.custom-icons .button a { 201 | position: relative; 202 | } 203 | .cd-pagination.custom-icons .button:first-of-type a { 204 | padding-left: 2.4em; 205 | } 206 | .cd-pagination.custom-icons .button:last-of-type a { 207 | padding-right: 2.4em; 208 | } 209 | .cd-pagination.custom-icons .button:first-of-type a::before, 210 | .cd-pagination.custom-icons .button:last-of-type a::after { 211 | content: ''; 212 | position: absolute; 213 | display: inline-block; 214 | /* set size for custom icons */ 215 | width: 16px; 216 | height: 16px; 217 | top: 50%; 218 | /* set margin-top = icon height/2 */ 219 | margin-top: -8px; 220 | background: transparent url("../img/cd-icon-arrow-1.svg") no-repeat center center; 221 | } 222 | .cd-pagination.custom-icons .button:first-of-type a::before { 223 | left: .8em; 224 | } 225 | .cd-pagination.custom-icons .button:last-of-type a::after { 226 | right: .8em; 227 | -webkit-transform: rotate(180deg); 228 | -moz-transform: rotate(180deg); 229 | -ms-transform: rotate(180deg); 230 | -o-transform: rotate(180deg); 231 | transform: rotate(180deg); 232 | } 233 | 234 | /* -------------------------------- 235 | 236 | custom buttons - replace prev and next buttons text with a custom icon 237 | 238 | -------------------------------- */ 239 | .cd-pagination.custom-buttons a, .cd-pagination.custom-buttons span { 240 | vertical-align: middle; 241 | } 242 | .cd-pagination.custom-buttons .button a { 243 | /* set custom width */ 244 | width: 40px; 245 | /* image replacement */ 246 | overflow: hidden; 247 | white-space: nowrap; 248 | text-indent: 100%; 249 | color: transparent; 250 | background-image: url("../img/cd-icon-arrow-2.svg"); 251 | background-repeat: no-repeat; 252 | background-position: center center; 253 | } 254 | .cd-pagination.custom-buttons .button:last-of-type a { 255 | -webkit-transform: rotate(180deg); 256 | -moz-transform: rotate(180deg); 257 | -ms-transform: rotate(180deg); 258 | -o-transform: rotate(180deg); 259 | transform: rotate(180deg); 260 | } 261 | .no-touch .cd-pagination.custom-buttons .button:last-of-type a:active { 262 | -webkit-transform: scale(0.9) rotate(180deg); 263 | -moz-transform: scale(0.9) rotate(180deg); 264 | -ms-transform: scale(0.9) rotate(180deg); 265 | -o-transform: scale(0.9) rotate(180deg); 266 | transform: scale(0.9) rotate(180deg); 267 | } 268 | 269 | .cd-pagination.no-space.custom-buttons .button:last-of-type a { 270 | border-radius: 0.25em 0 0 0.25em; 271 | } 272 | 273 | /* -------------------------------- 274 | 275 | animated buttons - animate the text inside prev and next buttons 276 | 277 | -------------------------------- */ 278 | .cd-pagination.animated-buttons a, .cd-pagination.animated-buttons span { 279 | padding: 0 1.4em; 280 | height: 50px; 281 | line-height: 50px; 282 | overflow: hidden; 283 | } 284 | .cd-pagination.animated-buttons .button a { 285 | position: relative; 286 | padding: 0 2em; 287 | } 288 | .cd-pagination.animated-buttons .button:first-of-type a::before, 289 | .cd-pagination.animated-buttons .button:last-of-type a::after { 290 | left: 50%; 291 | -webkit-transform: translateX(-50%); 292 | -moz-transform: translateX(-50%); 293 | -ms-transform: translateX(-50%); 294 | -o-transform: translateX(-50%); 295 | transform: translateX(-50%); 296 | right: auto; 297 | -webkit-transition: -webkit-transform 0.3s; 298 | -moz-transition: -moz-transform 0.3s; 299 | transition: transform 0.3s; 300 | } 301 | .cd-pagination.animated-buttons .button:last-of-type a::after { 302 | -webkit-transform: translateX(-50%) rotate(180deg); 303 | -moz-transform: translateX(-50%) rotate(180deg); 304 | -ms-transform: translateX(-50%) rotate(180deg); 305 | -o-transform: translateX(-50%) rotate(180deg); 306 | transform: translateX(-50%) rotate(180deg); 307 | } 308 | .cd-pagination.animated-buttons i { 309 | display: block; 310 | height: 100%; 311 | -webkit-transform: translateY(100%); 312 | -moz-transform: translateY(100%); 313 | -ms-transform: translateY(100%); 314 | -o-transform: translateY(100%); 315 | transform: translateY(100%); 316 | -webkit-transition: -webkit-transform 0.3s; 317 | -moz-transition: -moz-transform 0.3s; 318 | transition: transform 0.3s; 319 | } 320 | 321 | .no-touch .cd-pagination.animated-buttons .button a:hover i { 322 | -webkit-transform: translateY(0); 323 | -moz-transform: translateY(0); 324 | -ms-transform: translateY(0); 325 | -o-transform: translateY(0); 326 | transform: translateY(0); 327 | } 328 | 329 | .no-touch .cd-pagination.animated-buttons .button:first-of-type a:hover::before { 330 | -webkit-transform: translateX(-50%) translateY(-50px); 331 | -moz-transform: translateX(-50%) translateY(-50px); 332 | -ms-transform: translateX(-50%) translateY(-50px); 333 | -o-transform: translateX(-50%) translateY(-50px); 334 | transform: translateX(-50%) translateY(-50px); 335 | } 336 | 337 | .no-touch .cd-pagination.animated-buttons .button:last-of-type a:hover::after { 338 | -webkit-transform: translateX(-50%) rotate(180deg) translateY(50px); 339 | -moz-transform: translateX(-50%) rotate(180deg) translateY(50px); 340 | -ms-transform: translateX(-50%) rotate(180deg) translateY(50px); 341 | -o-transform: translateX(-50%) rotate(180deg) translateY(50px); 342 | transform: translateX(-50%) rotate(180deg) translateY(50px); 343 | } 344 | -------------------------------------------------------------------------------- /js/modernizr.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.8.3 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function C(a){j.cssText=a}function D(a,b){return C(n.join(a+";")+(b||""))}function E(a,b){return typeof a===b}function F(a,b){return!!~(""+a).indexOf(b)}function G(a,b){for(var d in a){var e=a[d];if(!F(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function H(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:E(f,"function")?f.bind(d||b):f}return!1}function I(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+p.join(d+" ")+d).split(" ");return E(b,"string")||E(b,"undefined")?G(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),H(e,b,c))}function J(){e.input=function(c){for(var d=0,e=c.length;d',a,""].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},z=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=E(e[d],"function"),E(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),A={}.hasOwnProperty,B;!E(A,"undefined")&&!E(A.call,"undefined")?B=function(a,b){return A.call(a,b)}:B=function(a,b){return b in a&&E(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e}),s.flexbox=function(){return I("flexWrap")},s.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},s.canvastext=function(){return!!e.canvas&&!!E(b.createElement("canvas").getContext("2d").fillText,"function")},s.webgl=function(){return!!a.WebGLRenderingContext},s.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:y(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},s.geolocation=function(){return"geolocation"in navigator},s.postmessage=function(){return!!a.postMessage},s.websqldatabase=function(){return!!a.openDatabase},s.indexedDB=function(){return!!I("indexedDB",a)},s.hashchange=function(){return z("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},s.history=function(){return!!a.history&&!!history.pushState},s.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},s.websockets=function(){return"WebSocket"in a||"MozWebSocket"in a},s.rgba=function(){return C("background-color:rgba(150,255,150,.5)"),F(j.backgroundColor,"rgba")},s.hsla=function(){return C("background-color:hsla(120,40%,100%,.5)"),F(j.backgroundColor,"rgba")||F(j.backgroundColor,"hsla")},s.multiplebgs=function(){return C("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},s.backgroundsize=function(){return I("backgroundSize")},s.borderimage=function(){return I("borderImage")},s.borderradius=function(){return I("borderRadius")},s.boxshadow=function(){return I("boxShadow")},s.textshadow=function(){return b.createElement("div").style.textShadow===""},s.opacity=function(){return D("opacity:.55"),/^0.55$/.test(j.opacity)},s.cssanimations=function(){return I("animationName")},s.csscolumns=function(){return I("columnCount")},s.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return C((a+"-webkit- ".split(" ").join(b+a)+n.join(c+a)).slice(0,-a.length)),F(j.backgroundImage,"gradient")},s.cssreflections=function(){return I("boxReflect")},s.csstransforms=function(){return!!I("transform")},s.csstransforms3d=function(){var a=!!I("perspective");return a&&"webkitPerspective"in g.style&&y("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},s.csstransitions=function(){return I("transition")},s.fontface=function(){var a;return y('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&g.indexOf(d.split(" ")[0])===0}),a},s.generatedcontent=function(){var a;return y(["#",h,"{font:0/0 a}#",h,':after{content:"',l,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a},s.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c},s.audio=function(){var a=b.createElement("audio"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,"")}catch(d){}return c},s.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},s.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}},s.webworkers=function(){return!!a.Worker},s.applicationcache=function(){return!!a.applicationCache},s.svg=function(){return!!b.createElementNS&&!!b.createElementNS(r.svg,"svg").createSVGRect},s.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="",(a.firstChild&&a.firstChild.namespaceURI)==r.svg},s.smil=function(){return!!b.createElementNS&&/SVGAnimate/.test(m.call(b.createElementNS(r.svg,"animate")))},s.svgclippaths=function(){return!!b.createElementNS&&/SVGClipPath/.test(m.call(b.createElementNS(r.svg,"clipPath")))};for(var K in s)B(s,K)&&(x=K.toLowerCase(),e[x]=s[K](),v.push((e[x]?"":"no-")+x));return e.input||J(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)B(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},C(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.hasEvent=z,e.testProp=function(a){return G([a])},e.testAllProps=I,e.testStyles=y,e.prefixed=function(a,b,c){return b?I(a,b,c):I(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+v.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f