Advertisement
schiavassa

Quadro theme - Show pagination labels on touch devices

Jul 14th, 2014
208
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.16 KB | None | 0 0
  1. /* Show pagination labels on touch devices */
  2.  
  3. .touch #pagination .pagination-button a:link .label, .touch #pagination .pagination-button a:visited .label {
  4.     opacity: 1;
  5. }
  6. .touch #pagination .pagination-left a:link, .touch #pagination .pagination-left a:visited {
  7.     padding-left: 20px;
  8.     padding-right: 50%;
  9. }
  10. .touch #pagination .pagination-left a:link .label, .touch #pagination .pagination-left a:visited .label {
  11.     -webkit-transform: translate(-40%, -50%) scale(1);
  12.     -ms-transform: translate(-40%, -50%) scale(1);
  13.     transform: translate(-40%, -50%) scale(1);
  14. }
  15. .touch #pagination .pagination-right a:link, .touch #pagination .pagination-right a:visited {
  16.     padding-left: 50%;
  17.     padding-right: 20px;
  18. }
  19. .touch #pagination .pagination-right a:link .label, .touch #pagination .pagination-right a:visited .label {
  20.     -webkit-transform: translate(-60%, -50%) scale(1);
  21.     -ms-transform: translate(-60%, -50%) scale(1);
  22.     transform: translate(-60%, -50%) scale(1);
  23. }
  24.  
  25. /* Align pagination to the left on mobile */
  26. @media screen and (max-width: 1000px) {
  27.     #pagination { text-align: left; }
  28.     .pagination-button { text-align: center; }
  29. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement