Ion-modal width

Ionic Framework Ionic Angular
1

Where the hell are we supposed to set those css custom properties?

CSS Custom Properties
|--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|

i tried in the app.component.scss, variables.scss and global.scss… nothing works

2

I pass a css class (cssClass) when creating the modal. then adjust size in global.scss.

....modalProvider.create({
cssClass: 'customModal'
....
})

global.scss

customModal {
  modal-wrapper {
    width:90%;
    ...
  }
}
3

Thx this works.
Once again, shadow DOM makes me loose a day of research because of lack of documentation, poor implementation.

4

In VueJS this works a treat:

Vue

<ion-modal class="messages">

CSS

ion-modal.messages {
  --width: 61.8%;
  --height: 81.6%;
}