Merge pull request #837 from aendrew/803_adding_compass

Adds Sass support

.gitignore

@@ -5,3 +5,4 @@ d3.js
 d3.min.js
 components
 build
+.sass-cache

.travis.yml

@@ -2,3 +2,4 @@ language: node_js
 
 before_script:
 - npm install -g grunt-cli
+- gem install sass

Gruntfile.coffee

@@ -1,11 +1,14 @@
 module.exports = (grunt) ->
-    require('load-grunt-tasks') grunt, pattern: 'grunt-contrib-*'
+    require('load-grunt-tasks') grunt, pattern: ['grunt-contrib-*', 'grunt-sass']
 
     grunt.initConfig
         watch:
           concat:
             tasks: 'concat'
             files: ['src/*.js']
+          sass:
+            tasks: 'sass'
+            files: ['src/scss/*.scss']
 
         concat:
           dist:
@@ -99,4 +102,11 @@ module.exports = (grunt) ->
             src: 'c3.css'
             dest: 'c3.min.css'
 
-    grunt.registerTask 'default', ['concat', 'jshint', 'jasmine', 'cssmin', 'uglify']
+        sass:
+          options:
+            sourcemap: 'none'
+          c3:
+            files:
+              'c3.css': 'src/scss/main.scss'
+
+    grunt.registerTask 'default', ['concat', 'jshint', 'jasmine', 'sass', 'cssmin', 'uglify']

c3.css

@@ -1,219 +1,158 @@
 /*-- Chart --*/
-
 .c3 svg {
-  font: 10px sans-serif;
-}
+  font: 10px sans-serif; }
+
 .c3 path, .c3 line {
   fill: none;
-  stroke: #000;
-}
+  stroke: #000; }
+
 .c3 text {
   -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-
-.c3-legend-item-tile,
-.c3-xgrid-focus,
-.c3-ygrid,
-.c3-event-rect,
-.c3-bars path {
-  shape-rendering: crispEdges;
-}
+  -moz-user-select: none;
+  user-select: none; }
+
+.c3-legend-item-tile, .c3-xgrid-focus, .c3-ygrid, .c3-event-rect, .c3-bars path {
+  shape-rendering: crispEdges; }
 
 .c3-chart-arc path {
-  stroke: #fff;
+  stroke: #fff; }
 
-}
 .c3-chart-arc text {
   fill: #fff;
-  font-size: 13px;
-}
+  font-size: 13px; }
 
 /*-- Axis --*/
-
-.c3-axis-x .tick {
-}
-.c3-axis-x-label {
-}
-
-.c3-axis-y .tick {
-}
-.c3-axis-y-label {
-}
-
-.c3-axis-y2 .tick {
-}
-.c3-axis-y2-label {
-}
-
 /*-- Grid --*/
-
 .c3-grid line {
-  stroke: #aaa;
-}
+  stroke: #aaa; }
+
 .c3-grid text {
-  fill: #aaa;
-}
+  fill: #aaa; }
+
 .c3-xgrid, .c3-ygrid {
-  stroke-dasharray: 3 3;
-}
-.c3-xgrid-focus {
-}
+  stroke-dasharray: 3 3; }
 
 /*-- Text on Chart --*/
-
-.c3-text {
-}
-
 .c3-text.c3-empty {
   fill: #808080;
-  font-size: 2em;
-}
+  font-size: 2em; }
 
 /*-- Line --*/
-
 .c3-line {
-  stroke-width: 1px;
-}
-/*-- Point --*/
+  stroke-width: 1px; }
 
+/*-- Point --*/
 .c3-circle._expanded_ {
   stroke-width: 1px;
-  stroke: white;
-}
+  stroke: white; }
+
 .c3-selected-circle {
   fill: white;
-  stroke-width: 2px;
-}
+  stroke-width: 2px; }
 
 /*-- Bar --*/
-
 .c3-bar {
-  stroke-width: 0;
-}
-.c3-bar._expanded_ {
-  fill-opacity: 0.75;
-}
-
-/*-- Arc --*/
+  stroke-width: 0; }
 
-.c3-chart-arcs-title {
-  dominant-baseline: middle;
-  font-size: 1.3em;
-}
+.c3-bar._expanded_ {
+  fill-opacity: 0.75; }
 
 /*-- Focus --*/
-
 .c3-target.c3-focused {
-  opacity: 1;
-}
+  opacity: 1; }
+
 .c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
-  stroke-width: 2px;
-}
-.c3-target.c3-defocused {
-  opacity: 0.3 !important;
-}
+  stroke-width: 2px; }
 
+.c3-target.c3-defocused {
+  opacity: 0.3 !important; }
 
 /*-- Region --*/
-
 .c3-region {
   fill: steelblue;
-  fill-opacity: .1;
-}
+  fill-opacity: 0.1; }
 
 /*-- Brush --*/
-
 .c3-brush .extent {
-  fill-opacity: .1;
-}
+  fill-opacity: 0.1; }
 
 /*-- Select - Drag --*/
