added number metadata template, cleaned up editor theme ui bordering and settings styles

cms/static/client_templates/metadata_number_entry.html

+<div class="wrapper-comp-setting">
+	<label class="label setting-label" for="<%= uniqueId %>"><%= model.get('display_name') %></label>
+	<input class="input setting-input" type="number" min=".1" max= "10" step=".1" id="<%= uniqueId %>" value='<%= model.get("value") %>'/>
+	<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
+		<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i><span class="sr">Clear Value</span>
+	</button>
+</div>
+<span class="tip setting-help"><%= model.get('help') %></span>

cms/static/client_templates/metadata_option_entry.html

@@ -10,7 +10,7 @@
         <% }) %>
     </select>
     <button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
-        <i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
+        <i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i><span class="sr">Clear Value</span>
     </button>
 </div>
 <span class="tip setting-help"><%= model.get('help') %></span>

cms/static/client_templates/metadata_string_entry.html

@@ -2,7 +2,7 @@
 	<label class="label setting-label" for="<%= uniqueId %>"><%= model.get('display_name') %></label>
 	<input class="input setting-input" type="text" id="<%= uniqueId %>" value='<%= model.get("value") %>'/>
 	<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
-		<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
+		<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i><span class="sr">Clear Value</span>
 	</button>
 </div>
 <span class="tip setting-help"><%= model.get('help') %></span>

cms/static/sass/views/_unit.scss

@@ -461,7 +461,7 @@ body.course.unit {
       .module-actions {
         @include box-shadow(inset 0 1px 1px $shadow);
         padding: 0px 0 10px 10px;
-        background-color: $gray-l4;
+        background-color: $gray-l6;
 
         .save-button {
         margin: 15px 8px 0 0;
@@ -533,9 +533,7 @@ body.course.unit {
 }
 
 // Editor Wrapper
-.wrapper-comp-editor {
-  //TO-DO 
-}
+.wrapper-comp-editor { }
 
 // Settings Wrapper
 .wrapper-comp-settings {
@@ -585,7 +583,6 @@ body.course.unit {
       }
 
       &:hover {
-        //TO-DO review existing patterns for hover on field
         @include transition(opacity 0.25s ease-in-out);
         opacity: 1;
       }
@@ -595,9 +592,7 @@ body.course.unit {
         background-color: $white;
 
         //setting-label
-        .setting-label {
-          //color: $blue-l1;
-        }
+        .setting-label { }
 
         //setting-input
         .setting-input {
@@ -605,9 +600,7 @@ body.course.unit {
         }
         
         //setting-clear
-        .setting-clear {
-          //...
-        }
+        .setting-clear { }
       }
 
       .wrapper-comp-setting{
@@ -620,9 +613,7 @@ body.course.unit {
       label.setting-label {
         @extend .t-copy-sub1;
         @include transition(color, 0.15s, ease-in-out);
-        //margin: 0 0 ($baseline/4) 0; WILL BE REMOVED PRIOR TO PUSH
         font-weight: 400;
-
         display: inline-block;
         position: relative;
         left: 0;
@@ -663,9 +654,8 @@ body.course.unit {
       }
 
       select {
-        //border: 1px solid $gray-l2;
-        background: none repeat scroll #F2F2F2;
         @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
+        background: none repeat scroll #F2F2F2;
 
         &:focus {
           @include box-shadow(0 0 1px $shadow);
@@ -682,6 +672,7 @@ body.course.unit {
 
       .action.setting-clear {
         @include font-size(11);
+        background-color: $gray-l4;
         color: $gray;
         width: 25px;
         height: 25px;
@@ -695,7 +686,7 @@ body.course.unit {
 
         &:hover {
           @include box-shadow(0 1px 1px $shadow);
-          @include transition(opacity 0.25s ease-in-out);
+          @include transition(opacity 0.15s ease-in-out);
           background-color: $blue-s3;
           border: 1px solid $blue-s3;
           color: $white;
@@ -706,11 +697,13 @@ body.course.unit {
         }
       }
 
-      tip.setting-help {
+      .tip.setting-help {
         @include font-size(12);
+        margin-top: 5px;
         display: inline-block;
         font-color: $gray-l6;
-        //max-width: 50%;
+        min-width: 280px;
+        width: 50%;
         vertical-align: top;
       }
     }
@@ -942,15 +935,4 @@ body.unit {
   .view-button {
     display: none;
   }
-}
-
-
-//OLD Meta-data Styling
-//TO-DO port over old styling
-.metadata_edit {
-
-  label {
-    display: inline-block;
-    margin-right: 10px;
-  }
 }
\ No newline at end of file

cms/templates/component.html

@@ -2,16 +2,15 @@
 	<div class="component-editor">
 		<div class="component-edit-header">
   			<span class="component-name"><em>Editing:</em> Name of Component</span>
-  			<!--should this be a menubar/menu/tabbar instead of list? -->
   	  		<ul class="nav-edit-modes">
   	  			<li id="editor-mode" class="mode" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
-  	  				<a href="#" class="active-mode is-set">Editor</a>
+  	  				<a href="#" class="active-mode not-set">Editor</a>
 	  			</li>
 	  			<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
 	  				<a href="#" class="inactive-mode">Compiler </a>
 	  			</li>
 	  			<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
-	  				<a href="#" class="active-mode not-set">Settings </a>
+	  				<a href="#" class="active-mode is-set">Settings </a>
 	  			</li>
 	  		</ul>
 		</div> <!-- Editor Header -->

common/static/js/vendor/tiny_mce/themes/advanced/skins/studio/ui.css

@@ -25,7 +25,7 @@
 
 /* Layout */
 .studioSkin table.mceLayout {border:0;}
-.studioSkin table.mceLayout tr.mceFirst td {border-top: 1px solid #D1DCE6;}
+.studioSkin table.mceLayout tr.mceFirst td {border-top: 1px solid #D1DCE6; border-left: none; border-right:none;}
 .studioSkin table.mceLayout tr.mceLast td {border-bottom:none;}
 .studioSkin table.mceToolbar, .studioSkin tr.mceFirst .mceToolbar tr td, .studioSkin tr.mceLast .mceToolbar tr td {border:0; margin:0; padding:0;}
 .studioSkin td.mceToolbar {