src/app/common/components/infinite-scroll/horizontal-infinite-scroll.component.ts

@@ -7,6 +7,7 @@ import { Subscription } from "rxjs";
  template: `
  <div class="mdl-spinner mdl-js-spinner is-active" [mdl] [hidden]="!inProgress"></div>
  <div class="m-infinite-scroll-manual"
+ [class.m-infinite-scroll-manual__loadMore]="!iconOnly"
  [class.mdl-color--blue-grey-200]="!iconOnly"
  [class.mdl-color-text--blue-grey-500]="!iconOnly"
  [hidden]="inProgress || !moreData"
@@ -17,6 +18,7 @@ import { Subscription } from "rxjs";
  <i class="material-icons" *ngIf="iconOnly">keyboard_arrow_right</i>
  </div>
  <div class="m-infinite-scroll-manual"
+ [class.m-infinite-scroll-manual__noMore]="!iconOnly"
  [class.mdl-color--blue-grey-200]="!iconOnly"
  [class.mdl-color-text--blue-grey-500]="!iconOnly"
  [hidden]="moreData"

src/app/common/components/infinite-scroll/infinite-scroll.scss

@@ -14,4 +14,27 @@ infinite-scroll{
  font-weight: 600;
  cursor:pointer;
  }
+
+ .m-infinite-scroll-manual__noMore{
+ cursor: text;
+ 
+ @include m-theme(){
+ color: themed($m-blue-grey-300) !important;
+ background-color: themed($m-blue-grey-50) !important;
+ }
+ }
+
+ .m-infinite-scroll-manual__loadMore{
+ &:hover {
+ @include m-theme(){
+ color: themed($m-blue-grey-700) !important;
+ background-color: themed($m-blue-grey-300) !important;
+ }
+ }
+ &:active {
+ @include m-theme(){
+ background-color: themed($m-blue-grey-200) !important;
+ }
+ }
+ }
 }

src/app/common/components/infinite-scroll/infinite-scroll.ts

@@ -7,6 +7,7 @@ import { Subscription } from "rxjs";
  template: `
  <div class="mdl-spinner mdl-js-spinner is-active" [mdl] [hidden]="!inProgress"></div>
  <div class="m-infinite-scroll-manual"
+ [class.m-infinite-scroll-manual__loadMore]="!iconOnly"
  [class.mdl-color--blue-grey-200]="!iconOnly"
  [class.mdl-color-text--blue-grey-500]="!iconOnly"
  [hidden]="inProgress || !moreData"
@@ -17,6 +18,7 @@ import { Subscription } from "rxjs";
  <i class="material-icons" *ngIf="iconOnly">keyboard_arrow_down</i>
  </div>
  <div class="m-infinite-scroll-manual"
+ [class.m-infinite-scroll-manual__noMore]="!iconOnly"
  [class.mdl-color--blue-grey-200]="!iconOnly"
  [class.mdl-color-text--blue-grey-500]="!iconOnly"
  [hidden]="moreData"