93 lines
2.4 KiB
SCSS
93 lines
2.4 KiB
SCSS
@import "~theme/globals";
|
|
|
|
:host {
|
|
--loading-background: var(--ion-background-color);
|
|
--loading-background-inline: var(--ion-background-color-rgb);
|
|
--loading-spinner: var(--core-loading-spinner);
|
|
--loading-text-color: var(--ion-text-color);
|
|
--loading-inline-margin: 0px;
|
|
--loading-inline-min-height: 28px;
|
|
--internal-loading-inline-min-height: var(--loading-inline-min-height);
|
|
|
|
position: static;
|
|
color: var(--loading-text-color);
|
|
@include core-transition(all, 200ms);
|
|
|
|
&.margin {
|
|
--loading-inline-margin: 10px;
|
|
--internal-loading-inline-min-height: calc(var(--loading-inline-min-height) + var(--loading-inline-margin) + var(--loading-inline-margin));
|
|
}
|
|
|
|
&.core-loading-loaded {
|
|
--internal-loading-inline-min-height: 0px;
|
|
}
|
|
|
|
ion-spinner {
|
|
--color: var(--loading-spinner);
|
|
color: var(--color);
|
|
}
|
|
|
|
.core-loading-container {
|
|
position: absolute;
|
|
@include position(0, 0, 0, 0);
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 3;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--loading-background);
|
|
@include core-transition(all, 200ms);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.core-loading-content {
|
|
@include core-transition(opacity, 200ms);
|
|
}
|
|
|
|
.core-loading-message {
|
|
@include margin(10px, 0, 0, 0);
|
|
}
|
|
|
|
&.core-loading-loaded {
|
|
position: unset;
|
|
display: contents;
|
|
}
|
|
|
|
&.core-loading-inline {
|
|
--loading-background: rgba(var(--loading-background-inline), 0.5);
|
|
position: relative;
|
|
display: block;
|
|
min-height: var(--internal-loading-inline-min-height);
|
|
|
|
.core-loading-message {
|
|
@include margin(0, 0, 0, 10px);
|
|
}
|
|
|
|
.core-loading-container {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
&.safe-area-padding:not(.core-loading-inline) .core-loading-content,
|
|
&.safe-area-padding-horizontal:not(.core-loading-inline) .core-loading-content {
|
|
@include safe-area-padding-horizontal(0px, 0px);
|
|
}
|
|
|
|
&.safe-area-padding:not(.core-loading-inline) .core-loading-content {
|
|
padding-bottom: var(--ion-safe-area-bottom);
|
|
> * {
|
|
--ion-safe-area-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
:host-context(ion-item) {
|
|
&.core-loading-inline {
|
|
position: static;
|
|
display: block;
|
|
}
|
|
}
|