_settings.scss

// studio - views - course settings
// ====================

.view-settings {

  .content-primary, .content-supplementary {
    @include box-sizing(border-box);
    float: left;
  }

  .content-primary {
    @extend %ui-window;
    width: flex-grid(9, 12);
    margin-right: flex-gutter();
    padding: $baseline ($baseline*1.5);
  }

  // messages - should be synced up with global messages in the future
  .message {
    display: block;
    font-size: 14px;
  }

  .message-status {
    display: none;
    @include border-top-radius(2px);
    @include box-sizing(border-box);
    border-bottom: 2px solid $yellow;
    margin: 0 0 20px 0;
    padding: 10px 20px;
    font-weight: 500;
    background: $paleYellow;

    .text {
      display: inline-block;
    }

    &.error {
      border-color: shade($red, 50%);
      background: tint($red, 20%);
      color: $white;
    }

    &.confirm {
      border-color: shade($green, 50%);
      background: tint($green, 20%);
      color: $white;
    }

    &.is-shown {
      display: block;
    }
  }

  // notices - used currently for edx mktg
  .notice-workflow {
    margin-top: ($baseline);
  }


  // in form - elements
  .group-settings {
    margin: 0 0 ($baseline*2) 0;

    header {
      @include clearfix();

      .title-2 {
        width: flex-grid(4, 9);
        margin: 0 flex-gutter() 0 0;
        float: left;
      }

      .tip {
        @extend %t-copy-sub2;
        width: flex-grid(5, 9);
        float: right;
        margin-top: ($baseline/2);
        text-align: right;
        color: $gray-l2;
      }
    }

    // basic layout/elements
    .title-2 {

    }

    .title-3 {

    }

    // in form  -UI hints/tips/messages
    .instructions {
      @extend %t-copy-sub1;
      margin: 0 0 $baseline 0;
    }

    .tip {
      @extend %t-copy-sub2;
      @include transition(color $tmg-f2 ease-in-out 0s);
      display: block;
      margin-top: ($baseline/4);
      color: $gray-l3;
    }

    .message-error {
      @extend %t-copy-sub1;
      display: block;
      margin-top: ($baseline/4);
      margin-bottom: ($baseline/2);
      color: $red;
    }

    // buttons
    .remove-item {
      @include white-button;
      @extend %t-action3;
      font-weight: 400;
    }

    .new-button {
      // @extend %t-action3; - bad buttons won't render this properly
      @include font-size(14);
    }

    // form basics
    .list-input {
      margin: 0;
      padding: 0;
      list-style: none;

      .field {
        margin: 0 0 ($baseline*2) 0;

        &:last-child {
          margin-bottom: 0;
        }

        &.required {

          label {
            font-weight: 600;
          }

          label:after {
            margin-left: ($baseline/4);
            content: "*";
          }
        }

        label, input, textarea {
          display: block;
        }

        label {
          @extend %t-copy-sub1;
          @include transition(color $tmg-f2 ease-in-out 0s);
          margin: 0 0 ($baseline/4) 0;
          font-weight: 400;

          &.is-focused {
            color: $blue;
          }
        }

        input, textarea {
          @extend %t-copy-base;
          @include placeholder($gray-l4);
          @include size(100%,100%);
          padding: ($baseline/2);

          &.long {
          }

          &.short {
          }

          &.error {
            border-color: $red;
          }

          &:focus {

            + .tip {
              color: $gray;
            }
          }
        }

        textarea.long {
          height: ($baseline*5);
        }

        input[type="checkbox"] {
          display: inline-block;
          margin-right: ($baseline/4);
          width: auto;
          height: auto;

          & + label {
            display: inline-block;
          }
        }
      }

      .field-group {
        @include clearfix();
        margin: 0 0 ($baseline/2) 0;
      }

      // enumerated/grouped lists
      &.enum {

        .field-group {
          @include box-sizing(border-box);
          border-radius: 3px;
          background: $gray-l5;
          padding: $baseline;

          &:last-child {
            padding-bottom: $baseline;
          }

          .actions {
            @include clearfix();
            margin-top: ($baseline/2);
            border-top: 1px solid $gray-l4;
            padding-top: ($baseline/2);

            .remove-item {
              float: right;
            }
          }
        }
      }
    }

    // existing inputs
    .input-existing {
      margin: 0 0 $baseline 0;

      .actions {
        margin: ($baseline/4) 0 0 0;
      }
    }

    // specific fields - basic
    &.basic {

      .list-input {
        @include clearfix();
        padding: 0 ($baseline/2);

        .field {
          margin-bottom: 0;
        }
      }

      // course details that should appear more like content than elements to change
      .field.is-not-editable {

        label {

        }

        input, textarea {
          @extend %t-copy-lead1;
          box-shadow: none;
          border: none;
          background: none;
          padding: 0;
          margin: 0;
          font-weight: 600;
        }
      }

      #field-course-organization {
        float: left;
        width: flex-grid(2, 9);
        margin-right: flex-gutter();
      }

      #field-course-number {
        float: left;
        width: flex-grid(2, 9);
        margin-right: flex-gutter();
      }

      #field-course-name {
        float: left;
        width: flex-grid(5, 9);
      }

      // course link note
      .note-promotion-courseURL {
        box-shadow: 0 2px 1px $shadow-l1;
        border-radius: ($baseline/5);
        margin-top: ($baseline*1.5);
        border: 1px solid $gray-l2;
        padding: ($baseline/2) 0 0 0;

        .title {
          @extend %t-copy-sub1;
          margin: 0 0 ($baseline/10) 0;
          padding: 0 ($baseline/2);

          .tip {
            display: inline;
            margin-left: ($baseline/4);
          }
        }

        .copy {
          padding: 0 ($baseline/2) ($baseline/2) ($baseline/2);

          .link-courseURL {
            @extend %t-copy-lead1;
            @include box-sizing(border-box);
            display: block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            &:hover {

            }
          }
        }

        .list-actions {
          box-shadow: inset 0 1px 1px $shadow-l1;
          border-top: 1px solid $gray-l2;
          padding:  ($baseline/2);
          background: $gray-l5;

          .action-primary {
            @include blue-button();
            @extend %t-action3;
            font-weight: 600;

            [class^="icon-"] {
              @extend %t-icon5;
              display: inline-block;
              vertical-align: middle;
              margin-top: -3px;
            }
          }
        }
      }
    }

    // specific fields - schedule
    &.schedule {

      .list-input {
        margin-bottom: ($baseline*1.5);

        &:last-child {
          margin-bottom: 0;
        }
      }

      .field-group {
        @include clearfix();
        border-bottom: 1px solid $gray-l5;
        padding-bottom: ($baseline/2);

        &:last-child {
          border: none;
          padding-bottom: 0;
        }

        .field {
          float: left;
          width: flex-grid(3, 9);
          margin-bottom: ($baseline/4);
          margin-right: flex-gutter();
        }

        .field.time {
          position: relative;

          .tip {
            position: absolute;
            top: 0;
            right: 0;
          }
        }
      }
    }

    // specific fields - overview
    #field-course-overview {

      #course-overview {
        height: ($baseline*20);
      }

      //adds back in CodeMirror border removed due to Unit page styling of component editors
      .CodeMirror {
        border: 1px solid $gray-l2;
      }
    }

    // specific fields - video
    #field-course-introduction-video {

      .input-existing {
        @include box-sizing(border-box);
        border-radius: 3px;
        background: $gray-l5;
        padding: ($baseline/2);

        .actions {
          @include clearfix();
          margin-top: ($baseline/2);
          border-top: 1px solid $gray-l4;
          padding-top: ($baseline/2);

          .remove-item {
            float: right;
          }
        }
      }

      .actions {
        margin-top: ($baseline/2);
        border-top: 1px solid $gray-l5;
        padding-top: ($baseline/2);
      }
    }

    // specific fields - course image
    #field-course-image {

      .current-course-image {
        margin-bottom: ($baseline/2);
        padding: ($baseline/2) $baseline;
        background: $gray-l5;
        text-align: center;

        .wrapper-course-image {
          display: block;
          width: 375px;
          height: 200px;
          overflow: hidden;
          margin: 0 auto;
          border: 1px solid $gray-l4;
          box-shadow: 0 1px 1px $shadow-l1;
          padding: ($baseline/2);
          background: $white;
        }

        .course-image {
          display: block;
          width: 100%;
          min-height: 100%;
        }

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

      .wrapper-input {
        @include clearfix();
        width: flex-grid(9,9);

        .input {
          float: left;
          width: flex-grid(6,9);
          margin-right: flex-gutter();
        }

        .action-upload-image {
          @extend %ui-btn-flat-outline;
          float: right;
          width: flex-grid(2,9);
          margin-top: ($baseline/4);
          padding: ($baseline/2) $baseline;
        }
      }
    }

    // specific fields - requirements
    &.requirements {

      #field-course-effort {
        width: flex-grid(3, 9);
      }
    }

    // specific fields - grading range (artifact styling)
    &.grade-range {
      margin-bottom: ($baseline*3);

      .grade-controls {
        @include clearfix();
        width: flex-grid(9,9);
      }

      .new-grade-button {
        @include box-sizing(border-box);
        @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
        box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
        width: flex-grid(1,9);
        height: ($baseline*2);
        position: relative;
        display: inline-block;
        vertical-align: middle;
        margin-right: flex-gutter();
        border-radius: 20px;
        border: 1px solid $darkGrey;
        background-color: #d1dae3;
        color: #6d788b;

        .plus-icon {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -6px;
          margin-top: -6px;
        }
      }

      .grade-slider {
        @include box-sizing(border-box);
        width: flex-grid(8,9);
        display: inline-block;
        vertical-align: middle;

        .grade-bar {
          position: relative;
          width: 100%;
          height: ($baseline*2.5);
          background: $lightGrey;

          .increments {
            position: relative;

            li {
              position: absolute;
              top: 52px;
              width: 30px;
              margin-left: -15px;
              font-size: 9px;
              text-align: center;

              &.increment-0 {
                left: 0;
              }

              &.increment-10 {
                left: 10%;
              }

              &.increment-20 {
                left: 20%;
              }

              &.increment-30 {
                left: 30%;
              }

              &.increment-40 {
                left: 40%;
              }

              &.increment-50 {
                left: 50%;
              }

              &.increment-60 {
                left: 60%;
              }

              &.increment-70 {
                left: 70%;
              }

              &.increment-80 {
                left: 80%;
              }

              &.increment-90 {
                left: 90%;
              }

              &.increment-100 {
                left: 100%;
              }
            }
          }

          .grade-specific-bar {
            height: 50px !important;
          }

          .grades {
            position: relative;

            li {
              position: absolute;
              top: 0;
              height: 50px;
              text-align: right;
              border-radius: 2px;

              &:hover,
              &.is-dragging {
                .remove-button {
                  display: block;
                }
              }

              &.is-dragging {

              }

              .remove-button {
                display: none;
                position: absolute;
                top: -17px;
                right: 1px;
                height: 17px;
                font-size: 10px;
              }

              &:nth-child(1) {
                background: #4fe696;
              }

              &:nth-child(2) {
                background: #ffdf7e;
              }

              &:nth-child(3) {
                background: #ffb657;
              }

              &:nth-child(4) {
                background: #ef54a1;
              }

              &:nth-child(5),
              &.bar-fail {
                background: #fb336c;
              }

              .letter-grade {
                display: block;
                margin: 10px 15px 0 0;
                font-size: 16px;
                font-weight: 700;
                line-height: 14px;
              }

              .range {
                display: block;
                margin-right: 15px;
                font-size: 10px;
                line-height: 12px;
              }

              .drag-bar {
                position: absolute;
                top: 0;
                right: -1px;
                height: 50px;
                width: 2px;
                background-color: #fff;
                box-shadow: -1px 0 3px rgba(0,0,0,0.1);

                cursor: ew-resize;
                @include transition(none);

                &:hover {
                  width: 6px;
                  right: -2px;
                }
              }
            }
          }
        }
      }
    }

    // specific fields - grading rules
    &.grade-rules {

      #field-course-grading-graceperiod {
        width: flex-grid(3, 9);
      }
    }

    &.assignment-types {

      .list-input {

        &:last-child {
          margin-bottom: 0;
        }
      }

      .field-group {
        @include clearfix();
        width: flex-grid(9, 9);
        margin-bottom: ($baseline*1.5);
        border-bottom: 1px solid $gray-l5;
        padding-bottom: ($baseline*1.5);

        &:last-child {
          border: none;
          padding-bottom: 0;
        }

        .field {
          display: inline-block;
          vertical-align: top;
          width: flex-grid(3, 6);
          margin-bottom: ($baseline/2);
          margin-right: flex-gutter();
        }

        #field-course-grading-assignment-shortname,
        #field-course-grading-assignment-totalassignments,
        #field-course-grading-assignment-gradeweight,
        #field-course-grading-assignment-droppable {
          width: flex-grid(2, 6);
        }
      }

      .actions {
        float: left;
        width: flex-grid(9, 9);

        .delete-button {
          margin: 0;
        }
      }
    }

    // specific fields - advanced settings
    &.advanced-policies {

      .field-group {
        margin-bottom: ($baseline*1.5);

        &:last-child {
          border: none;
          padding-bottom: 0;
        }
      }

      .course-advanced-policy-list-item {
        @include clearfix();
        position: relative;

        .field {

          input {
            width: 100%;
          }

          .tip {
            @include transition(opacity $tmg-f1 ease-in-out 0s);
            opacity: 0.0;
            position: absolute;
            bottom: ($baseline*1.25);
          }

          input:focus {

            & + .tip {
              opacity: 1.0;
            }
          }

          input.error {

            & + .tip {
              opacity: 0.0;
            }
          }
        }

        .key, .value {
          float: left;
          margin: 0 0 ($baseline/2) 0;
        }

       .key {
         width: flex-grid(3, 9);
         margin-right: flex-gutter();
        }

        .value {
          width: flex-grid(6, 9);
        }

        .actions {
          float: left;
          width: flex-grid(9, 9);

          .delete-button {
            margin: 0;
          }
        }
      }

      .message-error {
        position: absolute;
        bottom: ($baseline*0.75);
      }

      // specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs
      .CodeMirror {
        @extend %t-copy-base;
        @include box-sizing(border-box);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
        @include linear-gradient($lightGrey, tint($lightGrey, 90%));
        padding: 5px 8px;
        border: 1px solid $mediumGrey;
        border-radius: 2px;
        background-color: $lightGrey;
        font-family: 'Open Sans', sans-serif;
        color: $baseFontColor;
        outline: 0;
        height: auto;
        min-height: ($baseline*2.25);
        max-height: ($baseline*10);

        &.CodeMirror-focused {
          @include linear-gradient($paleYellow, tint($paleYellow, 90%));
          outline: 0;
        }

        // editor color changes just for JSON
        .CodeMirror-lines {

          .cm-string {
            color: #cb9c40;
          }

          pre {
            line-height: 2.0rem;
          }
        }
      }
    }
  }

  .content-supplementary {
    width: flex-grid(3, 12);
  }
}