less/taucharts.less
@import "variable";
@import "fonts";
@import "layout";
@import "forms";
@import "buttons";
@link-color: #3962FF;
@link-hover-color: #E17152;
//@axis-color: #BDC3CD;
/* region Generate .color@{n}-@{i} function */
.generate-colors(@n; @i: 1) when (@i =< @n) {
.tau-chart__svg .color@{n}-@{i} {
stroke: extract(@category-colors, @i);
fill: extract(@category-colors, @i);
}
.generate-colors(@n; (@i + 1));
}
.generate-colors(@list_category-colors);
.tau-chart__svg {
.color-default {
stroke: @default-color;
fill: @default-color;
}
}
/* endregion */
/* region Generate .line-params-@{n} function */
.generate-line-params(@params; @default-size; @step; @n; @i: 1) when (@i =< @n) {
.tau-chart__line-@{params}-@{i} {
stroke-@{params}: @default-size;
}
.generate-line-params(@default-size: (@default-size + @step); @params; @step; @n; (@i + 1));
}
/* Generate .line-size-@{n} */
.generate-line-params(@params: width; @default-size: 1px; @step: 0.5px; @n: 5);
/* Generate .line-opacity-@{n} */
.generate-line-params(@params: opacity; @default-size: 1; @step: -0.05; @n: 5);
/* endregion */
/* endregion */
.tau-chart {
/* Links */
a {
color: @link-color;
border-bottom: 1px solid fade(@link-color, 30%);
text-decoration: none;
&:hover {
color: @link-hover-color;
border-bottom: 1px solid fade(@link-hover-color, 30%);
}
}
&__time-axis-overflow {
.tick:nth-child(even) {
display: none;
}
}
/* Axises and Grid */
&__svg {
display: block;
overflow: hidden;
.place {
fill: #fff;
stroke: #000;
stroke-opacity: 0.7;
stroke-width: 0.5;
}
.place-label {
opacity: 0.7;
font-size: @font-size-xs;
color: #000000;
line-height: 13px;
text-anchor: start;
}
.place-label-countries,
.place-label-subunits,
.place-label-states {
text-anchor: middle;
font-size: @font-size-xxs;
fill: fade(@font-color, 50%);
line-height: 10px;
text-transform: capitalize;
}
.map-contour-level path {
stroke-opacity: 0.5;
stroke-linejoin: 'round';
}
.map-contour-level-0 path {
stroke: @map-contour-stroke-color0;
}
.map-contour-level-1 path {
stroke: @map-contour-stroke-color1;
}
.map-contour-level-2 path {
stroke: @map-contour-stroke-color2;
}
.map-contour-level-3 path {
stroke: @map-contour-stroke-color3;
}
.map-contour-level-4 path {
stroke: @map-contour-stroke-color4;
}
.map-contour-highlighted,
.map-contour:hover {
fill: @map-fill-color-highlighted;
path {
stroke: @map-contour-stroke-color-highlighted;
}
text {
fill: @map-text-color-highlighted;
}
}
.axis {
line,
path {
stroke-width: 1;
fill: none;
stroke: @axis-color;
shape-rendering: crispEdges;
}
}
.axis.facet-axis {
.tick {
line {
opacity: 0;
}
line.label-ref {
opacity: 1;
}
text {
font-size: @font-size-s;
font-weight: 600;
}
}
path.domain {
opacity: 0;
}
}
.axis.facet-axis.compact {
.tick {
text {
font-weight: normal;
}
}
.label {
font-weight: normal;
.label-token {
font-weight: normal;
}
}
}
.tick text {
font-size: @font-size-xs;
}
.grid {
.grid-lines {
path {
shape-rendering: crispEdges;
}
}
.line path,
path.line,
path.domain {
fill: none;
}
.tick > line,
.extra-tick-line {
fill: none;
stroke: @axis-color;
stroke-width: 1px;
shape-rendering: crispEdges;
}
.tick.zero-tick > line {
stroke: mix(@axis-color, @font-color, 82.5%);
}
.line path {
shape-rendering: auto;
}
.cursor-line {
shape-rendering: crispEdges;
stroke: mix(@font-color, @bg-color, 40%);
stroke-width: 1px;
}
}
.label {
font-size: @font-size-s;
font-weight: 600;
.label-token {
font-size: @font-size-s;
font-weight: 600;
text-transform: capitalize;
}
.label-token-1,
.label-token-2 {
font-weight: normal;
}
.label-token-2 {
fill: gray;
}
.label-token-delimiter {
font-weight: normal;
fill: gray;
}
}
.label.inline {
.label-token {
font-weight: normal;
fill: gray;
text-transform: none;
}
}
.brush .selection {
fill-opacity: .3;
stroke: #fff;
shape-rendering: crispEdges;
}
.background {
stroke: @parallel-background-line-color;
}
}
/* Scatterplot */
&__dot {
opacity: @dot-opacity;
stroke-width: 0;
transition: stroke-width 0.1s ease, opacity 0.2s ease;
}
/* Linechart */
&__line {
fill: none;
transition: stroke-opacity 0.2s ease, stroke-width 0.2s ease;
}
&__dot-line {
opacity: 1;
transition: stroke-opacity 0.2s ease;
}
/* Bar */
&__bar {
opacity: 0.7;
shape-rendering: geometricPrecision;
stroke-opacity: 0.5;
stroke-width: 1;
stroke: #fff;
transition: opacity 0.2s ease;
}
&__area {
transition: opacity 0.2s ease;
path:not(.i-data-anchor),
polygon {
opacity: 0.6;
transition: stroke-opacity 0.2s ease, stroke-width 0.2s ease;
}
}
/* TODO: fix to avoid conflict on "stroke" with color brewer */
/* TODO: remove this when CSS for color brewer is fixed */
.tau-chart__svg &__bar {
stroke: #fff;
}
/* PLUGINS */
/* Highlighter */
&__dot&__highlighted {
stroke-width: 1;
opacity: 1;
}
&__dot&__dimmed {
opacity: 0.2;
}
&__line&__highlighted {
stroke-opacity: 1;
stroke-width: 3;
}
&__line&__dimmed {
stroke-opacity: 0.2;
}
.i-role-label&__highlighted,
&__area&__highlighted,
&__bar&__highlighted {
stroke-opacity: 1;
opacity: 1;
}
.i-role-label&__dimmed,
&__area&__dimmed,
&__bar&__dimmed {
opacity: 0.2;
}
}