refining form-based styling

apps/openassessment/templates/openassessmentblock/grade/oa_grade_complete.html

@@ -147,40 +147,40 @@
                         </div>
 
                         <ol class="list list--fields submission__feedback__fields">
-                            <li class="field field--radio feedback__overall" id="feedback__overall">
-                                <h4>Please select the statements below that reflect what you think of this peer grading experience:</h4>
+                            <li class="field field-group field--radio feedback__overall" id="feedback__overall">
+                                <h4 class="field-group__label">Please select the statements below that reflect what you think of this peer grading experience:</h4>
                                 <ol class="list--options">
                                     <li class="option option--useful">
                                         <input type="checkbox"
                                             name="feedback__overall__value"
                                             id="feedback__overall__value--useful"
-                                            class="feedback__overall__value"
+                                            class="option__input feedback__overall__value"
                                             value="These assessments were useful." />
-                                        <label for="feedback__overall__value--useful">These assessments were useful.</label>
+                                        <label class="option__label" for="feedback__overall__value--useful">These assessments were useful.</label>
                                     </li>
                                     <li class="option option--notuseful">
                                         <input type="checkbox"
                                             name="feedback__overall__value"
                                             id="feedback__overall__value--notuseful"
-                                            class="feedback__overall__value"
+                                            class="option__input feedback__overall__value"
                                             value="These assessments were not useful." />
-                                        <label for="feedback__overall__value--notuseful">These assessments were not useful.</label>
+                                        <label class="option__label" for="feedback__overall__value--notuseful">These assessments were not useful.</label>
                                     </li>
                                     <li class="option option--disagree">
                                         <input type="checkbox"
                                             name="feedback__overall__value"
                                             id="feedback__overall__value--disagree"
-                                            class="feedback__overall__value"
+                                            class="option__input feedback__overall__value"
                                             value="I disagree with the ways that my peers assessed me." />
-                                        <label for="feedback__overall__value--notuseful">I disagree with the ways that my peers assessed me.</label>
+                                        <label class="option__label" for="feedback__overall__value--notuseful">I disagree with the ways that my peers assessed me.</label>
                                     </li>
                                     <li class="option option--inappropriate">
                                         <input type="checkbox"
                                             name="feedback__overall__value"
                                             id="feedback__overall__value--inappropriate"
-                                            class="feedback__overall__value"
+                                            class="option__input feedback__overall__value"
                                             value="I received some inappropriate comments." />
-                                        <label for="feedback__overall__value--notuseful">I received some inappropriate comments.</label>
+                                        <label class="option__label" for="feedback__overall__value--notuseful">I received some inappropriate comments.</label>
                                     </li>
                                 </ol>
                             </li>

apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss

@@ -1089,7 +1089,7 @@
     border-radius: ($baseline-v/10);
   }
 
-  .submission__feeedback__fields {
+  .submission__feedback__fields {
     margin-bottom: $baseline-v;
 
     .field {

apps/openassessment/xblock/static/sass/xb/elements/_base.scss

@@ -47,6 +47,7 @@ hr.divider,
 .list--controls,
 .list--fields,
 .list--help,
+.list--options,
 .nav--wizard,
 .list--tips,
 .field--group {

apps/openassessment/xblock/static/sass/xb/elements/_forms.scss

@@ -30,15 +30,17 @@
     }
   }
 
+  // general field UI
   .field {
     font-family: $f-copy;
 
-    label, .label {
+    label, .label, .field-group__label {
       @extend %copy-3;
-      @extend %t-strong;
+    }
+
+    .field-group__label {
       display: block;
       margin-bottom: ($baseline-v/2);
-      color: $copy-color;
     }
 
     textarea {
@@ -51,5 +53,60 @@
       color: $copy-secondary-color;
     }
   }
-}
 
+  // TYPE: textarea fields
+  .field--textarea {
+
+    .label, label {
+      @extend %t-strong;
+      margin-bottom: ($baseline-v/2);
+    }
+  }
+
+  // TYPE: field-group
+  .field-group {
+
+  }
+
+  .field-group__label {
+    @extend %t-strong;
+    margin-bottom: ($baseline-v/2);
+  }
+
+  // TYPE: radio/checkbox fields
+  .field--radio, .field--checkbox {
+
+    // general option UI
+    .option {
+      margin-bottom: ($baseline-v/4);
+
+      &:last-child {
+        @extend %wipe-last-child;
+      }
+    }
+
+    .option__input, .option__label {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .option__label {
+      @extend %copy-3;
+      @extend %t-strong;
+      margin-bottom: 0; // FIX: need to reset base label style
+      color: $copy-secondary-color;
+    }
+
+    .option__input {
+      margin-right: ($baseline-v/2);
+
+      // STATE: checked
+      &:checked {
+
+        + .option__label {
+          color: $selected-color;
+        }
+      }
+    }
+  }
+}