mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 14:01:20 +08:00
fix(infinite-scroll): move css to ion-infinite-scroll-content
This commit is contained in:
@ -0,0 +1,18 @@
|
|||||||
|
@import "./infinite-scroll-content";
|
||||||
|
@import "./infinite-scroll-content.ios.vars";
|
||||||
|
|
||||||
|
.infinite-scroll-content-ios .infinite-loading-text {
|
||||||
|
color: $infinite-scroll-ios-loading-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-ios line,
|
||||||
|
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-ios-small line,
|
||||||
|
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle {
|
||||||
|
stroke: $infinite-scroll-ios-loading-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-bubbles circle,
|
||||||
|
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-circles circle,
|
||||||
|
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-dots circle {
|
||||||
|
fill: $infinite-scroll-ios-loading-color;
|
||||||
|
}
|
@ -0,0 +1,16 @@
|
|||||||
|
@import "./infinite-scroll-content";
|
||||||
|
@import "./infinite-scroll-content.md.vars";
|
||||||
|
|
||||||
|
.infinite-scroll-content-md .infinite-loading-text {
|
||||||
|
color: $infinite-scroll-md-loading-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle {
|
||||||
|
stroke: $infinite-scroll-md-loading-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,
|
||||||
|
.infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,
|
||||||
|
.infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle {
|
||||||
|
fill: $infinite-scroll-md-loading-color;
|
||||||
|
}
|
@ -0,0 +1,36 @@
|
|||||||
|
@import "./infinite-scroll-content.vars";
|
||||||
|
|
||||||
|
// Infinite Scroll Content
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
ion-infinite-scroll-content {
|
||||||
|
@include text-align(center);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
min-height: $infinite-scroll-content-min-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infinite-loading {
|
||||||
|
@include margin($infinite-scroll-loading-margin-top, $infinite-scroll-loading-margin-end, $infinite-scroll-loading-margin-bottom, $infinite-scroll-loading-margin-start);
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.infinite-loading-text {
|
||||||
|
@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 Scroll Content States
|
||||||
|
// --------------------------------------------------
|
||||||
|
.infinite-scroll-loading ion-infinite-scroll-content > .infinite-loading {
|
||||||
|
display: block;
|
||||||
|
}
|
@ -3,7 +3,14 @@ import { Config } from '../../index';
|
|||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
tag: 'ion-infinite-scroll-content'
|
tag: 'ion-infinite-scroll-content',
|
||||||
|
styleUrls: {
|
||||||
|
ios: 'infinite-scroll-content.ios.scss',
|
||||||
|
md: 'infinite-scroll-content.md.scss'
|
||||||
|
},
|
||||||
|
host: {
|
||||||
|
theme: 'infinite-scroll-content'
|
||||||
|
}
|
||||||
})
|
})
|
||||||
export class InfiniteScrollContent {
|
export class InfiniteScrollContent {
|
||||||
|
|
||||||
|
@ -1,17 +0,0 @@
|
|||||||
@import "./infinite-scroll.ios.vars";
|
|
||||||
|
|
||||||
.infinite-scroll-ios .infinite-loading-text {
|
|
||||||
color: $infinite-scroll-ios-loading-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infinite-scroll-ios .infinite-loading-spinner .spinner-ios line,
|
|
||||||
.infinite-scroll-ios .infinite-loading-spinner .spinner-ios-small line,
|
|
||||||
.infinite-scroll-ios .infinite-loading-spinner .spinner-crescent circle {
|
|
||||||
stroke: $infinite-scroll-ios-loading-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infinite-scroll-ios .infinite-loading-spinner .spinner-bubbles circle,
|
|
||||||
.infinite-scroll-ios .infinite-loading-spinner .spinner-circles circle,
|
|
||||||
.infinite-scroll-ios .infinite-loading-spinner .spinner-dots circle {
|
|
||||||
fill: $infinite-scroll-ios-loading-color;
|
|
||||||
}
|
|
@ -1,15 +0,0 @@
|
|||||||
@import "./infinite-scroll.md.vars";
|
|
||||||
|
|
||||||
.infinite-scroll-md .infinite-loading-text {
|
|
||||||
color: $infinite-scroll-md-loading-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infinite-scroll-md .infinite-loading-spinner .spinner-crescent circle {
|
|
||||||
stroke: $infinite-scroll-md-loading-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infinite-scroll-md .infinite-loading-spinner .spinner-bubbles circle,
|
|
||||||
.infinite-scroll-md .infinite-loading-spinner .spinner-circles circle,
|
|
||||||
.infinite-scroll-md .infinite-loading-spinner .spinner-dots circle {
|
|
||||||
fill: $infinite-scroll-md-loading-color;
|
|
||||||
}
|
|
@ -1,5 +1,3 @@
|
|||||||
@import "./infinite-scroll.vars";
|
|
||||||
|
|
||||||
// Infinite Scroll
|
// Infinite Scroll
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
@ -12,39 +10,3 @@ ion-infinite-scroll {
|
|||||||
.infinite-scroll-enabled {
|
.infinite-scroll-enabled {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Infinite Scroll Content
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
ion-infinite-scroll-content {
|
|
||||||
@include text-align(center);
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
min-height: $infinite-scroll-content-min-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infinite-loading {
|
|
||||||
@include margin($infinite-scroll-loading-margin-top, $infinite-scroll-loading-margin-end, $infinite-scroll-loading-margin-bottom, $infinite-scroll-loading-margin-start);
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.infinite-loading-text {
|
|
||||||
@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 Scroll Content States
|
|
||||||
// --------------------------------------------------
|
|
||||||
.infinite-scroll-loading ion-infinite-scroll-content > .infinite-loading {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
@ -9,13 +9,7 @@ const enum Position {
|
|||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
tag: 'ion-infinite-scroll',
|
tag: 'ion-infinite-scroll',
|
||||||
styleUrls: {
|
styleUrl: 'infinite-scroll.scss'
|
||||||
ios: 'infinite-scroll.ios.scss',
|
|
||||||
md: 'infinite-scroll.md.scss'
|
|
||||||
},
|
|
||||||
host: {
|
|
||||||
theme: 'infinite-scroll'
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
export class InfiniteScroll {
|
export class InfiniteScroll {
|
||||||
|
|
||||||
|
@ -7,11 +7,6 @@
|
|||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
#### disabled
|
|
||||||
|
|
||||||
boolean
|
|
||||||
|
|
||||||
|
|
||||||
#### onionScroll
|
#### onionScroll
|
||||||
|
|
||||||
|
|
||||||
@ -27,13 +22,13 @@ boolean
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Attributes
|
#### scrollEvents
|
||||||
|
|
||||||
#### disabled
|
|
||||||
|
|
||||||
boolean
|
boolean
|
||||||
|
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
|
||||||
#### onion-scroll
|
#### onion-scroll
|
||||||
|
|
||||||
|
|
||||||
@ -49,6 +44,11 @@ boolean
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### scroll-events
|
||||||
|
|
||||||
|
boolean
|
||||||
|
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
#### ionScroll
|
#### ionScroll
|
||||||
|
Reference in New Issue
Block a user