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:
Brandy Carney
2018-07-09 12:57:21 -04:00
parent a4659f03b4
commit a7f1f4daa7
710 changed files with 20999 additions and 20853 deletions

View File

@ -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)
}