123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254 |
- /*-- Chart --*/
- .c3 {
- svg {
- font: 10px sans-serif;
- -webkit-tap-highlight-color: transparent;
- font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
- }
- path,
- line {
- fill: none;
- stroke: rgba(0, 40, 100, 0.12);
- }
- text {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- font-size: px2rem(12px);
- }
- }
- .c3-legend-item-tile,
- .c3-xgrid-focus,
- .c3-ygrid,
- .c3-event-rect,
- .c3-bars path {
- shape-rendering: crispEdges;
- }
- .c3-chart-arc {
- path {
- stroke: #fff;
- }
- text {
- fill: #fff;
- font-size: 13px;
- }
- }
- /*-- Axis --*/
- /*-- Grid --*/
- .c3-grid {
- line {
- stroke: #f0f0f0;
- }
- text {
- fill: #aaa;
- }
- }
- .c3-xgrid,
- .c3-ygrid {
- stroke: #e6e6e6;
- stroke-dasharray: 2 4;
- }
- /*-- Text on Chart --*/
- .c3-text {
- font-size: 12px;
- &.c3-empty {
- fill: #808080;
- font-size: 2em;
- }
- }
- /*-- Line --*/
- .c3-line {
- stroke-width: 2px;
- }
- /*-- Point --*/
- .c3-circle._expanded_ {
- stroke-width: 2px;
- stroke: white;
- }
- .c3-selected-circle {
- fill: white;
- stroke-width: 1.5px;
- }
- /*-- Bar --*/
- .c3-bar {
- stroke-width: 0;
- &._expanded_ {
- fill-opacity: 1;
- fill-opacity: 0.75;
- }
- }
- /*-- Focus --*/
- .c3-target {
- &.c3-focused {
- opacity: 1;
- path {
- &.c3-line,
- &.c3-step {
- stroke-width: 2px;
- }
- }
- }
- &.c3-defocused {
- opacity: 0.3 !important;
- }
- }
- /*-- Region --*/
- .c3-region {
- fill: steelblue;
- fill-opacity: 0.1;
- }
- /*-- Brush --*/
- .c3-brush .extent {
- fill-opacity: 0.1;
- }
- /*-- Select - Drag --*/
- /*-- Legend --*/
- .c3-legend-item text {
- fill: #545454;
- font-size: 14px;
- }
- .c3-legend-item-hidden {
- opacity: 0.15;
- }
- .c3-legend-background {
- fill: transparent;
- stroke: lightgray;
- stroke-width: 0;
- }
- /*-- Title --*/
- .c3-title {
- font: 14px sans-serif;
- }
- /*-- Tooltip --*/
- .c3-tooltip-container {
- z-index: 10;
- }
- .c3-tooltip {
- border-collapse: collapse;
- border-spacing: 0;
- empty-cells: show;
- font-size: 11px;
- line-height: 1;
- font-weight: 700;
- color: #fff;
- border-radius: 3px;
- background: #212529;
- white-space: nowrap;
- th {
- padding: 6px 6px;
- text-align: start;
- }
- td {
- padding: 4px 6px;
- font-weight: 400;
- > span {
- display: inline-block;
- width: 8px;
- height: 8px;
- margin-inline-end: 8px;
- border-radius: 50%;
- vertical-align: baseline;
- }
- &.value {
- text-align: end;
- }
- }
- }
- /*-- Area --*/
- .c3-area {
- stroke-width: 0;
- opacity: 0.1;
- }
- .c3-target-filled .c3-area {
- opacity: 1 !important;
- }
- /*-- Arc --*/
- .c3-chart-arcs-title {
- font-size: 1.3em;
- }
- .c3-chart-arcs {
- .c3-chart-arcs-background {
- fill: #e0e0e0;
- stroke: none;
- }
- .c3-chart-arcs-gauge-unit {
- fill: #000;
- font-size: 16px;
- }
- .c3-chart-arcs-gauge-max,
- .c3-chart-arcs-gauge-min {
- fill: #777;
- }
- }
- .c3-chart-arc {
- .c3-gauge-value {
- fill: #000;
- /* font-size: 28px !important;*/
- }
- &.c3-target {
- g path,
- &.c3-focused g path {
- opacity: 1;
- }
- }
- }
- .c3-axis {
- fill: #9aa0ac;
- }
|