Ion-segment-button transparency issues

Ionic Framework Ionic Angular
1

I have a few pages that use the Ion-segment-button components. We’ve been updating our ionic library to v5 and it seems making the ion-segment-buttons transparent has changed…

image

HTML:

<ion-header class="pageWorkSchedule">
  <ion-toolbar>
      <ion-buttons slot="start">
        <ion-back-button defaultHref="home"></ion-back-button>
      </ion-buttons>
      <ion-buttons slot="end">
      <button ion-button icon-only style="background:transparent; border:none; color:black;" (click)="showLegend($event)">
        <ion-icon md="ellipsis-horizontal" ios="ellipsis-vertical"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Work Schedule</ion-title>
  </ion-toolbar>
  <ion-toolbar mode="md">
    <ion-segment class="ion-segment-button" [(ngModel)]="tabSelected" (ionChange)="segmentChanged($event)" mode="md">
      <ion-segment-button class="ion-segment-button" value="current" checked>
        <ion-label>Current</ion-label>
      </ion-segment-button>
      <ion-segment-button class="ion-segment-button" value="future">
        <ion-label>Future</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>
<ion-content class="pageWorkSchedule" >
    <div ion-fixed class="scroll-content">
      <ion-slides class="swiper-no-swiping slideAsTab">
          <ion-slide>
              <div *ngIf="schedule">
                  <ion-card style="margin-right:25px; border-radius:0px" *ngFor="let currentSchedule of schedule.current">
                      <ion-card-content>
                        <work-schedule-card [schedule]="currentSchedule"></work-schedule-card>
                      </ion-card-content>
                  </ion-card>
              </div>
          </ion-slide>
          <ion-slide>
              <div *ngIf="schedule">
                  <ion-card style="margin-right:25px; border-radius:0px" *ngFor="let futureSchedule of schedule.future">
                      <ion-card-content>
                        <work-schedule-card [schedule]="futureSchedule"></work-schedule-card>
                      </ion-card-content>
                  </ion-card>
              </div>
          </ion-slide>
      </ion-slides>
    </div>
</ion-content>

CSS:

@import "../../../theme/variables";


.pageWorkSchedule {
  --background: url('../../../assets/imgs/MainBackground.png') no-repeat center center fixed;
    .scroll-content{
        border-top: none !important;
        --indicator-color : transparent!important;
    }

    .segment-button-checked{
        background: transparent !important;
        color: var(--ion-color-primary) !important;
        border-bottom: 3px solid var(--ion-color-primary) !important;
        --indicator-color : transparent!important;
    }

    .ion-segment-button{
        color: $emaGray;
        --indicator-color: transparent;
        border-bottom: 3px solid $emaGray !important;
        background:transparent !important;
        background-color:transparent !important;
        --background-checked: transparent !important;
        --color-checked: transparent !important;
        --indicator-color : transparent!important;
        font-size: 16px;
        color: var(--ion-color-medium);
        border: 0px;
        border-radius: 0px;
        --indicator-color : transparent!important;
    }
    }



    .segment-button-checked{
        color: $emaSmoke !important;
        border-bottom: 3px solid $emaSmoke !important;
        --indicator-color : transparent!important;
    }