-
-.c3-dragarea {
-}
-
 /*-- Legend --*/
-
 .c3-legend-item {
-  font-size: 12px;
-}
+  font-size: 12px; }
+
 .c3-legend-item-hidden {
-  opacity: 0.15;
-}
+  opacity: 0.15; }
 
 .c3-legend-background {
   opacity: 0.75;
   fill: white;
   stroke: lightgray;
-  stroke-width: 1
-}
+  stroke-width: 1; }
 
 /*-- Tooltip --*/
-
 .c3-tooltip-container {
-  z-index: 10;
-}
+  z-index: 10; }
+
 .c3-tooltip {
-  border-collapse:collapse;
-  border-spacing:0;
-  background-color:#fff;
-  empty-cells:show;
-  width:auto;
-  -webkit-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
-     -moz-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
-          box-shadow: 7px 7px 12px -9px rgb(119,119,119);
-  opacity: 0.9;
-}
+  border-collapse: collapse;
+  border-spacing: 0;
+  background-color: #fff;
+  empty-cells: show;
+  -webkit-box-shadow: 7px 7px 12px -9px #777777;
+  -moz-box-shadow: 7px 7px 12px -9px #777777;
+  box-shadow: 7px 7px 12px -9px #777777;
+  opacity: 0.9; }
+
 .c3-tooltip tr {
-  border:1px solid #CCC;
-}
+  border: 1px solid #CCC; }
+
 .c3-tooltip th {
   background-color: #aaa;
-  font-size:14px;
-  padding:2px 5px;
-  text-align:left;
-  color:#FFF;
-}
+  font-size: 14px;
+  padding: 2px 5px;
+  text-align: left;
+  color: #FFF; }
+
 .c3-tooltip td {
-  font-size:13px;
+  font-size: 13px;
   padding: 3px 6px;
-  background-color:#fff;
-  border-left:1px dotted #999;
-  color: #000;
-}
+  background-color: #fff;
+  border-left: 1px dotted #999; }
+
 .c3-tooltip td > span {
   display: inline-block;
   width: 10px;
   height: 10px;
-  margin-right: 6px;
-}
-.c3-tooltip td.value{
-  text-align: right;
-}
+  margin-right: 6px; }
+
+.c3-tooltip td.value {
+  text-align: right; }
 
+/*-- Area --*/
 .c3-area {
   stroke-width: 0;
-  opacity: 0.2;
-}
+  opacity: 0.2; }
+
+/*-- Arc --*/
+.c3-chart-arcs-title {
+  dominant-baseline: middle;
+  font-size: 1.3em; }
 
 .c3-chart-arcs .c3-chart-arcs-background {
   fill: #e0e0e0;
-  stroke: none;
-}
+  stroke: none; }
+
 .c3-chart-arcs .c3-chart-arcs-gauge-unit {
   fill: #000;
-  font-size: 16px;
-}
+  font-size: 16px; }
+
 .c3-chart-arcs .c3-chart-arcs-gauge-max {
-  fill: #777;
-}
+  fill: #777; }
+
 .c3-chart-arcs .c3-chart-arcs-gauge-min {
-  fill: #777;
-}
+  fill: #777; }
 
 .c3-chart-arc .c3-gauge-value {
   fill: #000;
-/*  font-size: 28px !important;*/
-}
+  /*  font-size: 28px !important;*/ }

package.json

@@ -23,13 +23,14 @@
     "d3": "<=3.5.0"
   },
   "devDependencies": {
-    "grunt": "~0.4.1",
+    "grunt": "^0.4.5",
     "grunt-contrib-concat": "~0.5.0",
     "grunt-contrib-cssmin": "^0.10.0",
     "grunt-contrib-jasmine": "~0.8.0",
     "grunt-contrib-jshint": "~0.10.0",
     "grunt-contrib-uglify": "~0.4.0",
     "grunt-contrib-watch": "^0.6.1",
+    "grunt-sass": "^0.17.0",
     "load-grunt-tasks": "~0.2.0"
   }
 }

src/scss/arc.scss

@@ -0,0 +1,24 @@
+.c3-chart-arcs-title {
+  dominant-baseline: middle;
+  font-size: 1.3em;
+}
+
+.c3-chart-arcs .c3-chart-arcs-background {
+  fill: #e0e0e0;
+  stroke: none;
+}
+.c3-chart-arcs .c3-chart-arcs-gauge-unit {
+  fill: #000;
+  font-size: 16px;
+}
+.c3-chart-arcs .c3-chart-arcs-gauge-max {
+  fill: #777;
+}
+.c3-chart-arcs .c3-chart-arcs-gauge-min {
+  fill: #777;
+}
+
+.c3-chart-arc .c3-gauge-value {
+  fill: #000;
+/*  font-size: 28px !important;*/
+}

src/scss/area.scss

@@ -0,0 +1,4 @@
+.c3-area {
+  stroke-width: 0;
+  opacity: 0.2;
+}

src/scss/axis.scss

