move chart styles to their own less file

krissalvador27 · Nov 30, 2017 · 87eae5c · 87eae5c
1 parent 9bca7a8
commit 87eae5c
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 114 deletions.
diff --git a/docs/styles/charts.less b/docs/styles/charts.less
@@ -0,0 +1,113 @@
+.chart-tick {
+  fill: none;
+  stroke: #666;
+  stroke-width: 1px;
+}
+.chart-grid-line {
+  stroke: #b9b9b9;
+  stroke-width: 1px;
+}
+
+.line-chart, .xy-plot {
+  //background: #f0f0f0;
+  //background: lightblue;
+  margin-right: 6px;
+
+  .chart-background {
+    fill: none;
+  }
+  .plot-background {
+    fill: #e0e0e0;
+  }
+
+  * {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+  }
+  .chart-line {
+    fill: none;
+    //stroke: steelblue;
+    stroke: #090909;
+    stroke-width: 1.5px;
+    stroke-linejoin: bevel;
+  }
+
+
+  .chart-zero-line {
+    stroke: #888;
+    stroke-width: 1.5px;
+  }
+  .chart-axis-value-label {
+    font-size: 8pt;
+  }
+  .chart-axis-value-label-x {
+    text-anchor: middle;
+  }
+  .chart-axis-value-label-y {
+    text-anchor: end;
+  }
+  .chart-selected-range {
+    fill: #eeeef6;
+  }
+
+  .chart-axis-label {
+    font-size: 16pt;
+    font-weight: bold;
+  }
+}
+
+.chart-bar, .chart-area-bar {
+  fill: steelblue;
+}
+
+
+.marker-line-chart {
+  line {
+    stroke: black;
+    stroke-width: 2px;
+  }
+}
+
+.pie-chart {
+  path {
+    stroke: none;
+    //stroke: black;
+  }
+  .pie-slice-0 { fill: steelblue; }
+  .pie-slice-1 { fill: darkred; }
+  .pie-slice-2 { fill: orange; }
+  .pie-slice-empty { fill: #ddd; }
+  .pie-label-center {
+    font-size: 26pt;
+  }
+  .marker-line {
+    stroke: black;
+    stroke-width: 2px;
+  }
+}
+
+
+path {
+  fill: none;
+  //stroke: steelblue;
+  stroke: #0a0a0a;
+  stroke-width: 1.5px;
+  stroke-linejoin: bevel;
+}
+.chart-series-0 {
+  path { stroke: steelblue; }
+}
+.chart-series-1 {
+  path { stroke: darkred; }
+}
+.chart-series-2 {
+  path { stroke: orange; }
+}
+
+.area-chart {
+  .area-chart-path {
+    stroke-width: 0;
+    fill: steelblue;
+  }
+}
diff --git a/docs/styles/main.less b/docs/styles/main.less
@@ -1,3 +1,5 @@
+@import "./charts.less";
+
 body {
   //font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   //margin: 0;
@@ -75,120 +77,6 @@ body {
   }
 }
 
-.chart-tick {
-  fill: none;
-  stroke: #666;
-  stroke-width: 1px;
-}
-.chart-grid-line {
-  stroke: #b9b9b9;
-  stroke-width: 1px;
-}
-
-.line-chart, .xy-plot {
-  //background: #f0f0f0;
-  //background: lightblue;
-  margin-right: 6px;
-
-  .chart-background {
-    fill: none;
-  }
-  .plot-background {
-    fill: #e0e0e0;
-  }
-
-  * {
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-  }
-  .chart-line {
-    fill: none;
-    //stroke: steelblue;
-    stroke: #090909;
-    stroke-width: 1.5px;
-    stroke-linejoin: bevel;
-  }
-
-
-  .chart-zero-line {
-    stroke: #888;
-    stroke-width: 1.5px;
-  }
-  .chart-axis-value-label {
-    font-size: 8pt;
-  }
-  .chart-axis-value-label-x {
-    text-anchor: middle;
-  }
-  .chart-axis-value-label-y {
-    text-anchor: end;
-  }
-  .chart-selected-range {
-    fill: #eeeef6;
-  }
-
-  .chart-axis-label {
-    font-size: 16pt;
-    font-weight: bold;
-  }
-}
-
-.chart-bar, .chart-area-bar {
-  fill: steelblue;
-}
-
-
-.marker-line-chart {
-  line {
-    stroke: black;
-    stroke-width: 2px;
-  }
-}
-
-.pie-chart {
-  path {
-    stroke: none;
-    //stroke: black;
-  }
-  .pie-slice-0 { fill: steelblue; }
-  .pie-slice-1 { fill: darkred; }
-  .pie-slice-2 { fill: orange; }
-  .pie-slice-empty { fill: #ddd; }
-  .pie-label-center {
-    font-size: 26pt;
-  }
-  .marker-line {
-    stroke: black;
-    stroke-width: 2px;
-  }
-}
-
-
-path {
-  fill: none;
-  //stroke: steelblue;
-  stroke: #0a0a0a;
-  stroke-width: 1.5px;
-  stroke-linejoin: bevel;
-}
-.chart-series-0 {
-  path { stroke: steelblue; }
-}
-.chart-series-1 {
-  path { stroke: darkred; }
-}
-.chart-series-2 {
-  path { stroke: orange; }
-}
-
-.area-chart {
-  .area-chart-path {
-    stroke-width: 0;
-    fill: steelblue;
-  }
-}
-
 .playground {
   display: flex;
   flex-wrap: wrap;