move css for #aligned_outcomes to the only place that uses it

refs: CNVS-28781

instead of loading this css on every page
I moved it out into its own bundle so it can be
only loaded in the one place that uses it

test plan:

* go to view a question bank
* on the right side, there should be a
  "Aligned Outcomes" section.
* it should be styled like it was before

Change-Id: Ia9d6deb189da25c6741d11a854f03e4b42fd63ba
Reviewed-on: https://gerrit.instructure.com/77312
QA-Review: Benjamin Christian Nelson <bcnelson@instructure.com>
Reviewed-by: Simon Williams <simon@instructure.com>
Tested-by: Jenkins
Product-Review: Ryan Shaw <ryan@instructure.com>

Author: ryankshaw

app/stylesheets/bundles/aligned_outcomes.scss

@@ -0,0 +1,36 @@
+#aligned_outcomes {
+  .outcomes {
+    list-style-type: none;
+    padding-left: 10px;
+    .outcome {
+      margin-bottom: 5px;
+      .short_description {
+        font-weight: bold;
+      }
+      .description {
+        font-size: 0.8em;
+        margin-left: 20px;
+      }
+      .mastery {
+        margin-top: 5px;
+        font-size: 0.7em;
+        font-style: italic;
+        margin-left: 20px;
+      }
+    }
+  }
+}
+
+#align_outcomes_dialog {
+  .all_outcomes {
+    list-style-type: none;
+    padding-left: 10px;
+    .outcome {
+      padding: 2px 5px;
+      margin-bottom: 2px;
+      &.selected_outcome {
+        background-color: #eee;
+      }
+    }
+  }
+}

app/stylesheets/components/_g_instructure.scss

@@ -1684,43 +1684,6 @@ body.padless-content #content, #content.padless {
   }
 }
 
-#aligned_outcomes {
-  .outcomes {
-    list-style-type: none;
-    padding-left: 10px;
-    .outcome {
-      margin-bottom: 5px;
-      .short_description {
-        font-weight: bold;
-      }
-      .description {
-        font-size: 0.8em;
-        margin-left: 20px;
-      }
-      .mastery {
-        margin-top: 5px;
-        font-size: 0.7em;
-        font-style: italic;
-        margin-left: 20px;
-      }
-    }
-  }
-}
-
-#align_outcomes_dialog {
-  .all_outcomes {
-    list-style-type: none;
-    padding-left: 10px;
-    .outcome {
-      padding: 2px 5px;
-      margin-bottom: 2px;
-      &.selected_outcome {
-        background-color: #eee;
-      }
-    }
-  }
-}
-
 h2.h-margin-top, h3.h-margin-top, .h2.h-margin-top, .h3.h-margin-top {
   margin-top: 20px;
 }

app/views/question_banks/show.html.erb

@@ -17,6 +17,7 @@
       <button class="btn button-sidebar-wide disabled" disabled="true"><%= image_tag("bookmark.png", alt: "") %> <%= t 'buttons.already_bookmarked', "Already Bookmarked" %></button>
     <% end %>
   </div>
+  <% css_bundle("aligned_outcomes") %>
   <h2 id="aligned_outcomes"><%= t 'headings.aligned_outcomes', "Aligned Outcomes" %></h2>
   <div class="rs-margin-lr rs-margin-bottom">
     <ul class="unstyled_list" id="aligned_outcomes_list">