Update item groups layout and styles

Fixes: CNVS-29681

Test plan:

- Please test this change as both a student
  and a teacher/admin, because Modules,
  Assignments and Quiz item groups appear
  differently for each kind of user.

- Go to a Canvas course with a lot of Assignments.
  The Assignments index page should now look like
  this: http://screencast.com/t/rEowTYSzrh

  It should show the exact same information as
  before this update, and the drag-and-drop
  should function exactly as it did before: The only
  thing that should have changed is the design.
  Experiment with editing the details of an
  Assignment, to make sure it still updates
  correctly.

- Go to a Canvas course with plenty of Quizzes.
  Go to the main Quizzes page. The Quiz item
  groups should look just like the Assignments
  item groups (above) -- and function exactly as
  they did before.

- Go to a Canvas course with a lot of Modules.
  Test in the same manner as assignments. Modules
  item groups should now look like this:
  http://screencast.com/t/u9juucjivDZ

- Go to a Canvas course with active and past
  Conferences. Test in the same manner as
  Assignments and Modules. Conferences item
  groups should now look like this:
  http://screencast.com/t/ff7VyTH18L60

Change-Id: I30779d222210a602cb5dca01ce95db04b1ece81f
Reviewed-on: https://gerrit.instructure.com/82116
Tested-by: Jenkins
Reviewed-by: Colleen Palmer <colleen@instructure.com>
Product-Review: Colleen Palmer <colleen@instructure.com>
QA-Review: Pierce Arner <pierce@instructure.com>

Author: Chris Hart

app/coffeescripts/views/assignments/AssignmentGroupListItemView.coffee

@@ -238,7 +238,6 @@ define [
       @$('.search_show').first().addClass("first_visible")
       @$('.search_show').last().addClass("last_visible")
 
-
     shouldBeExpanded: ->
       @cache.get(@cacheKey())
 

app/coffeescripts/views/assignments/AssignmentListItemView.coffee

@@ -147,6 +147,8 @@ define [
       # can move items if there's more than one parent
       # collection OR more than one in the model's collection
       data.canMove = @model.collection.view?.parentCollection?.length > 1 or @model.collection.length > 1
+      data.showAvailability = @model.multipleDueDates() or not @model.defaultDates().available()
+      data.showDueDate = @model.multipleDueDates() or @model.singleSectionDueDate()
 
       if data.canManage
         data.spanWidth      = 'span3'

app/coffeescripts/views/quizzes/QuizItemView.coffee

@@ -99,4 +99,7 @@ define [
         base.selector  = @model.get("id")
         base.link_text = @messages.multipleDates
         base.link_href = @model.get("url")
+
+      base.showAvailability = @model.multipleDueDates() or not @model.defaultDates().available()
+      base.showDueDate = @model.multipleDueDates() or @model.singleSectionDueDate()
       base

app/stylesheets/base/_variables.scss

@@ -137,12 +137,6 @@ $ic-header-background:          #34444f;
 $ic-header-primary-width:       84px;
 $ic-header-primary-expanded-width: $ic-sp*15;
 
-//============================
-// List Functional Variables
-//============================
-$ic-list-item-background--hover:      #eef7ff;
-$ic-list-item-background--selected:   #d9edf9;
-
 //================================
 // Global light background colors
 //================================
@@ -161,7 +155,7 @@ $ic-bg-light-danger:      lighten($ic-color-danger, 48%);
 //============================
 // List Functional Variables
 //============================
-$ic-list-item-background--hover:      $ic-bg-light-primary;
+$ic-list-item-background--hover:      lighten($ic-bg-light-neutral, 2%);
 $ic-list-item-background--selected:   $ic-bg-light-primary;
 
 //=====================

app/stylesheets/bundles/conferences.scss

@@ -44,19 +44,30 @@ header:not(.ic-app-header) {
     }
   }
 
-  i[class*=icon-]:before, i[class^=icon-]:before {
-    font-size: 13px;
-  }
+}
 
+.ig-row-label {
+  margin-right: $ic-sp;
+  @include breakpoint(desktop) {
+    margin-right: $ic-sp*1.5;
+  }
 }
 
 .ig-header-title a {
-  color: #434343;
+  color: $ic-font-color-dark;
 }
 
-.ig-list .ig-row  {
+.ig-list .ig-row {
+  padding-left: $ic-sp;
+  padding-right: $ic-sp;
+}
 
-  .ellipses { color: $ic-font-color--subdued; }
+.ig-info {
+  margin-left: 0;
+}
+
+.ig-title {
+  margin-bottom: 0;
 }
 
 #add_conference_form {
@@ -72,19 +83,10 @@ header:not(.ic-app-header) {
 }
 
 .item-group-expandable .emptyMessage {
-  color: #676b6e;
-  background: #f3f6f7;
+  color: $ic-font-color--subdued;
+  background: $ic-color-light;
   text-align: center;
-  padding: 10px;
+  padding: $ic-sp;
   margin: 0;
   border-radius: 3px;
 }
-
-.ig-title {
-  flex: 0 0 200px;
-  @include breakpoint(desktop) { flex: 0 0 40%; }
-}
-
-.ig-details {
-  flex: 1;
-}

app/stylesheets/bundles/content_next.scss

@@ -143,7 +143,7 @@
   background-color: transparent;
   border-bottom: none;
   padding: auto;
-  color: #3d454c;
+  color: $ic-font-color-dark;
 }
 .sortable-handle a, .draggable-handle a {
   color: #b4b7ba;
@@ -181,12 +181,6 @@
   color: inherit;
 }
 
-.context_module_item .item_name .title {
-  padding: 0;
-  color: inherit;
-  @include fontSize(13px);
-}
-
 .context_module_placeholder {
   height: 40px !important;
   border: none !important;

app/stylesheets/bundles/new_assignments.scss

@@ -106,11 +106,6 @@
   }
 }
 
