_infinitescroll.scss 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. /* Globally hidden elements when Infinite Scroll is supported and in use. */
  2. .infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
  3. .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
  4. display: none;
  5. }
  6. /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
  7. .infinity-end.neverending .site-footer {
  8. display: block;
  9. }
  10. #infinite-handle {
  11. background: transparent;
  12. bottom: 0;
  13. clear: both;
  14. display: block;
  15. padding: $baseline 10%;
  16. position: relative;
  17. text-align: center;
  18. width: 100%;
  19. z-index: 1;
  20. float: left;
  21. top: 100%;
  22. span {
  23. background: transparent;
  24. display: block;
  25. margin-top: -25px;
  26. padding: 0;
  27. button {
  28. @include button();
  29. display: inline-block;
  30. &:hover {
  31. @include list-item();
  32. border: 1px solid;
  33. border-color: $color__link;
  34. display: inline-block;
  35. padding: 1em $gutter;
  36. }
  37. }
  38. }
  39. }
  40. .infinite-loader {
  41. background: transparent;
  42. bottom: 0;
  43. clear: both;
  44. display: block;
  45. padding: $baseline 10%;
  46. position: absolute;
  47. text-align: center;
  48. width: 100%;
  49. z-index: 1;
  50. .spinner[style] {
  51. left: inherit !important;
  52. margin: 0 auto;
  53. top: inherit;
  54. }
  55. }
  56. @include breakpoint( phablet ) {
  57. #infinite-handle,
  58. .infinite-loader {
  59. padding: ($baseline * 2) 10%;
  60. }
  61. }