edx-platform/cms/static/sass/_settings.scss

// Studio - Course Settings
// ====================
body.course.settings {

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

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

  .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 {
        @include font-size(13);
        width: flex-grid(5, 9);
        float: right;
        margin-top: ($baseline/2);
        text-align: right;
        color: $gray-l2;
      }
    }

    // basic layout/elements
    .title-2 {

    }

    .title-3 {

    }

    // UI hints/tips/messages
    .tip {
      @include transition(color, 0.15s, ease-in-out);
      @include font-size(13);
      display: block;
      margin-top: ($baseline/4);
      color: $gray-l3;
    }

    .message-error {
      @include font-size(13);
      display: block;
      margin-top: ($baseline/4);
      margin-bottom: ($baseline/2);
      color: $red;
    }

    // buttons
    .remove-item {
      @include white-button;
      @include font-size(13);
      font-weight: 400;
    }

    .new-button {
      @include font-size(13);
    }

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

      .field {
        margin: 0 0 $baseline 0;

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

        &.required {

          label {
            font-weight: 600;
          }

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

        label, input, textarea {
          display: block;
        }

        label {
          @include font-size(14);
          @include transition(color, 0.15s, ease-in-out);
          margin: 0 0 ($baseline/4) 0;
          font-weight: 400;

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

        input, textarea {
          @include placeholder($gray-l4);
          @include font-size(16);
          @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);
          @include 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;
      }
    }

    // not editable fields
    .field.is-not-editable {

      label, .label {
        color: $gray-l3;
      }

      input {
        opacity: 0.25;
      }
    }

    // field with error
    .field.error {

      input, textarea {
        border-color: $red;
      }
    }
     
    // specific fields - basic
    &.basic {

      .list-input {
        @include clearfix();

        .field {
          margin-bottom: 0;
        }
      }

      #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);
      }
    }

    // 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);
      }
    }

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

      .input-existing {
        @include box-sizing(border-box);
        @include 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 - 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));
        @include 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;
              @include 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;
                @include 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;
        }
      }
    }
  }

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

  .settings-advanced {

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

      .CodeMirror-scroll {
        height: auto;
        min-height: 20px;
        max-height: 200px;
      }

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

        .cm-string {
          color: #cb9c40;
        }

        pre {
          margin-bottom: 5px;
        }
      }
    }

    // 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;
      }
    }

    .course-advanced-policy-list {

      .row {
        @include clearfix();

      }

      .key, .value {
        margin: 0;
        border: none;
        padding: 0;

        // existing fields
        &.existing {

          input, textarea {
            color: $mediumGrey;
          }
        }
      }

      .key {
        float: left;
        width: 30%;
        margin-right: 5px;

        .field {

          input {
            width: 100%;
          }

          .tip {
            @include transition (opacity 0.5s ease-in-out 0s);
            opacity: 0;
            position: absolute;
            bottom: 25px;
          }

          input:focus {

            & + .tip {
              opacity: 1.0;
            }
          }

          input.error {

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

      .value {
        float: right;
        width: 65%;

        .field {

          textarea {
            width: 100%;
            height: 100px;
          }
        }
      }

      .message-error {
        position: absolute;
        bottom: 10px;
        margin: 0 0 10px 0;
      }
    }

    .course-advanced-policy-list-item {
      position: relative;
    }

    .actions {
      @include clearfix();
      margin-top: 15px;
      border-top: 1px solid $lightGrey;
      padding-top: 15px;

      .save-button {
        float: left;
        @include blue-button;
        margin-right: 10px;
        padding-top: 8px;
        padding-bottom: 8px;
      }

      .cancel-button {
        float: left;
        @include white-button;
        margin-top: 4px;
      }

      .new-button {
        float: right;
      }
    }
  }
}