Popover options not taking effect

Hi guys,
-> Ionic v3 with cordova
I’m working on an app in which a calendar is presented in a popover.
Long story short i’m trying to customize my popover to simply take up the upper half of the screen.
The code for my popover.present is as follows:

let popover = this.popoverCtrl.create(CalendarPopoverPage, {}, {
            cssClass: 'calendarPopover'
        });
        popover.present({
            ev: myEvent
        });

When i set these sass variables i get my desired effect, but i don’t want to apply them globally, so im trying to get my custom class to work:

$popover-md-width: 98%;
$popover-ios-width: 98%;
$popover-wp-width: 98%;

$popover-md-min-height: wrap;
$popover-ios-min-height: wrap;
$popover-wp-min-height: wrap;

This is the custom class i implemented to start:
 .calendarPopover .popover{
    width: 100% !important;
    height: 100%;
    max-height: 100% !important;
  }

I’ve also tried many other variations to implement the class and no luck. ive spent hours on this and nothing Any help would really be greatly appreciated. I imagine its something small that im missing?

Thanks in advance!!