added dangle.css and maindendogram.css to styles and changed to .scss…

…, also added to main.scss

src/app/index.html

@@ -9,8 +9,8 @@
   <link rel="apple-touch-icon" href="apple-touch-icon.png">
   <!-- Place favicon.ico in the root directory -->
 
-  <link rel="stylesheet" href="styles/maindendogram.css"/>
-  <link rel="stylesheet" href="/bower_components/dangle/css/dangle.css">
+  <!--<link rel="stylesheet" href="styles/maindendogram.css"/>-->
+  <!--<link rel="stylesheet" href="/bower_components/dangle/css/dangle.css">-->
 
 
   <!-- build:css styles/vendor.css -->

src/app/styles/_dangle.scss

@@ -0,0 +1,56 @@
+/* axis line test */
+.axis path { 
+    fill: none; 
+    stroke:#000; 
+    stroke-width: 1.5px; 
+    shape-rendering: crispEdges;
+}
+
+/* axis tick marks */
+.axis line {
+    fill: none;
+    stroke: #000;
+    stroke-width: 1.1px;
+    shape-rendering: crispEdges;
+}
+
+/* controls the axis text */
+.axis text {
+    fill: #333;
+    stroke: none;
+    shape-rendering: crispEdges;
+    font-size: 16px;
+}
+
+/* controls the area */
+.area.fill { 
+    fill: #e5f3f9;
+    fill-opacity: 0.2;
+}
+
+/* controls the top line in area */
+.area.line {
+    fill: none;
+    stroke: #058dc7;
+    stroke-width: 6.0px;
+}
+
+.area.line.points {
+    fill: #058dc7;
+    stroke: #fff;
+    stroke-width: 3.0px;
+}
+
+/* histogram styles */
+.histo.rect { fill: #058dc7; }
+
+.bar.rect {
+    fill: #058dc7;
+    stroke: none;
+}
+
+.bar.text {
+    fill: #000;
+    stroke: none;
+    font-size: 12px;
+}

src/app/styles/main.scss

@@ -5,6 +5,8 @@ $icon-font-path: '../fonts/';
 // endbower
 
 @import "app/styles/facetedGui.scss";
+@import "app/styles/_maindendogram.scss";
+@import "app/styles/_dangle.scss";
 
 .browserupgrade {
   margin: 0.2em 0;