Merge pull request #1833 from MITx/feature/btalbot/studio-courselink

Feature/btalbot/studio courselink

cms/static/sass/elements/_controls.scss

@@ -97,7 +97,7 @@
   color: $blue;
 
   &:hover, &:active {
-    background: $blue-l3;
+    background: $blue-l4;
     color: $blue-s2;
   }
 

cms/static/sass/elements/_forms.scss

@@ -8,11 +8,11 @@ input[type="password"],
 textarea.text {
   padding: 6px 8px 8px;
   @include box-sizing(border-box);
-  border: 1px solid $mediumGrey;
+  border: 1px solid $gray-l2;
   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);
+  @include linear-gradient($gray-l5, $white);
+  background-color: $gray-l5;
+  @include box-shadow(inset 0 1px 2px $shadow-l1);
   font-family: 'Open Sans', sans-serif;
   font-size: 11px;
   color: $baseFontColor;
@@ -21,7 +21,7 @@ textarea.text {
   &::-webkit-input-placeholder,
   &:-moz-placeholder,
   &:-ms-input-placeholder {
-      color: #979faf;
+      color: $gray-l2;
   }
 
   &:focus {
@@ -30,7 +30,72 @@ textarea.text {
   }
 }
 
-// forms - specific
+// ====================
+
+// forms - fields - not editable
+.field.is-not-editable {
+
+  & label.is-focused {
+   color: $gray-d2;
+  }
+
+  label, input, textarea {
+    pointer-events: none;
+  }
+}
+
+// ====================
+
+// field with error
+.field.error {
+
+  input, textarea {
+    border-color: $red;
+  }
+}
+
+// ====================
+
+// forms - additional UI
+form {
+
+  .note {
+    @include box-sizing(border-box);
+
+    .title {
+
+    }
+
+    .copy {
+
+    }
+
+    // note with actions
+    &.has-actions {
+      @include clearfix();
+
+      .title {
+
+      }
+
+      .copy {
+
+      }
+
+      .list-actions {
+
+      }
+    }
+  }
+
+  .note-promotion {
+
+  }
+}
+
+// ====================
+
+// forms - grandfathered
 input.search {
   padding: 6px 15px 8px 30px;
   @include box-sizing(border-box);
@@ -73,4 +138,4 @@ code {
   background-color:  #edf1f5;
   @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
   font-family: Monaco, monospace;
-}
\ No newline at end of file
+}

cms/static/sass/views/_settings.scss

@@ -147,7 +147,7 @@ body.course.settings {
         }
 
         label {
-          @include font-size(14);
+          @extend .t-copy-sub1;
           @include transition(color, 0.15s, ease-in-out);
           margin: 0 0 ($baseline/4) 0;
           font-weight: 400;
@@ -161,7 +161,7 @@ body.course.settings {
           @include placeholder($gray-l4);
           @include font-size(16);
           @include size(100%,100%);
-          padding: ($baseline/2);       
+          padding: ($baseline/2);
 
           &.long {
           }
@@ -212,7 +212,7 @@ body.course.settings {
           padding: $baseline;
 
           &:last-child {
-            padding-bottom: $baseline; 
+            padding-bottom: $baseline;
           }
 
           .actions {
@@ -238,33 +238,36 @@ body.course.settings {
       }
     }
 
-    // not editable fields
-    .field.is-not-editable {
-     
-      & label.is-focused {
-       color: $gray-d2;
-      }
-    }
-
-    // field with error
-    .field.error {
-
-      input, textarea {
-        border-color: $red;
-      }
-    }
-     
     // 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;
+          @include box-shadow(none);
+          border: none;
+          background: none;
+          padding: 0;
+          margin: 0;
+          font-weight: 600;
+        }
+      }
+
       #field-course-organization {
         float: left;
         width: flex-grid(2, 9);
@@ -281,6 +284,58 @@ body.course.settings {
         float: left;
         width: flex-grid(5, 9);
       }
+
+      // course link note
+      .note-promotion-courseURL {
+        @include box-shadow(0 2px 1px $shadow-l1);
+        @include 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;
+
+            &:hover {
+
+            }
+          }
+        }
+
+        .list-actions {
+          @include 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();
+            @include font-size(13);
+            font-weight: 600;
+
+            .icon {
+              @extend .t-icon;
+              @include font-size(16);
+              display: inline-block;
+              vertical-align: middle;
+            }
+          }
+        }
+      }
     }
 
     // specific fields - schedule
@@ -322,7 +377,7 @@ body.course.settings {
         }
       }
     }
-    
+
     // specific fields - overview
     #field-course-overview {
 
@@ -468,7 +523,7 @@ body.course.settings {
               }
             }
           }
-          
+
           .grade-specific-bar {
             height: 50px !important;
           }
@@ -479,7 +534,7 @@ body.course.settings {
             li {
               position: absolute;
               top: 0;
-              height: 50px;     
+              height: 50px;
               text-align: right;
               @include border-radius(2px);
 
@@ -600,8 +655,8 @@ body.course.settings {
         }
 
         #field-course-grading-assignment-shortname,
-        #field-course-grading-assignment-totalassignments, 
-        #field-course-grading-assignment-gradeweight, 
+        #field-course-grading-assignment-totalassignments,
+        #field-course-grading-assignment-gradeweight,
         #field-course-grading-assignment-droppable {
           width: flex-grid(2, 6);
         }
@@ -734,4 +789,4 @@ body.course.settings {
   .content-supplementary {
     width: flex-grid(3, 12);
   }
-}
\ No newline at end of file
+}