label on top of input field move

cms/static/sass/views/_settings.scss

@@ -21,7 +21,7 @@ body.course.settings {
     font-size: 14px;
   }
 
-  .message-status {
+  .message-status { 
     display: none;
     @include border-top-radius(2px);
     @include box-sizing(border-box);

cms/static/sass/views/_unit.scss

@@ -481,10 +481,10 @@ body.course.unit {
               @include white-button;
 
               &.is-set {
-                background-color: $lightBluishGrey2;
+                background-color: $white;
                 cursor: default;
                 linear-gradient: none;
-                @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .6) inset);
+                @include box-shadow(0 0 1px 1px rgba(240, 240, 240, .1) inset);
 
               }
             }
@@ -518,24 +518,22 @@ body.course.unit {
         .settings-row {
           // general row sizing stuff
           background-color: $white;
-          padding: 10px;
+          padding: 10px 20px;
           border-bottom: 1px solid $gray-l2;
-          opacity: .6;
+          opacity: .8;
 
           &:hover {
             opacity: 1;
           }
 
           &.is-set {
-            opacity: .9;
+            opacity: 1;
             background-color: $white;
             font-weight: 200;
           }
 
           .setting-label {
-            font-weight: normal;  
-            display: inline-block;
-            padding-left: 15px;
+            font-weight: 500;
             position: relative;
             left: 0;
             height: 50%;
@@ -545,6 +543,7 @@ body.course.unit {
           .setting-input {
             @include placeholder($gray-l4);
             border-radius: 2px;
+            padding: 6px 8px 8px;
             width: 200px;
             height: auto;
             border: 1px solid $gray-l2;
@@ -578,7 +577,9 @@ body.course.unit {
 
             &:hover {
               background-color: $blue-s3;
+              border: 1px solid $blue-s3;
               color: $white;
+              @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15));
             }
 
             &.inactive {
@@ -588,11 +589,12 @@ body.course.unit {
 
           //SettingsHelp
           .setting-help {
+            @include clearfix;
             display: inline-block;
             @include font-size(12);
             font-color: $gray-l6;
             padding-left: 20px;
-            max-width: 40%;
+            width: 65%;
           }
 
         }
@@ -632,7 +634,7 @@ body.course.unit {
       .module-actions {
         padding: 0 0 10px 10px;
         box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset;
-        background-color: $gray-l4;
+        background-color: $gray-l6;
 
         .save-button {
         margin: 15px 8px 0 0;

cms/templates/component.html

@@ -25,8 +25,8 @@
 		  		<!--% for type in sorted(something.keys()):-->
 		  		<!--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="text" id="firstname"/> 
+		  			<label class="setting-label" for="setting-id-1">Setting 1</label>
+		  			<input class="setting-input" type="text" id="setting-id-1"/> 
 		  			<!--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>
@@ -35,17 +35,17 @@
 		  		</li>
 		  		<!--% 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="text" id="firstname"/> 
+		  			<label class="setting-label" for="setting-id-2">Setting 2</label>
+		  			<input class="setting-input" type="text" id="setting-id-2"/> 
 		  			<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">This is a more reasonable helpstring sentence that would alos wrap around. A second sentence in some cases may be necessary.</span>
+		  			<div class="setting-help">This is a more reasonable helpstring sentence that would alos wrap around. A second sentence in some cases may be necessary.</div>
 		  		
 		  		<!--% showing dropdown example -->
 		  		<li class="settings-row">
-		  			<label class="setting-label" for="setting-name-as-id">Setting Display </label>
-		  			<select class="setting-input" name="type">
+		  			<label class="setting-label" for="setting-id-3">Setting Display </label>
+		  			<select class="setting-input" id="setting-id-3" name="type">
 		  				<!--% for all in available options -->
 						<option value="displayName1" selected>Closed</option>
 						<!--in case value already defaulted -->