javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +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

6
core/api.txt
View File

@ -19,6 +19,7 @@ ion-action-sheet,event,ionActionSheetDidDismiss,OverlayEventDetail<any>,true
ion-action-sheet,event,ionActionSheetDidPresent,void,true
ion-action-sheet,event,ionActionSheetWillDismiss,OverlayEventDetail<any>,true
ion-action-sheet,event,ionActionSheetWillPresent,void,true
ion-action-sheet,css-prop,--backdrop-opacity
ion-action-sheet,css-prop,--background
ion-action-sheet,css-prop,--background-activated
ion-action-sheet,css-prop,--background-selected
@ -57,6 +58,7 @@ ion-alert,event,ionAlertDidDismiss,OverlayEventDetail<any>,true
ion-alert,event,ionAlertDidPresent,void,true
ion-alert,event,ionAlertWillDismiss,OverlayEventDetail<any>,true
ion-alert,event,ionAlertWillPresent,void,true
ion-alert,css-prop,--backdrop-opacity
ion-alert,css-prop,--background
ion-alert,css-prop,--height
ion-alert,css-prop,--max-height
@ -589,6 +591,7 @@ ion-loading,event,ionLoadingDidDismiss,OverlayEventDetail<any>,true
ion-loading,event,ionLoadingDidPresent,void,true
ion-loading,event,ionLoadingWillDismiss,OverlayEventDetail<any>,true
ion-loading,event,ionLoadingWillPresent,void,true
ion-loading,css-prop,--backdrop-opacity
ion-loading,css-prop,--background
ion-loading,css-prop,--height
ion-loading,css-prop,--max-height
@ -684,6 +687,7 @@ ion-modal,event,ionModalDidDismiss,OverlayEventDetail<any>,true
ion-modal,event,ionModalDidPresent,void,true
ion-modal,event,ionModalWillDismiss,OverlayEventDetail<any>,true
ion-modal,event,ionModalWillPresent,void,true
ion-modal,css-prop,--backdrop-opacity
ion-modal,css-prop,--background
ion-modal,css-prop,--border-color
ion-modal,css-prop,--border-radius
@ -754,6 +758,7 @@ ion-picker,event,ionPickerDidDismiss,OverlayEventDetail<any>,true
ion-picker,event,ionPickerDidPresent,void,true
ion-picker,event,ionPickerWillDismiss,OverlayEventDetail<any>,true
ion-picker,event,ionPickerWillPresent,void,true
ion-picker,css-prop,--backdrop-opacity
ion-picker,css-prop,--background
ion-picker,css-prop,--background-rgb
ion-picker,css-prop,--border-color
@ -793,6 +798,7 @@ ion-popover,event,ionPopoverDidDismiss,OverlayEventDetail<any>,true
ion-popover,event,ionPopoverDidPresent,void,true
ion-popover,event,ionPopoverWillDismiss,OverlayEventDetail<any>,true
ion-popover,event,ionPopoverWillPresent,void,true
ion-popover,css-prop,--backdrop-opacity
ion-popover,css-prop,--background
ion-popover,css-prop,--box-shadow
ion-popover,css-prop,--height

1
core/src/components/action-sheet/action-sheet.ios.scss
View File

@ -8,6 +8,7 @@
--background: #{$action-sheet-ios-background-color};
--background-selected: #{$action-sheet-ios-button-background-selected};
--background-activated: #{$action-sheet-ios-button-background-activated};
--backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
text-align: $action-sheet-ios-text-align;
}

1
core/src/components/action-sheet/action-sheet.md.scss
View File

@ -8,6 +8,7 @@
--background: #{$action-sheet-md-background-color};
--background-selected: #{var(--background, $action-sheet-md-button-background-selected)};
--background-activated: var(--background);
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}
.action-sheet-title {

2
core/src/components/action-sheet/action-sheet.scss
View File

@ -18,6 +18,8 @@
* @prop --min-height: Minimum height of the action sheet
* @prop --height: height of the action sheet
* @prop --max-height: Maximum height of the action sheet
*
* @prop --backdrop-opacity: Opacity of the backdrop
*/
--color: initial;
--min-width: auto;

2
core/src/components/action-sheet/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.4);
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
wrapperAnimation
.addElement(baseEl.querySelector('.action-sheet-wrapper')!)

