javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(overlays): add global backdrop opacity variable for animations (#19533)

Browse Source 
adds `--backdrop-opacity` to all overlays and `--ion-backdrop-opacity` for global control

closes #16446
This commit is contained in:
Brandy Carney
2019-10-08 16:42:37 -04:00
parent 3dd5f05760
commit bd22926c49
49 changed files with 136 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/loading/animations/ios.enter.ts
View File

@ -11,7 +11,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.01, 0.3);
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
wrapperAnimation
.addElement(baseEl.querySelector('.loading-wrapper')!)

2
core/src/components/loading/animations/ios.leave.ts
View File

@ -11,7 +11,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.3, 0);
.fromTo('opacity', 'var(--backdrop-opacity)', 0);
wrapperAnimation
.addElement(baseEl.querySelector('.loading-wrapper')!)

2
core/src/components/loading/animations/md.enter.ts
View File

@ -11,7 +11,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.01, 0.32);
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
wrapperAnimation
.addElement(baseEl.querySelector('.loading-wrapper')!)

2
core/src/components/loading/animations/md.leave.ts
View File

@ -11,7 +11,7 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.32, 0);
.fromTo('opacity', 'var(--backdrop-opacity)', 0);
wrapperAnimation
.addElement(baseEl.querySelector('.loading-wrapper')!)

1
core/src/components/loading/loading.ios.scss
View File

@ -9,6 +9,7 @@
--max-width: #{$loading-ios-max-width};
--max-height: #{$loading-ios-max-height};
--spinner-color: #{$loading-ios-spinner-color};
--backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
color: $loading-ios-text-color;

1
core/src/components/loading/loading.md.scss
View File

@ -9,6 +9,7 @@
--max-width: #{$loading-md-max-width};
--max-height: #{$loading-md-max-height};
--spinner-color: #{$loading-md-spinner-color};
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
color: $loading-md-text-color;

2
core/src/components/loading/loading.scss
View File

@ -16,6 +16,8 @@
* @prop --max-height: Maximum height of the loading dialog
*
* @prop --spinner-color: Color of the loading spinner
*
* @prop --backdrop-opacity: Opacity of the backdrop
*/
--min-width: auto;
--width: auto;

21
core/src/components/loading/readme.md
View File

@ -242,16 +242,17 @@ Type: `Promise<void>`
## CSS Custom Properties
| Name | Description |
| ----------------- | ------------------------------------ |
| `--background` | Background of the loading dialog |
| `--height` | Height of the loading dialog |
| `--max-height` | Maximum height of the loading dialog |
| `--max-width` | Maximum width of the loading dialog |
| `--min-height` | Minimum height of the loading dialog |
| `--min-width` | Minimum width of the loading dialog |
| `--spinner-color` | Color of the loading spinner |
| `--width` | Width of the loading dialog |
| Name | Description |
| -------------------- | ------------------------------------ |
| `--backdrop-opacity` | Opacity of the backdrop |
| `--background` | Background of the loading dialog |
| `--height` | Height of the loading dialog |
| `--max-height` | Maximum height of the loading dialog |
| `--max-width` | Maximum width of the loading dialog |
| `--min-height` | Minimum height of the loading dialog |
| `--min-width` | Minimum width of the loading dialog |
| `--spinner-color` | Color of the loading spinner |
| `--width` | Width of the loading dialog |
## Dependencies