0
0
mirror of https://github.com/wagtail/wagtail.git synced 2024-12-01 11:41:20 +01:00
wagtail/client/scss/components/_loading-mask.scss
Thibaud Colas af942a27e4
Reformat codebase with Prettier (#7912)
- Automated reformatting
- Manually change code where Prettier reformatting causes issues
- Revert "Disable Prettier formatting in CI for now"
2022-02-04 11:57:55 +00:00

38 lines
779 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;
left: -5px;
bottom: -5px;
right: -5px;
z-index: 1;
background-color: rgba(255, 255, 255, 0.5);
}
&:after {
font-size: 30px;
width: 30px;
line-height: 30px;
left: 50%;
top: 50%;
margin: -15px 0 0 -15px;
font-family: $font-wagtail-icons;
animation: spin-wag 0.5s infinite linear;
content: map.get($icons, 'spinner');
z-index: 2;
color: $color-teal;
}
}
}