studio - settings: revised markup and styling around disabled/readonly fields

cms/static/client_templates/advanced_entry.html

 <li class="field-group course-advanced-policy-list-item">
-	<div class="field text key" id="<%= (_.isEmpty(key) ? '__new_advanced_key__' : key) %>">
+	<div class="field is-not-editable text key" id="<%= (_.isEmpty(key) ? '__new_advanced_key__' : key) %>">
 		<label for="<%= keyUniqueId %>">Policy Key:</label>
-		<input disabled readonly title="This field is disabled: policy keys cannot be edited." type="text" class="short policy-key" id="<%= keyUniqueId %>" value="<%= key %>" />
-		<span class="tip tip-stacked">Keys are case	sensitive and cannot contain spaces or start with a number</span>
+		<input readonly title="This field is disabled: policy keys cannot be edited." type="text" class="short policy-key" id="<%= keyUniqueId %>" value="<%= key %>" />
   </div>
   
   <div class="field text value">

cms/static/sass/_base.scss

@@ -410,6 +410,16 @@ textarea.text {
     border-color: $gray-l4;
     color: $gray-l2;
   }
+
+  &[readonly] {
+    border-color: $gray-l4;
+    color: $gray-l1;
+
+    &:focus {
+      @include linear-gradient($lightGrey, tint($lightGrey, 90%));
+      outline: 0;
+    }
+  }
 }
 
 // forms - specific

cms/static/sass/_settings.scss

@@ -239,9 +239,9 @@ body.course.settings {
 
     // not editable fields
     .field.is-not-editable {
-
-      label, .label {
-        color: $gray-l2;
+     
+      & label.is-focused {
+       color: $gray-d2;
       }
     }
 
@@ -668,11 +668,6 @@ body.course.settings {
        .key {
          width: flex-grid(3, 9);
          margin-right: flex-gutter();
-
-          // disabled/uneditable style
-          label {
-            color: $gray-l2;
-          }
         }
 
         .value {

cms/templates/settings.html

@@ -70,17 +70,17 @@ from contentstore import utils
           <ol class="list-input">
             <li class="field text is-not-editable" id="field-course-organization">
               <label for="course-organization">Organization</label>
-              <input title="This field is disabled: this information cannot be changed." type="text" class="long" id="course-organization" value="[Course Organization]" disabled readonly />
+              <input title="This field is disabled: this information cannot be changed." type="text" class="long" id="course-organization" value="[Course Organization]" readonly />
             </li>
 
             <li class="field text is-not-editable" id="field-course-number">
               <label for="course-number">Course Number</label>
-              <input title="This field is disabled: this information cannot be changed." type="text" class="short" id="course-number" value="[Course No.]" disabled readonly>
+              <input title="This field is disabled: this information cannot be changed." type="text" class="short" id="course-number" value="[Course No.]" readonly>
             </li>
 
             <li class="field text is-not-editable" id="field-course-name">
               <label for="course-name">Course Name</label>
-              <input title="This field is disabled: this information cannot be changed." type="text" class="long" id="course-name" value="[Course Name]" disabled readonly />
+              <input title="This field is disabled: this information cannot be changed." type="text" class="long" id="course-name" value="[Course Name]" readonly />
             </li>
           </ol>
           <span class="tip tip-stacked">These are used in <a rel="external" href="${utils.get_lms_link_for_about_page(course_location)}" />your course URL</a>, and cannot be changed</span>