/*-- Chart --*/
|
|
.c3 {
|
direction: ltr !important;
|
|
svg {
|
-webkit-tap-highlight-color: transparent;
|
}
|
|
path,
|
line {
|
fill: none;
|
}
|
|
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;
|
}
|
|
/*-- Axis --*/
|
/*-- Grid --*/
|
|
|
.c3-xgrid,
|
.c3-ygrid {
|
stroke-dasharray: 3 3;
|
}
|
|
/*-- Text on Chart --*/
|
|
.c3-text.c3-empty {
|
font-size: 2em;
|
}
|
|
/*-- Line --*/
|
|
.c3-line {
|
stroke-width: 1px;
|
}
|
|
/*-- Point --*/
|
|
.c3-circle._expanded_ {
|
stroke: white;
|
stroke-width: 1px;
|
}
|
|
.c3-selected-circle {
|
fill: white;
|
stroke-width: 2px;
|
}
|
|
/*-- Bar --*/
|
|
.c3-bar {
|
stroke-width: 0;
|
|
&._expanded_ {
|
fill-opacity: 1;
|
fill-opacity: .75;
|
}
|
}
|
|
/*-- Focus --*/
|
|
.c3-target {
|
&.c3-focused {
|
opacity: 1;
|
|
path.c3-line,
|
path.c3-step {
|
stroke-width: 2px;
|
}
|
}
|
|
&.c3-defocused {
|
opacity: .3 !important;
|
}
|
}
|
|
/*-- Region --*/
|
|
.c3-region {
|
fill: steelblue;
|
fill-opacity: .1;
|
}
|
|
/*-- Brush --*/
|
|
.c3-brush .extent {
|
fill-opacity: .1;
|
}
|
|
/*-- Select - Drag --*/
|
/*-- Legend --*/
|
|
.c3-legend-item-hidden {
|
opacity: .15;
|
}
|
|
.c3-legend-background {
|
opacity: .75;
|
fill: white;
|
stroke: lightgray;
|
stroke-width: 1;
|
}
|
|
/*-- Area --*/
|
|
.c3-area {
|
opacity: .2;
|
stroke-width: 0;
|
}
|
|
/*-- Arc --*/
|
|
.c3-chart-arcs-title {
|
font-size: 1.3em;
|
dominant-baseline: middle;
|
}
|
|
.c3-chart-arc.c3-target g path,
|
.c3-chart-arc.c3-target.c3-focused g path {
|
opacity: 1;
|
}
|
|
.default-style {
|
@import "~@/vendor/styles/_appwork/include";
|
|
$c3-grid-color: $gray-200 !default;
|
$c3-guide-color: $gray-200 !default;
|
$c3-text-color: $body-color !default;
|
$c3-arcs-background: $gray-100 !default;
|
$c3-arcs-stroke: #fff !default;
|
$c3-tooltip-padding: 6px !default;
|
|
.c3 {
|
svg {
|
font: 11px $font-family-base;
|
}
|
|
path,
|
line {
|
fill: none;
|
stroke: $c3-grid-color;
|
}
|
|
text {
|
fill: $body-color;
|
}
|
}
|
|
.c3-chart-arc {
|
path {
|
stroke: $c3-arcs-stroke;
|
}
|
|
text {
|
font-size: $font-size-sm;
|
fill: $c3-arcs-stroke;
|
}
|
}
|
|
.c3-grid {
|
line {
|
stroke: $c3-grid-color;
|
}
|
|
text {
|
fill: $c3-grid-color;
|
}
|
}
|
|
.c3-text.c3-empty {
|
fill: $text-muted;
|
}
|
|
.c3-legend-item {
|
font-size: $font-size-sm;
|
}
|
|
.c3-title {
|
font: $font-size-base $font-family-base;
|
}
|
|
.c3-chart-arcs .c3-chart-arcs-background {
|
fill: $c3-arcs-background;
|
stroke: none;
|
}
|
|
.c3-chart-arcs .c3-chart-arcs-gauge-unit {
|
font-size: $font-size-lg;
|
fill: $body-color;
|
}
|
|
.c3-chart-arcs .c3-chart-arcs-gauge-max,
|
.c3-chart-arcs .c3-chart-arcs-gauge-min {
|
fill: $body-color;
|
}
|
|
.c3-chart-arc .c3-gauge-value {
|
fill: $body-color;
|
}
|
|
.c3-tooltip-container {
|
z-index: 10;
|
padding: $c3-tooltip-padding;
|
background-color: $tooltip-bg;
|
|
@include border-radius($border-radius);
|
}
|
|
.c3-tooltip {
|
border-spacing: 0;
|
border-collapse: collapse;
|
empty-cells: show;
|
}
|
|
.c3-tooltip,
|
.c3-tooltip tr,
|
.c3-tooltip th,
|
.c3-tooltip td {
|
border: none;
|
background: none !important;
|
color: $tooltip-color;
|
font-size: $font-size-sm;
|
}
|
|
.c3-tooltip th {
|
padding: 0 $c3-tooltip-padding;
|
}
|
|
.c3-tooltip td {
|
padding: 0 $c3-tooltip-padding;
|
|
&.value {
|
text-align: right;
|
}
|
|
> span {
|
display: inline-block;
|
margin-right: $c3-tooltip-padding;
|
width: 10px;
|
height: 10px;
|
}
|
}
|
}
|
|
.material-style {
|
@import "~@/vendor/styles/_appwork/include-material";
|
|
$c3-grid-color: $gray-200 !default;
|
$c3-guide-color: $gray-200 !default;
|
$c3-text-color: $body-color !default;
|
$c3-arcs-background: $gray-100 !default;
|
$c3-arcs-stroke: #fff !default;
|
$c3-tooltip-padding: 6px !default;
|
|
.c3 {
|
svg {
|
font: 11px $font-family-base;
|
}
|
|
path,
|
line {
|
fill: none;
|
stroke: $c3-grid-color;
|
}
|
|
text {
|
fill: $body-color;
|
}
|
}
|
|
.c3-chart-arc {
|
path {
|
stroke: $c3-arcs-stroke;
|
}
|
|
text {
|
font-size: $font-size-sm;
|
fill: $c3-arcs-stroke;
|
}
|
}
|
|
.c3-grid {
|
line {
|
stroke: $c3-grid-color;
|
}
|
|
text {
|
fill: $c3-grid-color;
|
}
|
}
|
|
.c3-text.c3-empty {
|
fill: $text-muted;
|
}
|
|
.c3-legend-item {
|
font-size: $font-size-sm;
|
}
|
|
.c3-title {
|
font: $font-size-base $font-family-base;
|
}
|
|
.c3-chart-arcs .c3-chart-arcs-background {
|
fill: $c3-arcs-background;
|
stroke: none;
|
}
|
|
.c3-chart-arcs .c3-chart-arcs-gauge-unit {
|
font-size: $font-size-lg;
|
fill: $body-color;
|
}
|
|
.c3-chart-arcs .c3-chart-arcs-gauge-max,
|
.c3-chart-arcs .c3-chart-arcs-gauge-min {
|
fill: $body-color;
|
}
|
|
.c3-chart-arc .c3-gauge-value {
|
fill: $body-color;
|
}
|
|
.c3-tooltip-container {
|
z-index: 10;
|
padding: $c3-tooltip-padding;
|
background-color: $tooltip-bg;
|
|
@include border-radius($border-radius);
|
}
|
|
.c3-tooltip {
|
border-spacing: 0;
|
border-collapse: collapse;
|
empty-cells: show;
|
}
|
|
.c3-tooltip,
|
.c3-tooltip tr,
|
.c3-tooltip th,
|
.c3-tooltip td {
|
border: none;
|
background: none !important;
|
color: $tooltip-color;
|
font-size: $font-size-sm;
|
}
|
|
.c3-tooltip th {
|
padding: 0 $c3-tooltip-padding;
|
}
|
|
.c3-tooltip td {
|
padding: 0 $c3-tooltip-padding;
|
|
&.value {
|
text-align: right;
|
}
|
|
> span {
|
display: inline-block;
|
margin-right: $c3-tooltip-padding;
|
width: 10px;
|
height: 10px;
|
}
|
}
|
}
|
