mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-25 13:10:14 +01:00
38 lines
846 B
SCSS
38 lines
846 B
SCSS
@use 'sass:map';
|
|
// Loading mask: overlays a certain area with a loading spinner and a faded out cover to prevent interaction
|
|
.loading-mask {
|
|
&.loading {
|
|
position: relative;
|
|
|
|
&:before,
|
|
&:after {
|
|
position: absolute;
|
|
display: block;
|
|
}
|
|
|
|
&:before {
|
|
content: '';
|
|
top: -5px;
|
|
inset-inline-start: -5px;
|
|
bottom: -5px;
|
|
inset-inline-end: -5px;
|
|
z-index: 1;
|
|
background-color: theme('colors.white-50');
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
width: 1.875rem;
|
|
height: 1.875rem;
|
|
inset-inline-start: 50%;
|
|
top: 50%;
|
|
animation: spin-wag 0.5s infinite linear;
|
|
mask-image: url('#{$images-root}icons/spinner.svg');
|
|
mask-repeat: no-repeat;
|
|
z-index: 2;
|
|
background: theme('colors.surface-button-default');
|
|
}
|
|
}
|
|
}
|