You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
2.1 KiB
136 lines
2.1 KiB
// Chart styles
|
|
// ----------------------------------------------
|
|
|
|
.CDB-Widget-chart--fake {
|
|
@include display-flex();
|
|
@include justify-content(space-between, justify);
|
|
@include align-items(flex-end);
|
|
width: 100%;
|
|
height: 107px; // match real widget content height, to avoid "jumpy" behavior
|
|
}
|
|
|
|
.CDB-Widget-chartItem--fake {
|
|
@include flex-grow(1);
|
|
display: inline-block;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.CDB-Widget-chartItem--small {
|
|
height: 16px;
|
|
}
|
|
|
|
.CDB-Widget-chartItem--medium {
|
|
height: 32px;
|
|
}
|
|
|
|
.CDB-Widget-chartItem--big {
|
|
height: 48px;
|
|
}
|
|
|
|
.CDB-Chart.is-selectable .CDB-Chart-handle,
|
|
.CDB-Chart.is-selectable .CDB-Chart-handleLine {
|
|
opacity: 1;
|
|
}
|
|
|
|
.extent {
|
|
opacity: 0;
|
|
fill-opacity: 0;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
.CDB-Chart-bar {
|
|
transition: fill 200ms ease;
|
|
shape-rendering: geometricPrecision;
|
|
}
|
|
|
|
.CDB-Chart-bar.is-highlighted {
|
|
opacity: 1;
|
|
}
|
|
|
|
.CDB-Chart-line {
|
|
stroke-width: 1;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
.CDB-Chart-line.CDB-Chart-line--bottom {
|
|
stroke-width: 1;
|
|
opacity: 0.2;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
.CDB-Chart-handle {
|
|
opacity: 0;
|
|
}
|
|
|
|
.CDB-Chart-handleRect {
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.CDB-Chart-handleGrip {
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.CDB-Chart-handleLine {
|
|
stroke-width: 2;
|
|
opacity: 0;
|
|
}
|
|
|
|
.CDB-Chart-staticTips {
|
|
display: none;
|
|
margin-right: $baseSize;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
@media (min-width: $sMedia-s) and (max-width: $sMedia-l) {
|
|
.CDB-Chart-staticTips {
|
|
display: block;
|
|
}
|
|
|
|
.CDB-Chart-axisTip,
|
|
.CDB-Chart-axisTipRect {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.CDB-Chart-staticTip {
|
|
padding: 0 4px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.CDB-Chart-axis {
|
|
@include css3-prefix(user-select, none);
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
.CDB-Chart-axis path {
|
|
display: none;
|
|
}
|
|
|
|
.CDB-Chart-axis line {
|
|
stroke-width: 1;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
.CDB-Chart-staticTipText {
|
|
line-height: 20px;
|
|
}
|
|
|
|
.CDB-Chart-axisTipText {
|
|
@include css3-prefix(user-select, none);
|
|
font-size: $sFontSize-small;
|
|
}
|
|
|
|
.CDB-Chart-shadowBar {
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
@media (max-width: $sMedia-l) {
|
|
.CDB-Widget-chart--fake {
|
|
display: none;
|
|
}
|
|
|
|
.CDB-Widget-chartItem--fake {
|
|
display: none;
|
|
}
|
|
}
|