less/plugins/crosshair.less
@import "../variable";
.tau-chart__layout .tau-crosshair {
&__line {
shape-rendering: crispEdges;
stroke-dasharray: 1px 1px;
stroke-width: 1px;
}
&__label__text {
fill: @bg-color;
stroke: none;
}
&__label__text,
&__label__text-shadow {
font-size: @font-size-s;
font-weight: normal;
}
&__line-shadow {
shape-rendering: crispEdges;
stroke: mix(@font-color, @bg-color, 25%);
stroke-width: 1px;
}
// Prevent drawing line shadow pixel over highlighted stroke
&__group.y .tau-crosshair__line-shadow {
transform: translateX(-0.5px);
}
&__group.x .tau-crosshair__line-shadow {
transform: translateY(0.5px);
}
&__label__text-shadow {
stroke-linejoin: round;
stroke-width: 3px;
visibility: hidden;
}
&__label__box {
fill-opacity: 0.85;
rx: 3px;
ry: 3px;
stroke: none;
}
}
.generate-crosshair-colors(@n; @i: 1) when (@i =< @n) {
.tau-chart__layout .tau-crosshair__line.color@{n}-@{i} {
stroke: extract(@category-colors, @i);
}
.tau-chart__layout .tau-crosshair__label.color@{n}-@{i} {
.tau-crosshair__label__text-shadow {
stroke: extract(@category-colors, @i);
}
.tau-crosshair__label__box {
fill: extract(@category-colors, @i);
}
}
.generate-crosshair-colors(@n; (@i + 1));
}
.generate-crosshair-colors(@list_category-colors);