mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +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:
@ -1,6 +1,6 @@
|
||||
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
|
||||
import { Animation, AnimationBuilder, Color, Config, Mode } from '../../interface';
|
||||
import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
|
||||
import { Animation, AnimationBuilder, Color, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
|
||||
import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
|
||||
import { createThemedClasses, getClassMap } from '../../utils/theme';
|
||||
|
||||
import { iosEnterAnimation } from './animations/ios.enter';
|
||||
@ -14,9 +14,6 @@ import { mdLeaveAnimation } from './animations/md.leave';
|
||||
styleUrls: {
|
||||
ios: 'loading.ios.scss',
|
||||
md: 'loading.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'loading'
|
||||
}
|
||||
})
|
||||
export class Loading implements OverlayInterface {
|
||||
@ -81,7 +78,7 @@ export class Loading implements OverlayInterface {
|
||||
* The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`,
|
||||
* `"bubbles"`, `"circles"`, `"crescent"`.
|
||||
*/
|
||||
@Prop() spinner?: string;
|
||||
@Prop({mutable: true}) spinner?: string;
|
||||
|
||||
/**
|
||||
* If true, the loading indicator will be translucent. Defaults to `false`.
|
||||
@ -188,7 +185,7 @@ export class Loading implements OverlayInterface {
|
||||
|
||||
hostData() {
|
||||
const themedClasses = this.translucent
|
||||
? createThemedClasses(this.mode, this.color, 'loading-translucent')
|
||||
? createThemedClasses(this.mode, 'loading-translucent')
|
||||
: {};
|
||||
|
||||
return {
|
||||
@ -196,6 +193,7 @@ export class Loading implements OverlayInterface {
|
||||
zIndex: 20000 + this.overlayId
|
||||
},
|
||||
class: {
|
||||
...createThemedClasses(this.mode, 'loading'),
|
||||
...themedClasses,
|
||||
...getClassMap(this.cssClass)
|
||||
}
|
||||
|
Reference in New Issue
Block a user