Skip to content

Commit

Permalink
Chart: allow using --end variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramiy
ramiy committed Jan 16, 2021
1 parent f9e9468 commit acb290e
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 34 deletions.
24 changes: 12 additions & 12 deletions src/charts/_area.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,8 @@

&::before {
clip-path: polygon(
0% calc(100% * (1 - var(--start, var(--size)))),
100% calc(100% * (1 - var(--size))),
0% calc(100% * (1 - var(--start, var(--end, var(--size))))),
100% calc(100% * (1 - var(--end, var(--size)))),
100% 100%,
0% 100%
);
Expand All @@ -145,7 +145,7 @@
}

&::after {
height: calc(100% * var(--size));
height: calc(100% * var(--end, var(--size)));
}
}
}
Expand All @@ -156,8 +156,8 @@

&::before {
clip-path: polygon(
0% calc(100% * (1 - var(--size))),
100% calc(100% * (1 - var(--start, var(--size)))),
0% calc(100% * (1 - var(--end, var(--size)))),
100% calc(100% * (1 - var(--start, var(--end, var(--size))))),
100% 100%,
0% 100%
);
Expand All @@ -168,7 +168,7 @@
}

&::after {
height: calc(100% * var(--size));
height: calc(100% * var(--end, var(--size)));
}
}
}
Expand All @@ -183,8 +183,8 @@
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(100% * var(--size)),
0% calc(100% * var(--start, var(--size)))
100% calc(100% * var(--end, var(--size))),
0% calc(100% * var(--start, var(--end, var(--size))))
);
}

Expand All @@ -193,7 +193,7 @@
}

&::after {
height: calc(100% * (1 -var(--size)));
height: calc(100% * (1 -var(--end, var(--size))));
}
}
}
Expand All @@ -206,8 +206,8 @@
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(100% * var(--start, var(--size))),
0% calc(100% * var(--size))
100% calc(100% * var(--start, var(--end, var(--size)))),
0% calc(100% * var(--end, var(--size)))
);
}

Expand All @@ -216,7 +216,7 @@
}

&::after {
height: calc(100% * (1 - var(--size)));
height: calc(100% * (1 - var(--end, var(--size))));
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/charts/_bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
display: flex;
align-items: center;

width: calc(100% * var(--size, 1));
width: calc(100% * var(--end, var(--size, 1)));
height: 100%;

position: relative; // For tooltips
Expand Down
2 changes: 1 addition & 1 deletion src/charts/_column.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
justify-content: center;

width: 100%;
height: calc(100% * var(--size, 1));
height: calc(100% * var(--end, var(--size, 1)));

position: relative; // For tooltips
}
Expand Down
40 changes: 20 additions & 20 deletions src/charts/_line.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,10 +135,10 @@

&::before {
clip-path: polygon(
0% calc(100% * (1 - var(--start, var(--size)))),
100% calc(100% * (1 - var(--size))),
100% calc(100% * (1 - var(--size)) - var(--line-size)),
0% calc(100% * (1 - var(--start, var(--size))) - var(--line-size))
0% calc(100% * (1 - var(--start, var(--end, var(--size))))),
100% calc(100% * (1 - var(--end, var(--size)))),
100% calc(100% * (1 - var(--end, var(--size))) - var(--line-size)),
0% calc(100% * (1 - var(--start, var(--end, var(--size)))) - var(--line-size))
);
}

Expand All @@ -147,7 +147,7 @@
}

&::after {
height: calc(100% * var(--size));
height: calc(100% * var(--end, var(--size)));
}
}
}
Expand All @@ -158,10 +158,10 @@

&::before {
clip-path: polygon(
0% calc(100% * (1 - var(--size))),
100% calc(100% * (1 - var(--start, var(--size)))),
100% calc(100% * (1 - var(--start, var(--size))) - var(--line-size)),
0% calc(100% * (1 - var(--size)) - var(--line-size)),
0% calc(100% * (1 - var(--end, var(--size)))),
100% calc(100% * (1 - var(--start, var(--end, var(--size))))),
100% calc(100% * (1 - var(--start, var(--end, var(--size)))) - var(--line-size)),
0% calc(100% * (1 - var(--end, var(--size))) - var(--line-size))
);
}

Expand All @@ -170,7 +170,7 @@
}

&::after {
height: calc(100% * var(--size));
height: calc(100% * var(--end, var(--size)));
}
}
}
Expand All @@ -183,10 +183,10 @@

&::before {
clip-path: polygon(
0% calc(100% * var(--start, var(--size)) - var(--line-size)),
100% calc(100% * var(--size) - var(--line-size)),
100% calc(100% * var(--size)),
0% calc(100% * var(--start, var(--size)))
0% calc(100% * var(--start, var(--end, var(--size))) - var(--line-size)),
100% calc(100% * var(--end, var(--size)) - var(--line-size)),
100% calc(100% * var(--end, var(--size))),
0% calc(100% * var(--start, var(--end, var(--size))))
);
}

Expand All @@ -195,7 +195,7 @@
}

&::after {
height: calc(100% * (1 -var(--size)));
height: calc(100% * (1 -var(--end, var(--size))));
}
}
}
Expand All @@ -206,10 +206,10 @@

&::before {
clip-path: polygon(
0% calc(100% * var(--size) - var(--line-size)),
100% calc(100% * var(--start, var(--size)) - var(--line-size)),
100% calc(100% * var(--start, var(--size))),
0% calc(100% * var(--size))
0% calc(100% * var(--end, var(--size)) - var(--line-size)),
100% calc(100% * var(--start, var(--end, var(--size))) - var(--line-size)),
100% calc(100% * var(--start, var(--end, var(--size)))),
0% calc(100% * var(--end, var(--size)))
);
}

Expand All @@ -218,7 +218,7 @@
}

&::after {
height: calc(100% * (1 - var(--size)));
height: calc(100% * (1 - var(--end, var(--size))));
}
}
}
Expand Down

0 comments on commit acb290e

Please sign in to comment.