_loading-mask.scss 902 B

123456789101112131415161718192021222324252627282930313233343536
  1. // Loading mask: overlays a certain area with a loading spinner and a faded out cover to prevent interaction
  2. .loading-mask {
  3. &.loading {
  4. position: relative;
  5. &:before,
  6. &:after {
  7. position: absolute;
  8. display: block;
  9. }
  10. &:before {
  11. content: '';
  12. top: -5px;
  13. left: -5px;
  14. bottom: -5px;
  15. right: -5px;
  16. z-index: 1;
  17. background-color: rgba(255, 255, 255, 0.5);
  18. }
  19. &:after {
  20. font-size: 30px;
  21. width: 30px;
  22. line-height: 30px;
  23. left: 50%;
  24. top: 50%;
  25. margin: -15px 0 0 -15px;
  26. font-family: wagtail;
  27. animation: spin 0.5s infinite linear;
  28. content: map-get($icons, 'spinner');
  29. z-index: 2;
  30. color: $color-teal;
  31. }
  32. }
  33. }