Adds grunt-contrib-sass, splits c3.css into multiple CSS files in src/scss. See #803.

.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

@@ -6,6 +6,9 @@ module.exports = (grunt) ->
           concat:
             tasks: 'concat'
             files: ['src/*.js']
+          sass:
+            tasks: 'sass'
+            files: ['src/scss/*.scss']
 
         concat:
           dist:
@@ -98,4 +101,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']

package.json

@@ -23,11 +23,12 @@
     "d3": "~3.4.4"
   },
   "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.7.1",
+    "grunt-contrib-sass": "^0.8.1",
     "grunt-contrib-uglify": "~0.4.0",
     "grunt-contrib-watch": "^0.6.1",
     "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;
+}