javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): update to use shadow DOM and work with css variables

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

29
core/src/components/modal/modal.tsx
View File

@ -1,8 +1,8 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
import { Animation, AnimationBuilder, Color, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode } from '../../interface';
import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
import { attachComponent, detachComponent } from '../../utils/framework-delegate';
import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
import { createThemedClasses, getClassMap } from '../../utils/theme';
import { iosEnterAnimation } from './animations/ios.enter';
@ -16,9 +16,6 @@ import { mdLeaveAnimation } from './animations/md.leave';
styleUrls: {
ios: 'modal.ios.scss',
md: 'modal.md.scss'
},
host: {
theme: 'modal'
}
})
export class Modal implements OverlayInterface {
@ -27,6 +24,7 @@ export class Modal implements OverlayInterface {
animation: Animation|undefined;
presented = false;
mode!: Mode;
@Element() el!: HTMLElement;
@ -37,20 +35,6 @@ export class Modal implements OverlayInterface {
@Prop() delegate?: FrameworkDelegate;
@Prop() keyboardClose = true;
/**
* The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@Prop() mode!: Mode;
/**
* Animation to use when the modal is presented.
*/
@ -212,7 +196,10 @@ export class Modal implements OverlayInterface {
hostData() {
return {
'no-router': true,
class: getClassMap(this.cssClass),
class: {
...createThemedClasses(this.mode, 'modal'),
...getClassMap(this.cssClass)
},
style: {
zIndex: 20000 + this.overlayId,
}
@ -220,7 +207,7 @@ export class Modal implements OverlayInterface {
}
render() {
const dialogClasses = createThemedClasses(this.mode, this.color, 'modal-wrapper');
const dialogClasses = createThemedClasses(this.mode, 'modal-wrapper');
return [
<ion-backdrop visible={this.showBackdrop} tappable={this.enableBackdropDismiss}/>,