infinite-scroll.scss 3.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. @import "../../themes/ionic.globals";
  2. // Infinite Scroll
  3. // --------------------------------------------------
  4. // deprecated
  5. $infinite-scroll-loading-margin: null !default;
  6. /// @prop - Margin top of the infinite scroll loading icon
  7. $infinite-scroll-loading-margin-top: 0 !default;
  8. /// @prop - Margin end of the infinite scroll loading icon
  9. $infinite-scroll-loading-margin-end: 0 !default;
  10. /// @prop - Margin bottom of the infinite scroll loading icon
  11. $infinite-scroll-loading-margin-bottom: 32px !default;
  12. /// @prop - Margin start of the infinite scroll loading icon
  13. $infinite-scroll-loading-margin-start: 0 !default;
  14. /// @prop - Color of the infinite scroll loading indicator
  15. $infinite-scroll-loading-color: #666 !default;
  16. /// @prop - Text color of the infinite scroll loading indicator
  17. $infinite-scroll-loading-text-color: $infinite-scroll-loading-color !default;
  18. // deprecated
  19. $infinite-scroll-loading-text-margin: null !default;
  20. /// @prop - Margin top of the infinite scroll loading text
  21. $infinite-scroll-loading-text-margin-top:4px !default;
  22. /// @prop - Margin end of the infinite scroll loading text
  23. $infinite-scroll-loading-text-margin-end:32px !default;
  24. /// @prop - Margin bottom of the infinite scroll loading text
  25. $infinite-scroll-loading-text-margin-bottom:0 !default;
  26. /// @prop - Margin start of the infinite scroll loading text
  27. $infinite-scroll-loading-text-margin-start:32px !default;
  28. ion-infinite-scroll {
  29. display: block;
  30. width: 100%;
  31. }
  32. // Infinite Scroll Content
  33. // --------------------------------------------------
  34. ion-infinite-scroll-content {
  35. @include text-align(center);
  36. display: flex;
  37. flex-direction: column;
  38. justify-content: center;
  39. height: 100%;
  40. min-height: 84px;
  41. }
  42. .infinite-loading {
  43. display: none;
  44. width: 100%;
  45. @include deprecated-variable(margin, $infinite-scroll-loading-margin) {
  46. @include margin($infinite-scroll-loading-margin-top, $infinite-scroll-loading-margin-end, $infinite-scroll-loading-margin-bottom, $infinite-scroll-loading-margin-start);
  47. }
  48. }
  49. .infinite-loading-text {
  50. color: $infinite-scroll-loading-text-color;
  51. @include deprecated-variable(margin, $infinite-scroll-loading-text-margin) {
  52. @include margin($infinite-scroll-loading-text-margin-top, $infinite-scroll-loading-text-margin-end, $infinite-scroll-loading-text-margin-bottom, $infinite-scroll-loading-text-margin-start);
  53. }
  54. }
  55. .infinite-loading-spinner .spinner-ios line,
  56. .infinite-loading-spinner .spinner-ios-small line,
  57. .infinite-loading-spinner .spinner-crescent circle {
  58. stroke: $infinite-scroll-loading-color;
  59. }
  60. .infinite-loading-spinner .spinner-bubbles circle,
  61. .infinite-loading-spinner .spinner-circles circle,
  62. .infinite-loading-spinner .spinner-dots circle {
  63. fill: $infinite-scroll-loading-color;
  64. }
  65. // Infinite Scroll Content States
  66. // --------------------------------------------------
  67. ion-infinite-scroll-content[state=loading] .infinite-loading {
  68. display: block;
  69. }
  70. ion-infinite-scroll-content[state=disabled] {
  71. display: none;
  72. }