@@ -0,0 +1,14 @@
+.c3-axis-x .tick {
+}
+.c3-axis-x-label {
+}
+
+.c3-axis-y .tick {
+}
+.c3-axis-y-label {
+}
+
+.c3-axis-y2 .tick {
+}
+.c3-axis-y2-label {
+}

src/scss/bar.scss

@@ -0,0 +1,6 @@
+.c3-bar {
+  stroke-width: 0;
+}
+.c3-bar._expanded_ {
+  fill-opacity: 0.75;
+}

src/scss/brush.scss

@@ -0,0 +1,3 @@
+.c3-brush .extent {
+  fill-opacity: .1;
+}

src/scss/chart.scss

@@ -0,0 +1,29 @@
+.c3 svg {
+  font: 10px sans-serif;
+}
+.c3 path, .c3 line {
+  fill: none;
+  stroke: #000;
+}
+.c3 text {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.c3-legend-item-tile,
+.c3-xgrid-focus,
+.c3-ygrid,
+.c3-event-rect,
+.c3-bars path {
+  shape-rendering: crispEdges;
+}
+
+.c3-chart-arc path {
+  stroke: #fff;
+
+}
+.c3-chart-arc text {
+  fill: #fff;
+  font-size: 13px;
+}

src/scss/focus.scss

@@ -0,0 +1,9 @@
+.c3-target.c3-focused {
+  opacity: 1;
+}
+.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
+  stroke-width: 2px;
+}
+.c3-target.c3-defocused {
+  opacity: 0.3 !important;
+}

src/scss/grid.scss

@@ -0,0 +1,11 @@
+.c3-grid line {
+  stroke: #aaa;
+}
+.c3-grid text {
+  fill: #aaa;
+}
+.c3-xgrid, .c3-ygrid {
+  stroke-dasharray: 3 3;
+}
+.c3-xgrid-focus {
+}

src/scss/legend.scss

@@ -0,0 +1,13 @@
+.c3-legend-item {
+  font-size: 12px;
+}
+.c3-legend-item-hidden {
+  opacity: 0.15;
+}
+
+.c3-legend-background {
+  opacity: 0.75;
+  fill: white;
+  stroke: lightgray;
+  stroke-width: 1
+}

src/scss/line.scss

@@ -0,0 +1,3 @@
+.c3-line {
+  stroke-width: 1px;
+}

src/scss/main.scss

@@ -0,0 +1,59 @@
+/*-- Chart --*/
+
+@import 'chart';
+
+/*-- Axis --*/
+
+@import 'axis';
+
+/*-- Grid --*/
+
+@import 'grid';
+
+/*-- Text on Chart --*/
+
+@import 'text';
+
+/*-- Line --*/
+
+@import 'line';
+
+/*-- Point --*/
+
+@import 'point';
+
+/*-- Bar --*/
+
+@import 'bar';
+
+/*-- Focus --*/
+
+@import 'focus';
+
+/*-- Region --*/
+
+@import 'region';
+
+/*-- Brush --*/
+
+@import 'brush';
+
+/*-- Select - Drag --*/
+
+@import 'select_drag';
+
+/*-- Legend --*/
+
+@import 'legend';
+
+/*-- Tooltip --*/
+
+@import 'tooltip';
+
+/*-- Area --*/
+
+@import 'area';
+
+/*-- Arc --*/
+
+@import 'arc';

src/scss/point.scss

@@ -0,0 +1,8 @@
+.c3-circle._expanded_ {
+  stroke-width: 1px;
+  stroke: white;
+}
+.c3-selected-circle {
+  fill: white;
+  stroke-width: 2px;
+}

src/scss/region.scss

@@ -0,0 +1,4 @@
+.c3-region {
+  fill: steelblue;
+  fill-opacity: .1;
+}

src/scss/select_drag.scss

@@ -0,0 +1,2 @@
+.c3-dragarea {
+}

src/scss/text.scss

@@ -0,0 +1,7 @@
+.c3-text {
+}
+
+.c3-text.c3-empty {
+  fill: #808080;
+  font-size: 2em;
+}

src/scss/tooltip.scss

@@ -0,0 +1,38 @@
+.c3-tooltip-container {
+  z-index: 10;
+}
+.c3-tooltip {
+  border-collapse:collapse;
+  border-spacing:0;
+  background-color:#fff;
+  empty-cells:show;
+  -webkit-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
+     -moz-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
+          box-shadow: 7px 7px 12px -9px rgb(119,119,119);
+  opacity: 0.9;
+}
+.c3-tooltip tr {
+  border:1px solid #CCC;
+}
+.c3-tooltip th {
+  background-color: #aaa;
+  font-size:14px;
+  padding:2px 5px;
+  text-align:left;
+  color:#FFF;
+}
+.c3-tooltip td {
+  font-size:13px;
+  padding: 3px 6px;
+  background-color:#fff;
+  border-left:1px dotted #999;
+}
+.c3-tooltip td > span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 6px;
+}
+.c3-tooltip td.value{
+  text-align: right;
+}