TargetProcess/tauCharts

View on GitHub
less/plugins/crosshair.less

Summary

Maintainability
Test Coverage
@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);