Ionic LoadingController css
custom this color in your src/theme/variables.scss
available variables: https://ionicframework.com/docs/api/components/loading/LoadingController/#sass-variables
$loading-ios-background: transparent;
$loading-md-background: $loading-ios-background;
$loading-wp-background: $loading-ios-background;
to remove box-shadow on android, add one more variable:
$loading-md-box-shadow: none;
or add your class to cssClass
:
this.loading = this.loadingCtrl.create({
content: '',
spinner: 'dots',
cssClass: 'my-loading-class'
});
and style:
============================
UPDATE: IONIC 3
ion-loading.my-loading-class {
.loading-wrapper {
background: transparent;
box-shadow: none;
}
}
============================
IONIC 2
.loading-ios,
.loading-md,
.loading-wp {
.my-loading-class {
background-color: transparent;
box-shadow: none;
}
}
Ionic modal doesn't take class in global.scss
global.scss
ion-modal#ride-time {
--background: rgba(0, 0, 0, 0.2);
&::part(content) {
backdrop-filter: blur(6px);
width: 100%;
height: 100%;
}
app-time-picker {
background: transparent;
padding-top: 50%;
padding-block-start: 50%;
padding-left: 10%;
padding-right: 10%;
}
}
ts:
async openTime(componentProps) {
const options: ModalOptions = {
id: 'ride-time',
keyboardClose: true,
component: TimePickerPage,
componentProps: componentProps,
};
const modal = await this.modalCtrl.create(options);
return modal;
}
the way to target has changed, now you need to use shadow parts to achieve what u want..
Ionic 3 alertCtrl custom cssClass not working
It is working fine.You just need to declare it inside the app.scss
file.
app.scss
.profalert{
color:#e7333c;
background-color: red;
}
Result:
When I applied your style to my app's alert box:
Related Topics
How to Center One of the Flex/Grid Children(More Than Three) and with Different Widths
How to Set a Rotation Point for an Element in CSS
Is There a Specific Order for CSS Properties
CSS - Calc() on Font-Size - Changing Font Size Based on Container Size
Keyframe Animation Does Not Work on Safari for iOS
CSS Parallax Working Beautifully in Chrome But Not Firefox
Margin:Auto Not Working Vertically
How to Detect Broken/Unloaded (Error) Images with CSS
How to Vertically Centralize a Bootstrap V4 Modal with CSS
Specifying Different Font-Sizes for Different Font-Families
Pseudo Element Not Aligning at Top Left Corner
Scale Element in X and Y by the Same Amount of Pixels
How to Extend a Class from a CSS File in SASS