Remove embedded CSS

As follow on work to restoring the old network topology, this patch
separates embedded CSS in one of the html files into a separate SCSS
file.

This change is not intended to make topology themable.  There is still
much work that needs to be done and will follow up soon.

Change-Id: I46b7152a24fc1f7a26a1752ba22d80e31ff1ffdb

openstack_dashboard/dashboards/project/network_topology/templates/network_topology/_svg_element.html

@@ -1,124 +1,4 @@
 {% load i18n %}
-<style type="text/css">
-svg#topology_canvas {
-  font-family: sans-serif;
-}
-svg#topology_canvas .network-rect {
-  cursor: pointer;
-}
-svg#topology_canvas .network-rect.nourl {
-  cursor: auto;
-}
-svg#topology_canvas .network-name {
-  font-weight: bold;
-  font-size: 12px;
-  fill: #fff;
-  text-anchor: middle;
-}
-svg#topology_canvas .network-cidr {
-  font-size: 11px;
-  text-anchor: end;
-}
-svg#topology_canvas text.network-type {
-  font-family: FontAwesome;
-  text-anchor: end;
-}
-svg#topology_canvas .port_text {
-  font-size: 9px;
-  fill: #666;
-}
-svg#topology_canvas .port_text.left {
-  text-anchor: end;
-}
-svg#topology_canvas .base_bg_normal {
-  fill: #333;
-}
-svg#topology_canvas .loading_bg_normal {
-  fill: #555;
-}
-svg#topology_canvas .base_bg_small,
-svg#topology_canvas .loading_bg_small {
-  fill: #fff;
-}
-svg#topology_canvas .active {
-  fill: #45B035;
-}
-svg#topology_canvas .icon polygon {
-  fill: #333;
-}
-svg#topology_canvas .instance_small .frame,
-svg#topology_canvas .router_small .frame {
-  fill: url(#device_small_bg);
-  stroke: #333;
-  stroke-width: 3;
-}
-svg#topology_canvas .instance_small .port_text,
-svg#topology_canvas .router_small .port_text {
-  display: none;
-}
-svg#topology_canvas .router_normal .frame,
-svg#topology_canvas .instance_normal .frame {
-  fill: #fff;
-  stroke: #333;
-  stroke-width: 4;
-}
-svg#topology_canvas .router_normal .icon_bg,
-svg#topology_canvas .instance_normal .icon_bg {
-  fill: #fff;
-  stroke: #333;
-  stroke-width: 4;
-}
-svg#topology_canvas .router_normal .texts_bg,
-svg#topology_canvas .instance_normal .texts_bg {
-  fill: url('#device_normal_bg');
-}
-svg#topology_canvas .router_normal .texts .name,
-svg#topology_canvas .instance_normal .texts .name {
-  text-anchor: middle;
-  fill: #333;
-  font-size: 12px;
-}
-svg#topology_canvas .router_normal .texts .type,
-svg#topology_canvas .instance_normal .texts .type {
-  text-anchor: middle;
-  fill: #fff;
-  font-size: 12px;
-}
-svg#topology_canvas .router_normal .instance_bg,
-svg#topology_canvas .instance_normal .instance_bg {
-  fill: #333;
-}
-svg#topology_canvas g.loading .active {
-  fill: #555;
-}
-svg#topology_canvas g.loading .icon polygon {
-  fill: #555;
-}
-svg#topology_canvas g.loading .instance_bg {
-  fill: #555;
-}
-svg#topology_canvas g.loading .instance_small .frame,
-svg#topology_canvas g.loading .router_small .frame {
-  stroke: #555;
-  fill: url(#device_small_bg_loading);
-}
-svg#topology_canvas g.loading .router_normal .frame,
-svg#topology_canvas g.loading .instance_normal .frame {
-  stroke: #555;
-}
-svg#topology_canvas g.loading .router_normal .name,
-svg#topology_canvas g.loading .instance_normal .name {
-  fill: #999;
-}
-svg#topology_canvas g.loading .router_normal .texts_bg,
-svg#topology_canvas g.loading .instance_normal .texts_bg {
-  fill: url(#device_normal_bg_loading);
-}
-svg#topology_canvas g.loading .router_normal .icon_bg,
-svg#topology_canvas g.loading .instance_normal .icon_bg {
-  stroke: #555;
-}
-</style>
 
 <svg width="400" height="400" id="topology_canvas">
   <defs>

openstack_dashboard/static/dashboard/scss/components/_network_topology_svg.scss

@@ -0,0 +1,148 @@
+#topology_canvas {
+  font-family: sans-serif;
+
+  .network-rect {
+     cursor: pointer;
+
+    &.nourl {
+      cursor: auto;
+    }
+  }
+
+  .network-name {
+     font-weight: $badge-font-weight;
+     font-size: $font-size-base;
+     fill: $component-active-color;
+     text-anchor: middle;
+   }
+
+  .network-cidr {
+     font-size: $font-size-small;
+     text-anchor: end;
+   }
+
+  text.network-type {
+     font-family: FontAwesome;
+     text-anchor: end;
+   }
+
+  .port_text {
+     font-size: $font-size-small;
+     fill: $gray;
+
+    &.left {
+      text-anchor: end;
+    }
+   }
+
+  .base_bg_normal {
+     fill: $gray-dark;
+   }
+
+  .loading_bg_normal {
+     fill: $gray;
+   }
+
+  .base_bg_small,
+  .loading_bg_small {
+     fill: $body-bg;
+   }
+
+  .active {
+     fill: $brand-success;
+   }
+
+  .icon polygon {
+     fill: $gray-dark;
+   }
+
+  .instance_small,
+  .router_small {
+    .frame {
+       fill: url(#device_small_bg);
+       stroke: $gray-dark;
+       stroke-width: 3;
+     }
+
+    .port_text {
+       display: none;
+    }
+  }
+
+  .router_normal,
+  .instance_normal {
+    .frame {
+       fill: #fff;
+       stroke: $gray-dark;
+       stroke-width: 4;
+     }
+
+    .icon_bg {
+       fill: #fff;
+       stroke: $gray-dark;
+       stroke-width: 4;
+     }
+
+    .texts_bg {
+       fill: url('#device_normal_bg');
+     }
+
+    .texts {
+      .name {
+         text-anchor: middle;
+         fill: $gray-dark;
+         font-size: $font-size-base;
+       }
+
+      .type {
+         text-anchor: middle;
+         fill: #fff;
+         font-size: $font-size-base;
+      }
+    }
+
+    .instance_bg {
+       fill: $gray-dark;
+    }
+  }
+
+  g.loading {
+    .active {
+      fill: $gray;
+     }
+
+    .icon polygon {
+      fill: $gray;
+     }
+
+    .instance_bg {
+      fill: $gray;
+     }
+
+    .instance_small,
+    .router_small {
+      .frame {
+        stroke: $gray;
+        fill: url(#device_small_bg_loading);
+      }
+    }
+
+    .instance_normal {
+      .frame {
+        stroke: $gray;
+      }
+
+      .name {
+        fill: $gray-light;
+      }
+
+      .texts_bg {
+        fill: url(#device_normal_bg_loading);
+      }
+
+      .icon_bg {
+        stroke: $gray;
+      }
+    }
+  }
+}

openstack_dashboard/static/dashboard/scss/horizon.scss

@@ -32,6 +32,7 @@
 @import "components/modals";
 @import "components/navbar";
 @import "components/network_topology";
+@import "components/network_topology_svg";
 @import "components/pie_charts";
 @import "components/progress_bars";
 @import "components/quota";