_survey-page.scss

// full-page course survey styles

.view-survey {

  .container {
    padding: ($baseline*1.5) 0;
  }

  .content-primary {
    @include float(left);
    @include margin-right(flex-gutter());
    width: flex-grid(9,12);
  }

  .content-supplementary {
    @include float(left);
    width: flex-grid(3,12);
    margin-top: ($baseline*2);
  }

  .header-survey {

    .title {
      @extend %t-title4;
      @extend %t-weight4;
      margin-bottom: $baseline;
      border-bottom: 1px solid $gray-l4;
      padding-bottom: ($baseline/2);
    }

    .course-info {
      @extend %t-title;
      padding-bottom: ($baseline/4);
    }

    .course-org,
    .course-number {
      @extend %t-title8;
      display: inline-block;
      text-transform: uppercase;
      color: $gray-l1;
    }

    .course-org {
      @include margin-right($baseline/4);
    }

    .course-name {
      @extend %t-title5;
      display: block;
    }
  }

  // reset nasty LMS default styles
  form {

    h1, h2 {
      text-align: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
    }
  }

  .instructions {
    margin-bottom: $baseline;
    font-style: italic;
    @extend %t-copy-base;
  }

  .message.submission-error {
    display: block;
    margin-bottom: ($baseline);
    border-top: 3px solid $error-color;
    @include padding( ($baseline), ($baseline*1.5), ($baseline*1.5), ($baseline*1.5) );
    background-color: tint($error-color,85%);

    .message-title {
      @extend %t-title5;
      @extend %t-weight4;
      margin-bottom: ($baseline/2);
      color: $error-color;
    }

    .message-copy {
      @extend %ui-no-list;
      line-height: 1.3;

      .error-item {
        margin-bottom: ($baseline/3);
      }
    }

    &.is-hidden {
      display: none;
    }
  }

  .list-input {
    @extend %ui-no-list;

    .field {
      margin-bottom: $baseline;

      &.required label:after {
        content: "*";
        @include margin-left($baseline/4);
      }

      .tip {
        @extend %t-copy-sub2;
        display: block;
        margin-top: ($baseline/4);
        color: $gray;
      }

      &.is-focused {

        .tip {
          color: $base-font-color;
        }
      }
    }
  }

  .action-primary {
    @extend %m-btn-primary;
    @extend %t-copy-base;
    @include padding-left($baseline*2);
  }

  .action-cancel {
    @extend %t-copy-sub1;
    @include margin-left($baseline);
  }

  // override basic label styles
  label {
    @extend %t-copy-base;
    @extend %t-weight4;
    display: block;
    font-style: normal;
  }

  // override basic form input styles
  button, input, select, textarea {
    @extend %t-copy-sub1;
  }

  .bit {
    margin-bottom: $baseline;

    .title {
      @extend %t-title7;
      @extend %t-weight4;
    }

    p {
      @extend %t-copy-sub1;
      color: $gray;
    }
  }
}