I have created a list of two cards, when i apply the css effects to it, it show a line in the bottom border that i cant get rid of it
<ion-card class="size1">
<ion-item href="/home" routerDirection="forward" class="item">
<ion-label>Menu</ion-label>
</ion-item>
</ion-card>
.font{
--ion-font-family: 'NunitoSans';
}
.size1{
--ion-font-size: 115%;
--ion-font-family: 'NunitoSans';
background-color: var(--ion-color-step-800);
}
ion-list{
--ion-background-color: transparent;
}
.item{
color: var(--ion-color-step-150); // to override global variable, dont use --ion
ion-label{
font-weight: bold;
}
}
ion-card{
background-color: var(--ion-color-light);
box-shadow: 3px 3px 10px var(--ion-color-light-tint);
}
}
It is inside the app component, so these are in the variable .scss, it’s the side menu component.