style input boxes

cms/static/sass/views/_unit.scss

@@ -453,7 +453,8 @@ body.course.unit {
         top: 0;
         right: 0;
         border-bottom: 1px solid $lightBluishGrey2;
-        background: $gray-l4;
+        box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset;
+        background-color: $white;
 
         //Component Name
         h4 {
@@ -492,43 +493,84 @@ body.course.unit {
 
       // Settings Wrapper
       .settings-wrapper{
-        //TO-DO 
+        //doverflow-y: scroll;
 
         .settings-row {
           // general row sizing stuff
-          background-color: $white;
+          background-color: $lightBluishGrey2;
           padding: 10px;
-          border-bottom: 1px solid $gray-l4;
+          border-bottom: 1px solid $gray-l2;
+          opacity: .8;
+
+          &:hover {
+            opacity: 1;
+          }
 
           .setting-label {
             font-weight: normal;  
-            display: inline;
+            display: inline-block;
+            padding-left: 15px;
             position: relative;
             left: 0;
-            width: 200px;
+            width: 100px;
           }
 
           .setting-input {
             @include placeholder($gray-l4);
-            @include font-size(16);
-            @include size(100%,100%);
+            border-radius: 2px;
             width: 200px;
             height: auto;
-            //TO-DO
+            border: 1px solid $gray-l2;
 
             //&:focus {
               //TO-DO
           }
 
+          select {
+            border: 1px solid $gray-l4;
+            background: none repeat scroll #F2F2F2;
+            padding: 5px;
+
+            &:active {
+              background-color: #FFFCF1;
+            }
+
+            option {
+              line-height: 16px;
+
+            }
+          }
+
           .setting-clear {
+            @include font-size(11);
+            color: $gray;
+            width: 25px;
+            height: 25px;
+            vertical-align: middle;
+            padding: 5px;
             border-radius: 50%;
-            margin-left: 15px;
+            margin-left: 10px;
+            box-shadow: none;
+            text-shadow: none;
+            border: 1px solid $gray-l4;
+
+            &:hover {
+              background-color: $blue-s3;
+              color: $white;
+            }
+
+            &.inactive {
+              visibility: hidden;
+            }
           }
 
           //SettingsHelp
           .setting-help {
-            @include font-size(14);
+            display: inline-block;
+            @include font-size(12);
             font-color: $gray-l6;
+            padding-left: 20px;
+            max-width: 50%;
           }
 
         }

cms/templates/component.html

@@ -4,10 +4,10 @@
   			<h3 class="component-name">Viewing: Name of Component</h3>
   			<!--should this be a menubar/menu/tabbar instead of list? -->
   	  		<ul class="nav-edit-modes">
-  	  			<li id="editor-mode" class="tab is-active" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
+  	  			<li id="editor-mode" class="mode is-active" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
   	  				<a href="#" class="button cancel-button">Editor</a>
 	  			</li>
-	  			<li id="settings-mode" class="tab" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
+	  			<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
 	  				<a href="#" class="button cancel-button">Settings </a>
 	  			</li>
 	  		</ul>
@@ -23,7 +23,7 @@
 		  		<!--is-set class applied when user sets value-->
 		  		<li class="settings-row is-set">
 		  			<label class="setting-label" for="inputVariableHere">Setting 1</label>
-		  			<input class="setting-input" type="type1" id="firstname"/> 
+		  			<input class="setting-input" type="text" id="firstname"/> 
 		  			<!--button clickable if is-set -->
 		  			<button class="setting-clear" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
 		  				<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
@@ -33,12 +33,15 @@
 		  		<!--% showing second example mostly to see is-set style difference -->
 		  		<li class="settings-row">
 		  			<label class="setting-label" for="setting-name-as-id">Setting 2</label>
-		  			<input class="setting-input" type="type2" id="firstname"/> 
-		  			<span class="setting-help">helpstring</span>
+		  			<input class="setting-input" type="text" id="firstname"/> 
+		  			<button class="setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
+		  				<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
+		  			</button>
+		  			<span class="setting-help">helpstring helpstringhelpstringhelpstringhelpstringhel pstringhelpstringh elpstringhelpstrin sghelp stringhelp stringhelpstringhe lpstring helpstringhelpstringhelpstring</span>
 		  		
 		  		<!--% showing dropdown example -->
 		  		<li class="settings-row">
-		  			<label class="setting-label" for="setting-name-as-id">Setting Display Name Goes Here</label>
+		  			<label class="setting-label" for="setting-name-as-id">Setting Display </label>
 		  			<select class="setting-input" name="type">
 		  				<!--% for all in available options -->
 						<option value="displayName1" selected>Closed</option>
@@ -47,6 +50,9 @@
 						<option value="displayName3">Open</option>
 						<option value="displayName4">Available</option>
 					</select> 
+					<button class="setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
+		  				<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
+		  			</button>
 		  			<span class="setting-help">helpstring</span>
 		  		</li>