2
core/src/components/action-sheet/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.4, 0);
.fromTo('opacity', 'var(--backdrop-opacity)', 0);
wrapperAnimation
.addElement(baseEl.querySelector('.action-sheet-wrapper')!)

2
core/src/components/action-sheet/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('.action-sheet-wrapper')!)

2
core/src/components/action-sheet/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('.action-sheet-wrapper')!)

1
core/src/components/action-sheet/readme.md
View File

@ -321,6 +321,7 @@ Type: `Promise<void>`
| Name | Description |
| ------------------------ | -------------------------------------------------- |
| `--backdrop-opacity` | Opacity of the backdrop |
| `--background` | Background of the action sheet group |
| `--background-activated` | Background of the action sheet button when pressed |
| `--background-selected` | Background of the selected action sheet button |

8
core/src/components/action-sheet/test/basic/e2e.ts
View File

@ -34,6 +34,10 @@ test('action-sheet: basic, scroll without cancel', async () => {
await testActionSheet(DIRECTORY, '#scrollWithoutCancel');
});
test('action-sheet: basic, custom backdrop', async () => {
await testActionSheet(DIRECTORY, '#customBackdrop');
});
/**
* RTL Tests
*/
@ -69,3 +73,7 @@ test('action-sheet:rtl: basic, scrollable options', async () => {
test('action-sheet:rtl: basic, scroll without cancel', async () => {
await testActionSheet(DIRECTORY, '#scrollWithoutCancel', true);
});
test('action-sheet:rtl: basic, custom backdrop', async () => {
await testActionSheet(DIRECTORY, '#customBackdrop', true);
});

11
core/src/components/action-sheet/test/basic/index.html
View File

@ -28,6 +28,7 @@
<ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
<ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
<ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
<ion-button expand="block" id="customBackdrop" onclick="presentWithCssClass('custom-backdrop')">Custom Backdrop Opacity</ion-button>
</ion-content>
</ion-app>
@ -49,6 +50,10 @@
--height: 325px;
}
.custom-backdrop {
--ion-backdrop-opacity: 1;
}
</style>
<script>
window.addEventListener('ionActionSheetDidDismiss', function (e) { console.log('didDismiss', e) })
@ -146,10 +151,12 @@
await actionSheetElement.present();
}
async function presentWithCssClass() {
async function presentWithCssClass(classList) {
const addClass = classList ? classList : "my-color-class my-custom-class";
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
header: "Custom Css Class",
cssClass: "my-color-class my-custom-class",
cssClass: addClass,
buttons: [
{
text: 'Add to Favorites',

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

@ -7,6 +7,7 @@
:host {
--background: #{$alert-ios-background-color};
--max-width: #{$alert-ios-max-width};
--backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
font-size: $alert-ios-font-size;
}

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

@ -7,6 +7,7 @@
:host {
--background: #{$alert-md-background-color};
--max-width: #{$alert-md-max-width};
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
font-size: $alert-md-font-size;
}

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

@ -14,6 +14,8 @@
* @prop --min-height: Minimum height of the alert
* @prop --height: Height of the alert
* @prop --max-height: Maximum height of the alert
*
* @prop --backdrop-opacity: Opacity of the backdrop
*/
--min-width: #{$alert-min-width};
--width: auto;

2
core/src/components/alert/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('.alert-wrapper')!)

2
core/src/components/alert/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('.alert-wrapper')!)

2
core/src/components/alert/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('.alert-wrapper')!)

2
core/src/components/alert/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('.alert-wrapper')!)

19
core/src/components/alert/readme.md
View File

