18F/e-QIP-prototype

View on GitHub
src/components/Form/Introduction/Introduction.scss

Summary

Maintainability
Test Coverage
.introduction-modal {
  z-index: 9999;

  &.closeable {
    .modal {
      .introduction-content {
        position: relative;

        @media only screen and (max-height: 800px) {
          height: 100vh;
          margin-top: 5vh !important;
          margin-bottom: 5vh !important;
        }

        .introduction-legal {
          max-height: 90vh;
        }

        .modal-close {
          position: absolute;
          top: -1.5rem;
          right: -1rem;
        }
      }
    }
  }

  .modal {
    .introduction-content {
      max-width: 100rem;
      padding: 2rem;
      border: none;
      box-shadow: none;
      margin-bottom: 2rem;
      margin-top: 5vh !important;

      h2 {
        margin-top: 0;
        margin-bottom: 2rem;
      }

      .introduction-legal {
        overflow-y: scroll;
        max-height: 55vh;
        padding: 3rem;
        border: 2px solid $eapp-grey;
        box-shadow: inset 0 11px 8px -10px #ccc, inset 0 -11px 8px -10px #ccc;

        @media all and (max-width: 980px) {
          box-shadow: none;
        }

        hr {
          margin-top: 4rem;
        }

        div:nth-child(3) {
          padding-top: 1rem;
        }
        div:nth-child(9) {
          padding-top: 4rem;
        }
      }

      .introduction-acceptance {
        padding: 0;
        margin-top: 3rem;
      }

      .field {
        .title {
          max-width: initial;
        }

        .table > .content > .component > div {
          max-width: initial;
        }
      }
    }
  }
}

.introduction-acceptance {
  .blocks.option-list .block {
    width: 15rem;
    text-align: center;

    label {
      background-color: $color-white;
      border: 2px solid $color-primary;
      color: $color-primary;
      font-weight: 900;

      span {
        margin-left: 0;
      }
    }

    label:before {
      display: none;
    }
  }
}