sparkletown/sparkle

View on GitHub
src/components/organisms/ScreeningRoomVideoAddEditForm/ScreeningRoomVideoAddEditForm.scss

Summary

Maintainability
Test Coverage
@import "scss/constants";

$image-container-height: 200px;

.ScreeningRoomVideoAddEditForm {
  &__title,
  &__description {
    margin-top: $spacing--xl;
    margin-bottom: $spacing--xl;
    text-align: center;
    font-size: $font-size--xl;
    font-weight: $font-weight--600;
  }

  &__poster {
    width: 100%;
    height: 100%;
    border: $border-width--bold solid var(--content--over-20a);
    border-radius: $border-radius--md;
  }

  &__buttons {
    margin-top: $spacing--lg;
    display: flex;
    justify-content: center;
  }

  &__form {
    .AdminSection {
      &__label {
        display: flex;
        flex-direction: column;

        .ImageInput__container {
          position: relative;
          width: 50%;
          margin-bottom: -($spacing--lg);
          align-self: center;
          height: $image-container-height;

          &.mod--hidden {
            height: 0;
            padding: 0;
            margin: 0;
          }
        }
      }
    }
  }

  .InputField {
    margin: font-size--parent(3) 0;
  }
}