@ -1097,15 +1097,16 @@ Type: `Promise<void>`
## CSS Custom Properties
| Name | Description |
| -------------- | --------------------------- |
| `--background` | Background of the alert |
| `--height` | Height of the alert |
| `--max-height` | Maximum height of the alert |
| `--max-width` | Maximum width of the alert |
| `--min-height` | Minimum height of the alert |
| `--min-width` | Minimum width of the alert |
| `--width` | Width of the alert |
| Name | Description |
| -------------------- | --------------------------- |
| `--backdrop-opacity` | Opacity of the backdrop |
| `--background` | Background of the alert |
| `--height` | Height of the alert |
| `--max-height` | Maximum height of the alert |
| `--max-width` | Maximum width of the alert |
| `--min-height` | Minimum height of the alert |
| `--min-width` | Minimum width of the alert |
| `--width` | Width of the alert |
## Dependencies

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

2
core/src/components/modal/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.4);
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
wrapperAnimation
.addElement(baseEl.querySelector('.modal-wrapper')!)

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

@ -13,7 +13,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.4, 0.0);
.fromTo('opacity', 'var(--backdrop-opacity)', 0.0);
wrapperAnimation
.addElement(wrapperEl!)

2
core/src/components/modal/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('.modal-wrapper')!)

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

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

4
core/src/components/modal/modal.ios.scss
View File

@ -4,6 +4,10 @@
// iOS Modals
// --------------------------------------------------
:host {
--backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
}
@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
:host {
--border-radius: #{$modal-ios-border-radius};

4
core/src/components/modal/modal.md.scss
View File

@ -5,6 +5,10 @@
// Material Design Modals
// --------------------------------------------------
:host {
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}
@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
:host {
--border-radius: 2px;

1
core/src/components/modal/modal.scss
View File

@ -20,6 +20,7 @@
* @prop --height: Height of the modal
* @prop --max-height: Maximum height of the modal
*
* @prop --backdrop-opacity: Opacity of the backdrop
*/
--width: 100%;
--min-width: auto;

27
core/src/components/modal/readme.md
View File

@ -395,19 +395,20 @@ Type: `Promise<void>`
## CSS Custom Properties
| Name | Description |
| ----------------- | ---------------------------------- |
| `--background` | Background of the modal content |
| `--border-color` | Border color of the modal content |
| `--border-radius` | Border radius of the modal content |
| `--border-style` | Border style of the modal content |
| `--border-width` | Border width of the modal content |
| `--height` | Height of the modal |
| `--max-height` | Maximum height of the modal |
| `--max-width` | Maximum width of the modal |
| `--min-height` | Minimum height of the modal |
| `--min-width` | Minimum width of the modal |
| `--width` | Width of the modal |
| Name | Description |
| -------------------- | ---------------------------------- |
| `--backdrop-opacity` | Opacity of the backdrop |
| `--background` | Background of the modal content |
| `--border-color` | Border color of the modal content |
| `--border-radius` | Border radius of the modal content |
| `--border-style` | Border style of the modal content |
| `--border-width` | Border width of the modal content |
| `--height` | Height of the modal |
| `--max-height` | Maximum height of the modal |
| `--max-width` | Maximum width of the modal |
| `--min-height` | Minimum height of the modal |
| `--min-width` | Minimum width of the modal |
| `--width` | Width of the modal |
## Dependencies

2
core/src/components/picker/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.26);
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
wrapperAnimation
.addElement(baseEl.querySelector('.picker-wrapper')!)

2
core/src/components/picker/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.26, 0.01);
.fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
wrapperAnimation
.addElement(baseEl.querySelector('.picker-wrapper')!)

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

@ -9,6 +9,7 @@
--border-width: #{1px 0 0};
--border-color: #{$picker-ios-border-color};
--height: #{$picker-ios-height};
--backdrop-opacity: var(--ion-backdrop-opacity, 0.26);
color: $picker-ios-option-text-color;
}

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

@ -9,6 +9,7 @@
--border-width: #{$hairlines-width 0 0};
--border-color: #{$picker-md-border-color};
--height: #{$picker-md-height};
--backdrop-opacity: var(--ion-backdrop-opacity, 0.26);
color: $picker-md-option-text-color;
}

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

