123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- @import "../../themes/ionic.globals";
-
- // Infinite Scroll
- // --------------------------------------------------
-
-
- // deprecated
- $infinite-scroll-loading-margin: null !default;
-
- /// @prop - Margin top of the infinite scroll loading icon
- $infinite-scroll-loading-margin-top: 0 !default;
-
- /// @prop - Margin end of the infinite scroll loading icon
- $infinite-scroll-loading-margin-end: 0 !default;
-
- /// @prop - Margin bottom of the infinite scroll loading icon
- $infinite-scroll-loading-margin-bottom: 32px !default;
-
- /// @prop - Margin start of the infinite scroll loading icon
- $infinite-scroll-loading-margin-start: 0 !default;
-
- /// @prop - Color of the infinite scroll loading indicator
- $infinite-scroll-loading-color: #666 !default;
-
- /// @prop - Text color of the infinite scroll loading indicator
- $infinite-scroll-loading-text-color: $infinite-scroll-loading-color !default;
-
- // deprecated
- $infinite-scroll-loading-text-margin: null !default;
-
- /// @prop - Margin top of the infinite scroll loading text
- $infinite-scroll-loading-text-margin-top:4px !default;
-
- /// @prop - Margin end of the infinite scroll loading text
- $infinite-scroll-loading-text-margin-end:32px !default;
-
- /// @prop - Margin bottom of the infinite scroll loading text
- $infinite-scroll-loading-text-margin-bottom:0 !default;
-
- /// @prop - Margin start of the infinite scroll loading text
- $infinite-scroll-loading-text-margin-start:32px !default;
-
- ion-infinite-scroll {
- display: block;
-
- width: 100%;
- }
-
-
- // Infinite Scroll Content
- // --------------------------------------------------
-
- ion-infinite-scroll-content {
- @include text-align(center);
-
- display: flex;
-
- flex-direction: column;
- justify-content: center;
-
- height: 100%;
- min-height: 84px;
- }
-
- .infinite-loading {
- display: none;
-
- width: 100%;
-
- @include deprecated-variable(margin, $infinite-scroll-loading-margin) {
- @include margin($infinite-scroll-loading-margin-top, $infinite-scroll-loading-margin-end, $infinite-scroll-loading-margin-bottom, $infinite-scroll-loading-margin-start);
- }
- }
-
- .infinite-loading-text {
- color: $infinite-scroll-loading-text-color;
-
- @include deprecated-variable(margin, $infinite-scroll-loading-text-margin) {
- @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);
- }
- }
-
- .infinite-loading-spinner .spinner-ios line,
- .infinite-loading-spinner .spinner-ios-small line,
- .infinite-loading-spinner .spinner-crescent circle {
- stroke: $infinite-scroll-loading-color;
- }
-
- .infinite-loading-spinner .spinner-bubbles circle,
- .infinite-loading-spinner .spinner-circles circle,
- .infinite-loading-spinner .spinner-dots circle {
- fill: $infinite-scroll-loading-color;
- }
-
-
- // Infinite Scroll Content States
- // --------------------------------------------------
-
- ion-infinite-scroll-content[state=loading] .infinite-loading {
- display: block;
- }
-
- ion-infinite-scroll-content[state=disabled] {
- display: none;
- }
|