mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
refactor(components): update to use shadow DOM and work with css variables
- updates components to use shadow DOM or scoped if they require css variables - moves global styles to an external stylesheet that needs to be imported - adds support for additional colors and removes the Sass loops to generate colors for each component - several property renames, bug fixes, and test updates Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com> Co-authored-by: Adam Bradley <adambradley25@gmail.com> Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Color of the infinite scroll loading indicator
|
||||
$infinite-scroll-ios-loading-color: $text-ios-color-step-400 !default;
|
||||
$infinite-scroll-ios-loading-color: $text-color-step-400 !default;
|
||||
|
||||
/// @prop - Color of the infinite scroll loading indicator text
|
||||
$infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color !default;
|
||||
|
@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Color of the infinite scroll loading indicator
|
||||
$infinite-scroll-md-loading-color: $text-md-color-step-400 !default;
|
||||
$infinite-scroll-md-loading-color: $text-color-step-400 !default;
|
||||
|
||||
/// @prop - Color of the infinite scroll loading indicator text
|
||||
$infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color !default;
|
||||
|
@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-infinite-scroll-content {
|
||||
@include text-align(center);
|
||||
text-align: center;
|
||||
|
||||
display: flex;
|
||||
|
||||
|
@ -1,26 +1,24 @@
|
||||
import { Component, Prop } from '@stencil/core';
|
||||
import { Config } from '../../interface';
|
||||
import { Config, Mode } from '../../interface';
|
||||
import { createThemedClasses } from '../../utils/theme';
|
||||
|
||||
@Component({
|
||||
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 {
|
||||
|
||||
@Prop({ context: 'config' })
|
||||
config!: Config;
|
||||
mode!: Mode;
|
||||
|
||||
@Prop({ context: 'config' }) config!: Config;
|
||||
|
||||
/**
|
||||
* An animated SVG spinner that shows while loading.
|
||||
*/
|
||||
@Prop({ mutable: true })
|
||||
loadingSpinner?: string;
|
||||
@Prop({ mutable: true }) loadingSpinner?: string;
|
||||
|
||||
/**
|
||||
* Optional text to display while loading.
|
||||
@ -36,6 +34,12 @@ export class InfiniteScrollContent {
|
||||
}
|
||||
}
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
class: createThemedClasses(this.mode, 'infinite-scroll-content')
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class="infinite-loading">
|
||||
|
Reference in New Issue
Block a user