sparkletown/sparkle

View on GitHub
src/components/molecules/FormCover/FormCover.scss

Summary

Maintainability
Test Coverage
@import "scss/constants";

@keyframes loadingspin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

$icon-size: font-size--root(10);

.FormCover {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  position: relative;

  &__overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 1;
    background-color: var(--content--over-20a);
    border-radius: $border-radius--sm;
    cursor: wait;
    display: grid;
    place-content: center;
  }

  &__spinner {
    width: $icon-size;
    height: $icon-size;

    animation: loadingspin 1.5s infinite linear;
  }
}