feat(theme): Add new 'graph' theme

Add new css theme 'graph' file [skip ci] Fix #631 Close #647
naver · Nov 12, 2018 · 014537a · 014537a
1 parent c638917
commit 014537a
Show file tree

Hide file tree

Showing 2 changed files with 379 additions and 0 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -95,6 +95,7 @@ <h2 class="sidebar-brand">billboard.js</h2>
             Theme: <select class="classic">
                 <option value="">default</option>
                 <option value="insight">insight</option>
+                <option value="graph">graph</option>
             </select>
         </form>
         <ul class="sidebar-nav"></ul>

diff --git a/src/scss/theme/graph.scss b/src/scss/theme/graph.scss
@@ -0,0 +1,378 @@
+/*-- Graph Theme --*/
+@charset "UTF-8";
+
+$font-family: Helvetica, 'Apple SD Gothic Neo', Arial, sans-serif, "nanumgothic", "Dotum";
+$axis-color: #8c8c8c;
+@mixin select-none {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+/*-- Default color pattern --*/
+.bb-color-pattern {
+    background-image: url("#65CFC2;#D0A45F;#64A4F5;#EF65A2;#A377FE;#8AAEC7;#FF7E5A;#898EFE;#FFAC35;#70B0FF;");
+}
+
+/*-- Chart --*/
+.bb {
+    svg {
+        font-size: 12px;
+        font-family: $font-family;
+        line-height: 1;
+    }
+
+    path, line {
+        fill: none; stroke: $axis-color;
+    }
+
+    text, .bb-button {
+        @include select-none;
+        fill: #555;
+        font-size: 12px;
+        letter-spacing: -.3px;
+    }
+}
+
+.bb-legend-item-title,
+.bb-xgrid-focus,
+.bb-ygrid,
+.bb-event-rect,
+.bb-bars path {
+    shape-rendering: crispEdges;
+}
+
+/*-- Axis --*/
+.bb-axis-y text, .bb-axis-y2 text {
+    fill: $axis-color;
+}
+.bb-axis-y2 .tick {}
+
+.bb-event-rects {
+    fill-opacity: 1 !important;
+
+    .bb-event-rect {
+        fill: transparent;
+    }
+
+    .bb-event-rect._active_ {
+        fill: rgba(39, 201, 3, 0.05);
+    }
+}
+
+.tick._active_ text {
+    fill: #00c83c !important;
+}
+
+/*-- Grid --*/
+.bb-grid {
+    line {
+        stroke: #f1f1f1;
+    }
+
+    .bb-ygrid:last-child {
+        stroke: #e9e9e9;
+    }
+}
+
+.bb-xgrid-focus line {
+    stroke: #ffb6b6;
+    stroke-dasharray: 3px;
+}
+
+/*-- Text on Chart --*/
+.bb-text {
+    &.bb-empty {
+        fill: #767676;
+    }
+}
+
+/*-- Line --*/
+.bb-line {
+    stroke-width: 1px;
+}
+
+/*-- Point --*/
+.bb-circle {
+    &._expanded_ {
+        stroke-width: 2px;
+    }
+}
+
+rect.bb-circle, use.bb-circle {
+  &._expanded_ {
+    stroke-width: 2px;
+  }
+}
+
+.bb-selected-circle {
+    fill: white;
+    stroke-width: 2px;
+}
+
+/*-- Bar --*/
+.bb-bar {
+    stroke-width: 0;
+
+    &._expanded_ {
+        fill-opacity: 0.75;
+    }
+}
+
+/*-- Focus --*/
+.bb-target {
+    &.bb-focused {
+        opacity: 1;
+
+        path {
+            &.bb-line, &.bb-step {
+                stroke-width: 2px;
+            }
+        }
+    }
+
+    &.bb-defocused { opacity: 0.3 !important; }
+}
+
+/*-- Region --*/
+.bb-region {
+    fill: steelblue;
+    fill-opacity: 0.1;
+
+    &.selected rect {
+        fill: rgb(39, 201, 3);
+    }
+}
+
+/*-- Zoom region --*/
+.bb-zoom-brush {
+    fill-opacity: .1;
+}
+
+/*-- Brush --*/
+.bb-brush {
+    .extent {
+        fill-opacity: 0.1;
+    }
+}
+
+/*-- Select - Drag --*/
+/*-- Legend --*/
+.bb-legend-item-hidden {
+    opacity: 0.15;
+}
+
+.bb-legend-background {
+    opacity: 0.75;
+    fill: white;
+    stroke: lightgray;
+    stroke-width: 1px;
+}
+
+.bb-legend-item line {
+    stroke-dasharray: 1px;
+}
+
+/*-- Title --*/
+.bb-title {
+    font-size: 14px;
+}
+
+/*-- Tooltip --*/
+.bb-tooltip-container {
+    z-index: 10;
+    font-family: $font-family;
+    position: absolute;
+}
+
+.bb-tooltip {
+    @include select-none;
+    border-collapse: separate;
+    border-spacing:0;
+    empty-cells:show;
+    border: 1px solid #999;
+    border-radius: 2px;
+    background-color: #fff;
+    text-align: left;
+    font-size: 12px;
+    box-shadow: .5px .5px 1px #999;
+
+    th {
+        font-size: 12px;
+        padding: 4px 8px;
+        text-align: center;
+        border-bottom: dotted 1px #000;
+        background-color: #efefef;
+        color: #000;
+    }
+
+    tr {
+        &:last-child td {
+            border-bottom: none;
+        }
+    }
+
+    td {
+        padding: 3px 6px;
+        background-color:#fff;
+        border-bottom: solid 1px #eee;
+
+        &:first-child {
+            padding-left: 5px;
+            border-right: solid 1px #eee;
+        }
+
+        &:last-child {
+            padding-right:5px;
+        }
+
+        > span, > svg {
+            display: inline-block;
+            width: 5px;
+            height: 12px;
+            margin-right: 6px;
+            vertical-align: middle;
+        }
+
+        &.value {
+            border-left: 1px solid transparent;
+            text-align: right;
+        }
+    }
+
+    .bb-tooltip-title {
+        display: inline-block;
+        color: #aaa;
+        line-height: 20px;
+    }
+
+    .bb-tooltip-detail {
+        table {
+            border-collapse: collapse;
+            border-spacing: 1px;
+            font-size: 12px;
+        }
+
+        .bb-tooltip-name, .bb-tooltip-value {
+            line-height: 13px;
+            padding: 4px 0 3px;
+            color: #444;
+            text-align: left;
+            font-weight: normal;
+        }
+
+        .bb-tooltip-value {
+            padding-left: 5px;
+            font-weight: 800;
+        }
+    }
+}
+
+/*-- Area --*/
+.bb-area {
+    stroke-width: 0;
+    opacity: 0.2;
+}
+
+/*-- Arc --*/
+.bb-chart-arcs-title {
+    dominant-baseline: middle;
+    font-size: 1.3em;
+}
+
+.bb-chart-arcs {
+    .bb-chart-arcs-background {
+        fill: #e0e0e0;
+        stroke: none;
+    }
+
+    .bb-chart-arcs-gauge-unit {
+        fill: #000;
+        font-size: 16px;
+    }
+
+    .bb-chart-arcs-gauge-min, .bb-chart-arcs-gauge-max {
+        fill: #777;
+    }
+
+    .bb-chart-arcs-title {
+        font-size: 16px !important;
+        fill: $axis-color;
+        font-style: italic;
+    }
+
+    path.empty {
+        fill: #eaeaea;
+        stroke-width: 0;
+    }
+}
+
+.bb-chart-arc {
+    .bb-gauge-value {
+        fill: $axis-color;
+        font-style: italic;
+    }
+
+    path {
+        stroke: #fff;
+    }
+
+    text {
+        fill: #fff;
+        font-size: 13px;
+        font-weight: bold;
+    }
+}
+
+/*-- Radar --*/
+.bb-chart-radars {
+    .bb-levels {
+        polygon {
+            fill: none;
+            stroke: $axis-color;
+            stroke-width: .5px;
+        }
+
+        text {
+            fill: $axis-color;
+        }
+    }
+
+    .bb-axis {
+        line {
+            stroke: $axis-color;
+            stroke-width: .5px;
+        }
+
+        text {
+            font-size: 1.15em;
+            font-weight: bold;
+            cursor: default;
+        }
+    }
+
+    .bb-shapes {
+        polygon {
+            fill-opacity: .2;
+            stroke-width: 1px;
+        }
+    }
+}
+
+/*-- Button --*/
+.bb-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+
+    .bb-zoom-reset {
+        border: solid 1px #ccc;
+        background-color: #fff;
+        padding: 5px;
+        border-radius: 5px;
+        cursor: pointer;
+        opacity: .8;
+        box-shadow: 1px 1px 2px #ccc;
+    }
+}