Files
Brandy Carney bd22926c49 feat(overlays): add global backdrop opacity variable for animations (#19533)
adds `--backdrop-opacity` to all overlays and `--ion-backdrop-opacity` for global control

closes #16446
2019-10-10 14:34:16 -04:00

46 lines
1.1 KiB
SCSS

@import "./loading";
@import "./loading.ios.vars";
// iOS Loading Indicator
// --------------------------------------------------
:host {
--background: #{$loading-ios-background-color};
--max-width: #{$loading-ios-max-width};
--max-height: #{$loading-ios-max-height};
--spinner-color: #{$loading-ios-spinner-color};
--backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
color: $loading-ios-text-color;
font-size: $loading-ios-font-size;
}
.loading-wrapper {
@include border-radius($loading-ios-border-radius);
@include padding($loading-ios-padding-top, $loading-ios-padding-end, $loading-ios-padding-bottom, $loading-ios-padding-start);
}
// iOS Translucent Loading
// -----------------------------------------
@supports (backdrop-filter: blur(0)) {
:host(.loading-translucent) .loading-wrapper {
background-color: $loading-ios-translucent-background-color;
backdrop-filter: $loading-ios-translucent-filter;
}
}
// iOS Loading Content
// -----------------------------------------
.loading-content {
font-weight: $loading-ios-content-font-weight;
}
.loading-spinner + .loading-content {
@include margin-horizontal(16px, null);
}