Fix Assignments item group overflow in Firefox

Fixes: CNVS-22823

The Firefox white-space bug strikes again. This
commit adds our Firefox workaround mixin to the
.ellipses class when it is contained by the .ig-list
> .ig-row elements, to stop the layout from getting
blown out.

Test plan:
- Create an assignment with a log name and lots of
  options (multiple due dates)
- Add the assignment to a module
- Return to the assignments index page, and make sure
  the layout now looks like this:
  http://screencast.com/t/UBp0p4rIU
  The publish cloud and assignment edit cog should
  now be visible on the screen.

Change-Id: Ifbe5d2c6f6f8c63248bd17058cb87f0c4d0ed0ad
Reviewed-on: https://gerrit.instructure.com/63486
Tested-by: Jenkins
Reviewed-by: Jennifer Stern <jstern@instructure.com>
Product-Review: Jennifer Stern <jstern@instructure.com>
QA-Review: Myller de Araujo <myller@instructure.com>

app/stylesheets/base/mixins/_misc.scss

@@ -22,17 +22,38 @@
 
 @mixin unselectable { user-select: none; }
 
-@mixin firefox-white-space-bug-fix {
-  white-space: normal;
-  height: $baseLineHeight;
-  position: relative;
-  &:after {
-    content: "";
-    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 75%);
-    position: absolute;
-    right: 0; top: 0;
-    height: $baseLineHeight; width: $ic-sp*2.5;
-    z-index: 1;
+
+// Firefox has a bug with white-space that breaks our ellipses CSS. This mixin
+// replaces the ellipses with a gradient fade-out. The mixin should be applied to
+// the parent of the ellipses or ellipsis class. There is an optional parameter
+// for hover states where the background color of the parent changes
+
+@mixin firefox-white-space-bug-fix-gradient($fade-out-color) {
+  background: linear-gradient(to right, rgba(255,255,255,0) 0%,$fade-out-color 75%);  
+}
+
+@mixin firefox-white-space-bug-fix($gradient-color: $ic-color-light, $gradient-color-hover: null) {
+  body.ff & {
+    .ellipses, .ellipsis {
+      white-space: normal;
+      height: $baseLineHeight;
+      position: relative;
+      &:after {
+        @include firefox-white-space-bug-fix-gradient($gradient-color);
+        content: "";
+        position: absolute;
+        right: 0; top: 0;
+        height: $baseLineHeight; width: $ic-sp*2.5;
+        z-index: 1;
+      }
+    }
+    @if ($gradient-color-hover) {
+      &:hover {
+        .ellipses, .ellipsis {
+          &:after { @include firefox-white-space-bug-fix-gradient($gradient-color-hover); }
+        }
+      }
+    }
   }
 }
 

app/stylesheets/bundles/conferences.scss

@@ -54,11 +54,13 @@ header:not(.ic-app-header) {
   color: #434343;
 }
 
-.ig-list .ig-row .ellipses {
-  color: $ic-font-color--subdued;
-  // Fix for strange Firefox-only bug where white-space: no-wrap was blowing out the layout
-  // on conferences index page
-  body.ff & { @include firefox-white-space-bug-fix; }
+.ig-list .ig-row  {
+  
+  // Conferences has no background color highlight on hover,
+  // so need to overwrite .ig-row default for Firefox
+  @include firefox-white-space-bug-fix($ic-color-light, $ic-color-light);
+  
+  .ellipses { color: $ic-font-color--subdued; }
 }
 
 #add_conference_form {

app/stylesheets/bundles/discussions_list.scss

@@ -23,9 +23,8 @@ $announcements_disscussion-summary-color: $ic-color-dark;
       background-color: $ic-color-light;
       display: flex;
       align-items: center;
-      body.ff & {
-        .ellipsis { @include firefox-white-space-bug-fix; }  
-      } 
+      // Handle Firefox white space bug that affects .ellipsis class
+      @include firefox-white-space-bug-fix;
     }
     @else {
       background-color: white;
@@ -39,7 +38,7 @@ $announcements_disscussion-summary-color: $ic-color-dark;
         @if $use_new_styles { 
           background-color: $lightBackground;
           body.ff & {
-            .ellipsis::after { background: linear-gradient(to right, rgba(255,255,255,0) 0%,$lightBackground 75%); }  
+            .ellipsis::after { @include firefox-white-space-bug-fix-gradient($lightBackground); }  
           }
         }
         @else { background-color: $tableBackgroundAccent; }

app/stylesheets/components/_item-groups.scss

@@ -278,7 +278,12 @@
     text-decoration: none;
   }
 
-  .ellipses { @include item-group-ellipses; }
+  .ellipses { 
+    @include item-group-ellipses;
+  }
+
+  // Handle Firefox white space bug that affects .ellipses class
+  @include firefox-white-space-bug-fix($ic-color-light, $ic-list-item-background--hover);
 
   &:hover {
     background-color: $ic-list-item-background--hover;