plugged in more pseudo code for various css class states necessary as well as…

plugged in more pseudo code for various css class states necessary as well as examples for dropdown case and extra logic required there

cms/static/sass/views/_unit.scss

@@ -502,15 +502,28 @@ body.course.unit {
           //SettingsLabel
           li > label {
             //Text all aligned left
+            display: inline-block;
             //this sets height of .settings-row to allow for long help strings. 
           }
 
           //SettingsInput
-          li > input {
+          li > input, li > select {
+            @include placeholder($gray-l4);
+            @include font-size(16);
+            @include size(100%,100%);
             width: 100px;
+            height: auto;
             //TO-DO
 
+            &:focus {
+              //TO-DO
+            }
+          }
 
+          //SettingsClear
+          li > button {
+            border-radius: 20px; //maybe a % calc from input box height
+            margin-left: 15px;
           }
 
           //SettingsHelp

cms/templates/component.html

@@ -20,17 +20,36 @@
 			</div> <!-- Editor Wrapper-->
 			<ul class="settings-wrapper" id="settings-tab">
 		  		<!--% for type in sorted(something.keys()):-->
-		  		<li class="settings-row">
+		  		<!--is-set class applied when user sets value-->
+		  		<li class="settings-row is-set">
 		  			<label for="<%= ...settingLabel... %>">Setting Display Name Goes Here</label>
 		  			<input type="${type}" id="firstname"/> 
+		  			<!--button clickable if is-set -->
+		  			<button type="button" name="setting-clear" value="Clear" class="setting-clear " data-tooltip="Clear">
+		  				<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
+		  			</button>
 		  			<span class="settings-help">${helpstring}</span>
 		  		</li>
 		  		<!--% showing second example mostly to see is-set style difference -->
-		  		<li class="settings-row is-set">
+		  		<li class="settings-row">
 		  			<label for="setting-name-as-id">Setting Display Name Goes Here</label>
 		  			<input type="${type}" id="firstname"/> 
 		  			<span class="settings-help">${helpstring}</span>
-		  		</li>≈
+		  		
+		  		<!--% showing dropdown example -->
+		  		<li class="settings-row">
+		  			<label for="setting-name-as-id">Setting Display Name Goes Here</label>
+		  			<select name="${type}">
+		  				<!--% for all in available options -->
+						<option value="displayName1" selected>Closed</option>
+						<!--in case value already defaulted --> 
+						<option value="displayName2">NotClosed</option>
+						<option value="displayName3">Open</option>
+						<option value="displayName4">Available</option>
+					</select> 
+		  			<span class="settings-help">${helpstring}</span>
+		  		</li>
+		  		
 		  	</ul> <!-- Settings Wrapper-->
 		</div>
 		<div class="row module-actions">