-.draggable-handle {
-  margin: 0 4px 0 -15px;
-  padding: 0 0px 0 10px;
-}
-
 .sortable-dropzone {
   height: 50px;
   background-color: #dce1e6;
@@ -119,10 +114,9 @@
 }
 
 .ui-sortable-helper {
-  background-color: #e8ecef;
-  border: 1px solid #c1c7cf !important;
-  border-radius: 3px;
-  box-shadow: 0px 1px 4px #b7b7b7;
+  background-color: $ic-color-light;
+  border: 1px solid $ic-border-dark !important;
+  box-shadow: 0px 1px 16px rgba(black, 0.3);
 }
 
 .draggable .ui-sortable-helper {
@@ -134,9 +128,9 @@
 
 .draggable-dropzone {
   height: 40px;
-  background-color: #dce1e6;
-  border-right: 1px dashed #c1c7cf;
-  border-left: 1px dashed #c1c7cf;
+  background-color: lighten($ic-color-dark, 15%);
+  border-right: 1px dashed $ic-border-dark;
+  border-left: 1px dashed $ic-border-dark;
 }
 
 .ag-header-controls .tooltip_link {

app/stylesheets/components/_g_context_modules.scss

@@ -55,18 +55,6 @@ $context_module_bg_color: #f2f3f4;
   .ig-row {
     display: flex;
     align-items: center;
-  }
-  .ig-details {
-    .due_date_display {
-      text-align: center;
-      @include breakpoint(desktop) {
-        text-align: right;
-      }
-    }
-
-    .points_possible_display {
-      text-align: center;
-    }
 
     .module-item-status-icon {
       width: 16px;
@@ -75,8 +63,26 @@ $context_module_bg_color: #f2f3f4;
       .icon-mark-as-read {
         opacity: 0.4;
       }
+
+      + .ig-admin {
+        margin-left: $ic-sp;
+      }
+    }
+
+    // if there is going to be nothing in the
+    // .requirement-description.ig-details__item
+    // element, suppress the pipe of the
+    // .ig-details__item before it. (The element
+    // can't be removed bc it might be updated via js.)
+    &:not(.with-completion-requirements) {
+      .ig-details__item:nth-last-child(2) {
+        &:after {
+          display: none;
+        }
+      }
     }
   }
+
   h2 .name {
     display: inline;
     position: absolute;
@@ -299,7 +305,6 @@ $context_module_bg_color: #f2f3f4;
     }
   }
   .type_icon {
-    display: inline-block;
     i {
       color: #777;
       display: none;
@@ -430,8 +435,6 @@ $context_module_bg_color: #f2f3f4;
     }
   }
   .module_item_icons {
-    vertical-align: top;
-    padding-top: 2px;
     text-align: left;
     white-space: nowrap;
     width: 3.2em;
@@ -460,13 +463,6 @@ $context_module_bg_color: #f2f3f4;
 
 .context_module_item {
   .item_name {
-    vertical-align: top;
-    .title {
-      padding-left: 5px;
-      padding-top: 5px;
-      padding-bottom: 5px;
-      font-size: 0.9em;
-    }
     .locked_title {
       display: none;
     }
@@ -490,13 +486,19 @@ $context_module_bg_color: #f2f3f4;
     .type_icon {
       width: 0px;
     }
+    .ig-type-icon {
+      display: none;
+    }
+    .ig-info {
+      margin-left: $ic-sp/4;
+    }
     .criterion img {
       display: none;
     }
     .locked_title {
+      @include fontSize($ic-font-size--medium);
       display: inline;
-      font-weight: bold;
-      color: #888;
+      font-weight: $ic-font-weight;
     }
   }
   .links {