@ -20,6 +20,8 @@
* @prop --min-height: Minimum height of the picker
* @prop --height: Height of the picker
* @prop --max-height: Maximum height of the picker
*
* @prop --backdrop-opacity: Opacity of the backdrop
*/
--border-radius: 0;
--border-style: solid;

29
core/src/components/picker/readme.md
View File

@ -89,20 +89,21 @@ Type: `Promise<void>`
## CSS Custom Properties
| Name | Description |
| ------------------ | -------------------------------------- |
| `--background` | Background of the picker |
| `--background-rgb` | Background of the picker in rgb format |
| `--border-color` | Border color of the picker |
| `--border-radius` | Border radius of the picker |
| `--border-style` | Border style of the picker |
| `--border-width` | Border width of the picker |
| `--height` | Height of the picker |
| `--max-height` | Maximum height of the picker |
| `--max-width` | Maximum width of the picker |
| `--min-height` | Minimum height of the picker |
| `--min-width` | Minimum width of the picker |
| `--width` | Width of the picker |
| Name | Description |
| -------------------- | -------------------------------------- |
| `--backdrop-opacity` | Opacity of the backdrop |
| `--background` | Background of the picker |
| `--background-rgb` | Background of the picker in rgb format |
| `--border-color` | Border color of the picker |
| `--border-radius` | Border radius of the picker |
| `--border-style` | Border style of the picker |
| `--border-width` | Border width of the picker |
| `--height` | Height of the picker |
| `--max-height` | Maximum height of the picker |
| `--max-width` | Maximum width of the picker |
| `--min-height` | Minimum height of the picker |
| `--min-width` | Minimum width of the picker |
| `--width` | Width of the picker |
## Dependencies

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

@ -104,7 +104,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, ev?: Event): IonicAnimati
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.01, 0.08);
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
wrapperAnimation
.addElement(baseEl.querySelector('.popover-wrapper')!)

2
core/src/components/popover/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.08, 0);
.fromTo('opacity', 'var(--backdrop-opacity)', 0);
wrapperAnimation
.addElement(baseEl.querySelector('.popover-wrapper')!)

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

@ -86,7 +86,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement, ev?: Event): IonicAnimatio
backdropAnimation
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', 0.01, 0.32);
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
wrapperAnimation
.addElement(baseEl.querySelector('.popover-wrapper')!)

2
core/src/components/popover/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('.popover-wrapper')!)

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

@ -8,6 +8,7 @@
--width: #{$popover-ios-width};
--max-height: #{$popover-ios-max-height};
--box-shadow: none;
--backdrop-opacity: var(--ion-backdrop-opacity, 0.08);
}
.popover-content {

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

@ -8,6 +8,7 @@
--width: #{$popover-md-width};
--max-height: #{$popover-md-max-height};
--box-shadow: #{$popover-md-box-shadow};
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}
.popover-content {

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

@ -15,6 +15,8 @@
* @prop --min-height: Minimum height of the popover
* @prop --height: Height of the popover
* @prop --max-height: Maximum height of the popover
*
* @prop --backdrop-opacity: Opacity of the backdrop
*/
--background: #{$popover-background-color};
--min-width: 0;

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

@ -156,16 +156,17 @@ Type: `Promise<void>`
## CSS Custom Properties
| Name | Description |
| -------------- | ----------------------------- |
| `--background` | Background of the popover |
| `--box-shadow` | Box shadow of the popover |
| `--height` | Height of the popover |
| `--max-height` | Maximum height of the popover |
| `--max-width` | Maximum width of the popover |
| `--min-height` | Minimum height of the popover |
| `--min-width` | Minimum width of the popover |
| `--width` | Width of the popover |
| Name | Description |
| -------------------- | ----------------------------- |
| `--backdrop-opacity` | Opacity of the backdrop |
| `--background` | Background of the popover |
| `--box-shadow` | Box shadow of the popover |
| `--height` | Height of the popover |
| `--max-height` | Maximum height of the popover |
| `--max-width` | Maximum width of the popover |
| `--min-height` | Minimum height of the popover |
| `--min-width` | Minimum width of the popover |
| `--width` | Width of the popover |
## Dependencies