Module
x/billboardjs/scss/theme/datalab.scss
π Re-usable, easy interface JavaScript chart library based on D3.js
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394/*-- Datalab Theme --*/@charset "UTF-8";
$font-family: "Sans Pro",Arial,sans-serif, "nanumgothic", "Dotum";$line-stroke-widdth: 0.7px;$text-font-size: 11px;
/*-- Default color pattern --*/.bb-color-pattern { background-image: url("#2ac4b3;#feaf29;#ff617b;#73a2ef;#b180d0;#3064cf;#d0a45f;#8aaec7;#ef65a2;#8aaec7;");}
/*-- Chart --*/.bb { svg { font-size: $text-font-size; font-family: $font-family; line-height: 1; } path, line { fill: none; stroke: #000; } text, .bb-button { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-font-smoothing: antialiased; user-select: none; fill: #555; font-size: $text-font-size; }}
/*-- Axis --*/.bb-axis { stroke-width: $line-stroke-widdth;}
.bb-axis-y text, .bb-axis-y2 text { fill: #737373;}.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 { 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: $line-stroke-widdth;}
/*-- Point --*/.bb-circle { fill: #fff !important;}
.bb-circle { &._expanded_ { stroke-width: 2px; }}
.bb-selected-circle { fill: white; stroke-width: 2px;}
/*-- Bar --*/.bb-bar { stroke-width: 1px;
&._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; }}
/*-- Legend --*/.bb-legend-item { user-select: none; line.bb-legend-item-tile { stroke-linecap: round; stroke-width: 8px; transform: translate(7px, 1px); stroke-dasharray: 1 20; }}
.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; border-radius: 2px; empty-cells:show; border: 1px solid #999; background-color: #fff; text-align: left; font-size: 11px; -webkit-font-smoothing: antialiased; th { font-size: 13px; padding: 2px 8px; text-align:left; // border-bottom: solid 2px red; // background-color: #000; // color: #fff; border-bottom: solid 2px #ff2d2d; background-color: #0b00b1; color: #fffdfd; } td { padding: 4px 6px; // background-color:#fff; &:first-child { padding-left: 8px; } &:last-child { padding-right:8px; } > span, > svg { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border: solid 1px #000; border-radius: 3px; 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: 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: $text-font-size; } }}
/*-- Area --*/.bb-area { stroke-width: 0; opacity: 0.2;}
/*-- Arc --*/.bb-chart-arcs-title { dominant-baseline: middle; font-size: 1.3em;}
.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: 18px; } .bb-chart-arcs-gauge-min, .bb-chart-arcs-gauge-max { fill: #777; } .bb-chart-arcs-title { font-size: 18px !important; fill: #000; font-weight: 600; } path.empty { fill: #eaeaea; stroke-width: 0; }}
.bb-chart-arc { .bb-gauge-value { fill: #3b6969; } path { stroke: #000; stroke-width: 0.5px; } rect { stroke: #fff; stroke-width: 1; }
text { fill: #fff; font-size: 14px; }}
/*-- 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: $line-stroke-widdth; } }}
/*-- 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; }}