Skip to main content
Module

x/billboardjs/scss/theme/insight.scss

πŸ“Š Re-usable, easy interface JavaScript chart library based on D3.js
Go to Latest
File
/*-- Insight Theme --*/@charset "UTF-8";
$font-family: sans-serif, Arial, "nanumgothic", "Dotum";
/*-- Default color pattern --*/.bb-color-pattern { background-image: url("#00c73c;#fa7171;#2ad0ff;#7294ce;#e3e448;#cc7e6e;#fb6ccf;#c98dff;#4aea99;#bbbbbb;");}
/*-- Chart --*/.bb { svg { font-size: 12px; font-family: $font-family; line-height: 1; } path, line { fill: none; stroke: #c4c4c4; } text, .bb-button { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; fill: #555; font-size: 11px; }}
.bb-legend-item-title,.bb-xgrid-focus,.bb-ygrid-focus,.bb-ygrid,.bb-event-rect,.bb-bars path { shape-rendering: crispEdges;}
/*-- Axis --*/.bb-axis { shape-rendering: crispEdges;}
.bb-axis-y text, .bb-axis-y2 text { fill: #737373;}
.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 { pointer-events: none; line { stroke: #f1f1f1; }}
.bb-xgrid-focus line, .bb-ygrid-focus line { stroke: #ddd;}
/*-- Text on Chart --*/.bb-text { &.bb-empty { fill: #767676; }}
/*-- Line --*/.bb-line { stroke-width: 1px;}
/*-- Point --*/.bb-circle { &._expanded_ { fill: #fff !important; stroke-width: 2px; stroke: red; }}
rect.bb-circle, use.bb-circle { &._expanded_ { stroke-width: 1px; }}
.bb-selected-circle { fill: white; stroke-width: 2px;}
/*-- Bar --*/.bb-bar { stroke-width: 0;
&._expanded_ { fill-opacity: 0.75; }}
/*-- Candlestick --*/.bb-candlestick { stroke-width: 1px;
&._expanded_ { fill-opacity: 0.75; }}
/*-- Focus --*/.bb-target, .bb-circles { &.bb-focused { opacity: 1; path { &.bb-line, &.bb-step { stroke-width: 2px; } } } &.bb-defocused { opacity: 0.3 !important; .text-overlapping { opacity: .05 !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 { user-select: none;}
.bb-legend-item-hidden { opacity: 0.15;}
.bb-legend-background { opacity: 0.75; fill: white; stroke: lightgray; stroke-width: 1;}
/*-- Title --*/.bb-title { font-size: 14px;}
/*-- Tooltip --*/.bb-tooltip-container { z-index: 10; font-family: $font-family; user-select: none;}
.bb-tooltip { border-collapse: separate; border-spacing:0; empty-cells:show; border: 1px solid #999; background-color: #fff; text-align: left; font-size: 11px; th { font-size:12px; padding:4px 8px; text-align:left; border-bottom: solid 1px #eee; } td { padding: 4px 6px; background-color:#fff; &:first-child { padding-left: 8px; } &:last-child { padding-right:8px; } > span, > svg { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 5px; vertical-align: middle; } &.value { border-left: 1px solid transparent; } } .bb-tooltip-title { display: inline-block; color: #aaa; line-height: 20px; } .bb-tooltip-detail { table { border-collapse: collapse; border-spacing: 0; } .bb-tooltip-name, .bb-tooltip-value { font-size: 11px; line-height: 13px; padding: 4px 0 3px; color: #444; text-align: left; font-weight: normal; } .bb-tooltip-value { padding-left: 5px; font-weight: 800; font-size: 12px; } }}
/*-- Area --*/.bb-area { stroke-width: 0; opacity: 0.2;}
/*-- Arc --*/.bb-chart-arcs-title { dominant-baseline: middle; font-size: 1.3em;}
text.bb-chart-arcs-gauge-title { dominant-baseline: middle; font-size: 2.7em;}
.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: #000; font-weight: 600; } path.empty { fill: #eaeaea; stroke-width: 0; } /*-- Polar --*/ .bb-levels { circle { fill: none; stroke: #848282; stroke-width: .5px; }
text { fill: #848282; } }}
.bb-chart-arc { .bb-gauge-value { fill: #000; } path { stroke: #fff; } rect { stroke: #fff; stroke-width: 1; }
text { fill: #fff; font-size: 13px; }}
/*-- Radar --*/.bb-chart-radars { .bb-levels { polygon { fill: none; stroke: #848282; stroke-width: .5px; } text { fill: #848282; } } .bb-axis { line { stroke: #848282; stroke-width: .5px; } text { font-size: 1.15em; 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; }}