Merge pull request #1662 from MITx/feature/abarrett/annotation-styling-fixes

Annotation styling fixes

common/lib/xmodule/xmodule/css/annotatable/display.scss

@@ -1,6 +1,16 @@
+/* TODO: move top-level variables to a common _variables.scss. 
+ * NOTE: These variables were only added here because when this was integrated with the CMS,
+ * SASS compilation errors were triggered because the CMS didn't have the same variables defined
+ * that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS.
+ * -Abarrett and Vshnayder
+ */
 $border-color: #C8C8C8;
 $body-font-size: em(14);
 
+.annotatable-wrapper {
+  position: relative;
+}
+
 .annotatable-header {
   margin-bottom: .5em;
   .annotatable-title {
@@ -55,6 +65,7 @@ $body-font-size: em(14);
   display: inline;
   cursor: pointer;
 
+  $highlight_index: 0;
   @each $highlight in (
     (yellow rgba(255,255,10,0.3) rgba(255,255,10,0.9)),
     (red rgba(178,19,16,0.3) rgba(178,19,16,0.9)),
@@ -62,12 +73,13 @@ $body-font-size: em(14);
     (green rgba(25,255,132,0.3) rgba(25,255,132,0.9)),
     (blue rgba(35,163,255,0.3) rgba(35,163,255,0.9)),
     (purple rgba(115,9,178,0.3) rgba(115,9,178,0.9))) {
-    
+
+    $highlight_index: $highlight_index + 1;
     $marker: nth($highlight,1);
     $color: nth($highlight,2);
     $selected_color: nth($highlight,3);
 
-    @if $marker == yellow {
+    @if $highlight_index == 1 {
       &.highlight {
         background-color: $color;
         &.selected { background-color: $selected_color; }
@@ -127,6 +139,7 @@ $body-font-size: em(14);
     font-weight: 400;
     padding: 0 10px 10px 10px;
     background-color: transparent;
+    border-color: transparent;
   } 
   p { 
       color: inherit; 
@@ -143,6 +156,7 @@ $body-font-size: em(14);
       margin: 0px 0px 10px 0;
       max-height: 225px;
       overflow: auto;
+      line-height: normal;
     }
     .annotatable-reply {
       display: block;
@@ -165,5 +179,3 @@ $body-font-size: em(14);
     border-top-color: rgba(0, 0, 0, .85);
   }
 }
-
-