Skip to content

Commit

Permalink
feat(comparison): use min() and max() in pie charts to close #81
Browse files Browse the repository at this point in the history
  • Loading branch information
@ffoodd
ffoodd committed Oct 3, 2023
1 parent cf6b6d5 commit 204484f
Show file tree
Hide file tree
Showing 10 changed files with 78 additions and 76 deletions.
14 changes: 7 additions & 7 deletions _site/templates/css/examples/pie.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,13 @@
50% 50%,
50% 0%,
100% 0%,
calc(50% + (var(--pos-B) * 1% * var(--lt-25, 1)) + (var(--gt-25, 0) * 50%)) calc(50% - (var(--pos-A) * 1% * var(--lt-25, 1))),
calc(50% + (var(--gt-25, 0) * 50%)) calc(50% + (var(--gt-25, 0) * 50%)),
calc(50% + (var(--pos-A) * 1% * var(--lt-50, 1)) + (var(--gt-50, 0) * 50%)) calc(50% + (var(--pos-B) * 1% * var(--lt-50, 1)) + (var(--gt-50, 0) * 50%)),
calc(50% - (var(--gt-50, 0) * 50%)) calc(50% + (var(--gt-50, 0) * 50%)),
calc(50% - (var(--pos-B) * 1% * var(--lt-75, 1)) - (var(--gt-75, 0) * 50%)) calc(50% + (var(--pos-A) * 1% * var(--lt-75, 1))),
calc(50% - (var(--gt-75, 0) * 50%)) calc(50% - (var(--gt-75, 0) * 50%)),
calc(50% - (var(--pos-A) * 1% * var(--gt-75, 0))) calc(50% - (var(--pos-B) * 1% * var(--gt-75, 0))),
max(50% + (var(--pos-B) * 1%), var(--gt-25, 0) * 100%) calc(50% - (var(--pos-A) * var(--lt-25, 1) * 1%)),
max(50%, var(--gt-25, 0) * 100%) max(50%, var(--gt-25, 0) * 100%),
max(50% + (var(--pos-A) * 1%), var(--gt-50, 0) * 100%) max(50% + (var(--pos-B) * var(--lt-50, 0) * 1%), var(--gt-50, 0) * 100%),
max(0%, var(--lt-50, 0) * 50%) max(50%, var(--gt-50, 0) * 100%),
min(50% - (var(--pos-B) * var(--gt-75, 0) * 1%), 0%) calc(50% + (var(--pos-A) * var(--lt-75, 1) * 1%)),
max(0%, var(--lt-75, 0) * 50%) max(0%, var(--lt-75, 0) * 50%),
calc(50% - (var(--pos-A) * var(--gt-75, 0) * 1%)) calc(50% - (var(--pos-B) * var(--gt-75, 0) * 1%)),
50% 50%
);
background: var(--color, currentcolor) var(--background);
Expand Down
6 changes: 3 additions & 3 deletions _site/templates/macros/_table-pie.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
<tr style="--color: {{ color }};--term: '{{ term }}';">
<th scope="row">{{ term }}</th>
{% if definition < 25 %}
{% set style = "" %}
{% set style = "--lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;" %}
{% elif definition < 50 %}
{% set style = "--lt-25: 0; --gt-25: 1; --lt-50: 1; --gt-50: 0;" %}
{% set style = "--lt-25: 0; --gt-25: 1; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;" %}
{% elif definition < 75 %}
{% set style = "--lt-25: 0; --gt-25: 1; --lt-50: 0; --gt-50: 1; --lt-75: 1; --gt-75: 0;" %}
{% else %}
{% set style = "--lt-25: 0; --gt-25: 1; --lt-50: 0; --gt-50: 1; --lt-75: 0; --gt-75: 1; --lt-100: 1;" %}
{% set style = "--lt-25: 0; --gt-25: 1; --lt-50: 0; --gt-50: 1; --lt-75: 0; --gt-75: 1;" %}
{% endif %}
<td style="--value: {{ definition }}; --start: {{ start }}; {{ style }}">
{{ definition }}{% if unit != '' %}&nbsp;{% if title != '' %}<abbr title="{{ title | e }}" aria-label="{{ title | e }}">{% endif %}{{ unit }}{% if title != '' %}</abbr>{% endif %}{% endif %}
Expand Down
13 changes: 7 additions & 6 deletions _site/templates/pie-charts.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,8 @@
<strong>Roman Komarov</strong> in <cite>Conditions for CSS variables</cite></a>&nbsp;—
depend on the value: <var>--lt-25</var>, <var>--gt-25</var>, <var>--lt-50</var>…
They allow to <strong>toggle the points</strong> from their original position
(<code>50% 50%</code>) to their calculated position, by adding or subtracting from the initial value;
(<code>50% 50%</code>) to their calculated position, by adding or subtracting from the initial value
using <code>min()</code> and <code>max()</code> comparison functions;
</li>
</ol>
</li>
Expand Down Expand Up @@ -222,7 +223,7 @@
For example, the point at the bottom right concerns values between 25% and 50%:
if the value is less than 25%, it must be in the centre (so as not to interfere
with the drawing), and if not, it must be in its corner:
<code>calc( 50% + ( var(--gt-25, 0) * 50% ) ) calc( 50% + ( var(--gt-25, 0) * 50% ) )</code><br>
<code>max(50%, var(--gt-25, 0) * 100%) max(50%, var(--gt-25, 0) * 100%)</code><br>
Thus the calculated value will be <code>50% 50%</code> if <var>--gt-25</var> is 0,
and <code>100% 100%</code> if <var>--gt-25</var> is 1.
</li>
Expand Down Expand Up @@ -380,10 +381,10 @@
</tr>
</thead>
<tbody>
{{ table.pie('HTML', '2', '%', '', '0', 'var(--chaarts-purple)') }}
{{ table.pie('CSS', '2', '%', '', '2', 'var(--chaarts-pink)') }}
{{ table.pie('JS', '8', '%', '', '4', 'var(--chaarts-blue)') }}
{{ table.pie('Images', '88', '%', '', '12', 'var(--chaarts-green)') }}
{{ table.pie('Images', '88', '%', '', '0', 'var(--chaarts-green)') }}
{{ table.pie('HTML', '2', '%', '', '88', 'var(--chaarts-purple)') }}
{{ table.pie('CSS', '2', '%', '', '90', 'var(--chaarts-pink)') }}
{{ table.pie('JS', '8', '%', '', '92', 'var(--chaarts-blue)') }}
</tbody>
</table>
</div>
Expand Down
14 changes: 7 additions & 7 deletions dist/chaarts.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/chaarts.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/chaarts.min.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/css/chaarts.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/css/chaarts.min.css.map
View file

Large diffs are not rendered by default.

85 changes: 43 additions & 42 deletions docs/pie-charts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,8 @@ <h1>Pie charts</h1>
<strong>Roman Komarov</strong> in <cite>Conditions for CSS variables</cite></a>&nbsp;—
depend on the value: <var>--lt-25</var>, <var>--gt-25</var>, <var>--lt-50</var>…
They allow to <strong>toggle the points</strong> from their original position
(<code>50% 50%</code>) to their calculated position, by adding or subtracting from the initial value;
(<code>50% 50%</code>) to their calculated position, by adding or subtracting from the initial value
using <code>min()</code> and <code>max()</code> comparison functions;
</li>
</ol>
</li>
Expand Down Expand Up @@ -178,43 +179,43 @@ <h1>Pie charts</h1>
<tbody>
<tr style="--color: var(--chaarts-purple);--term: 'HTML';">
<th scope="row">HTML</th>
<td style="--value: 2; --start: 0; ">
<td style="--value: 2; --start: 0; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
2&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-pink);--term: 'CSS';">
<th scope="row">CSS</th>
<td style="--value: 2; --start: 2; ">
<td style="--value: 2; --start: 2; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
2&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-blue);--term: 'JS';">
<th scope="row">JS</th>
<td style="--value: 32; --start: 4; --lt-25: 0; --gt-25: 1; --lt-50: 1; --gt-50: 0;">
<td style="--value: 32; --start: 4; --lt-25: 0; --gt-25: 1; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
32&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-yellow);--term: 'Json';">
<th scope="row">Json</th>
<td style="--value: 1; --start: 36; ">
<td style="--value: 1; --start: 36; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
1&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-green);--term: 'Images';">
<th scope="row">Images</th>
<td style="--value: 44; --start: 37; --lt-25: 0; --gt-25: 1; --lt-50: 1; --gt-50: 0;">
<td style="--value: 44; --start: 37; --lt-25: 0; --gt-25: 1; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
44&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-red);--term: 'Webfonts';">
<th scope="row">Webfonts</th>
<td style="--value: 17; --start: 81; ">
<td style="--value: 17; --start: 81; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
17&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-gray);--term: 'Other';">
<th scope="row">Other</th>
<td style="--value: 2; --start: 98; ">
<td style="--value: 2; --start: 98; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
2&nbsp;% </td>
</tr>

Expand Down Expand Up @@ -364,13 +365,13 @@ <h2>Law of sines</h2>
50% 50%,
50% 0%,
100% 0%,
calc(50% + (var(--pos-B) * 1% * var(--lt-25, 1)) + (var(--gt-25, 0) * 50%)) calc(50% - (var(--pos-A) * 1% * var(--lt-25, 1))),
calc(50% + (var(--gt-25, 0) * 50%)) calc(50% + (var(--gt-25, 0) * 50%)),
calc(50% + (var(--pos-A) * 1% * var(--lt-50, 1)) + (var(--gt-50, 0) * 50%)) calc(50% + (var(--pos-B) * 1% * var(--lt-50, 1)) + (var(--gt-50, 0) * 50%)),
calc(50% - (var(--gt-50, 0) * 50%)) calc(50% + (var(--gt-50, 0) * 50%)),
calc(50% - (var(--pos-B) * 1% * var(--lt-75, 1)) - (var(--gt-75, 0) * 50%)) calc(50% + (var(--pos-A) * 1% * var(--lt-75, 1))),
calc(50% - (var(--gt-75, 0) * 50%)) calc(50% - (var(--gt-75, 0) * 50%)),
calc(50% - (var(--pos-A) * 1% * var(--gt-75, 0))) calc(50% - (var(--pos-B) * 1% * var(--gt-75, 0))),
max(50% + (var(--pos-B) * 1%), var(--gt-25, 0) * 100%) calc(50% - (var(--pos-A) * var(--lt-25, 1) * 1%)),
max(50%, var(--gt-25, 0) * 100%) max(50%, var(--gt-25, 0) * 100%),
max(50% + (var(--pos-A) * 1%), var(--gt-50, 0) * 100%) max(50% + (var(--pos-B) * var(--lt-50, 0) * 1%), var(--gt-50, 0) * 100%),
max(0%, var(--lt-50, 0) * 50%) max(50%, var(--gt-50, 0) * 100%),
min(50% - (var(--pos-B) * var(--gt-75, 0) * 1%), 0%) calc(50% + (var(--pos-A) * var(--lt-75, 1) * 1%)),
max(0%, var(--lt-75, 0) * 50%) max(0%, var(--lt-75, 0) * 50%),
calc(50% - (var(--pos-A) * var(--gt-75, 0) * 1%)) calc(50% - (var(--pos-B) * var(--gt-75, 0) * 1%)),
50% 50%
);
background: var(--color, currentcolor) var(--background);
Expand Down Expand Up @@ -449,7 +450,7 @@ <h3>The positions of the polygon</h3>
For example, the point at the bottom right concerns values between 25% and 50%:
if the value is less than 25%, it must be in the centre (so as not to interfere
with the drawing), and if not, it must be in its corner:
<code>calc( 50% + ( var(--gt-25, 0) * 50% ) ) calc( 50% + ( var(--gt-25, 0) * 50% ) )</code><br>
<code>max(50%, var(--gt-25, 0) * 100%) max(50%, var(--gt-25, 0) * 100%)</code><br>
Thus the calculated value will be <code>50% 50%</code> if <var>--gt-25</var> is 0,
and <code>100% 100%</code> if <var>--gt-25</var> is 1.
</li>
Expand Down Expand Up @@ -620,19 +621,19 @@ <h4>The positions illustrated</h4>
<tbody>
<tr style="--color: var(--chaarts-purple);--term: 'HTML';">
<th scope="row">HTML</th>
<td style="--value: 2; --start: 0; ">
<td style="--value: 2; --start: 0; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
2&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-pink);--term: 'CSS';">
<th scope="row">CSS</th>
<td style="--value: 2; --start: 2; ">
<td style="--value: 2; --start: 2; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
2&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-blue);--term: 'JS';">
<th scope="row">JS</th>
<td style="--value: 32; --start: 4; --lt-25: 0; --gt-25: 1; --lt-50: 1; --gt-50: 0;">
<td style="--value: 32; --start: 4; --lt-25: 0; --gt-25: 1; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
32&nbsp;% </td>
</tr>

Expand Down Expand Up @@ -669,30 +670,30 @@ <h4>The positions illustrated</h4>
</tr>
</thead>
<tbody>
<tr style="--color: var(--chaarts-green);--term: 'Images';">
<th scope="row">Images</th>
<td style="--value: 88; --start: 0; --lt-25: 0; --gt-25: 1; --lt-50: 0; --gt-50: 1; --lt-75: 0; --gt-75: 1;">
88&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-purple);--term: 'HTML';">
<th scope="row">HTML</th>
<td style="--value: 2; --start: 0; ">
<td style="--value: 2; --start: 88; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
2&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-pink);--term: 'CSS';">
<th scope="row">CSS</th>
<td style="--value: 2; --start: 2; ">
<td style="--value: 2; --start: 90; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
2&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-blue);--term: 'JS';">
<th scope="row">JS</th>
<td style="--value: 8; --start: 4; ">
<td style="--value: 8; --start: 92; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
8&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-green);--term: 'Images';">
<th scope="row">Images</th>
<td style="--value: 88; --start: 12; --lt-25: 0; --gt-25: 1; --lt-50: 0; --gt-50: 1; --lt-75: 0; --gt-75: 1; --lt-100: 1;">
88&nbsp;% </td>
</tr>

</tbody>
</table>
</div>
Expand Down Expand Up @@ -736,43 +737,43 @@ <h2>Donut</h2>
<tbody>
<tr style="--color: var(--chaarts-purple);--term: 'HTML';">
<th scope="row">HTML</th>
<td style="--value: 2; --start: 0; ">
<td style="--value: 2; --start: 0; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
2&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-pink);--term: 'CSS';">
<th scope="row">CSS</th>
<td style="--value: 2; --start: 2; ">
<td style="--value: 2; --start: 2; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
2&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-blue);--term: 'JS';">
<th scope="row">JS</th>
<td style="--value: 32; --start: 4; --lt-25: 0; --gt-25: 1; --lt-50: 1; --gt-50: 0;">
<td style="--value: 32; --start: 4; --lt-25: 0; --gt-25: 1; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
32&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-yellow);--term: 'Json';">
<th scope="row">Json</th>
<td style="--value: 1; --start: 36; ">
<td style="--value: 1; --start: 36; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
1&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-green);--term: 'Images';">
<th scope="row">Images</th>
<td style="--value: 44; --start: 37; --lt-25: 0; --gt-25: 1; --lt-50: 1; --gt-50: 0;">
<td style="--value: 44; --start: 37; --lt-25: 0; --gt-25: 1; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
44&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-red);--term: 'Webfonts';">
<th scope="row">Webfonts</th>
<td style="--value: 17; --start: 81; ">
<td style="--value: 17; --start: 81; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
17&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-gray);--term: 'Other';">
<th scope="row">Other</th>
<td style="--value: 2; --start: 98; ">
<td style="--value: 2; --start: 98; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
2&nbsp;% </td>
</tr>

Expand Down Expand Up @@ -848,43 +849,43 @@ <h2>Polar chart</h2>
<tbody>
<tr style="--color: var(--chaarts-purple);--term: 'HTML';">
<th scope="row">HTML</th>
<td style="--value: 2; --start: 0; ">
<td style="--value: 2; --start: 0; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
2&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-pink);--term: 'CSS';">
<th scope="row">CSS</th>
<td style="--value: 2; --start: 2; ">
<td style="--value: 2; --start: 2; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
2&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-blue);--term: 'JS';">
<th scope="row">JS</th>
<td style="--value: 32; --start: 4; --lt-25: 0; --gt-25: 1; --lt-50: 1; --gt-50: 0;">
<td style="--value: 32; --start: 4; --lt-25: 0; --gt-25: 1; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
32&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-yellow);--term: 'Json';">
<th scope="row">Json</th>
<td style="--value: 1; --start: 36; ">
<td style="--value: 1; --start: 36; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
1&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-green);--term: 'Images';">
<th scope="row">Images</th>
<td style="--value: 44; --start: 37; --lt-25: 0; --gt-25: 1; --lt-50: 1; --gt-50: 0;">
<td style="--value: 44; --start: 37; --lt-25: 0; --gt-25: 1; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
44&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-red);--term: 'Webfonts';">
<th scope="row">Webfonts</th>
<td style="--value: 17; --start: 81; ">
<td style="--value: 17; --start: 81; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
17&nbsp;% </td>
</tr>

<tr style="--color: var(--chaarts-gray);--term: 'Other';">
<th scope="row">Other</th>
<td style="--value: 2; --start: 98; ">
<td style="--value: 2; --start: 98; --lt-25: 1; --gt-25: 0; --lt-50: 1; --gt-50: 0; --lt-75: 1; --gt-75: 0;">
2&nbsp;% </td>
</tr>

Expand Down
14 changes: 7 additions & 7 deletions src/_chaarts-pie.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,13 +86,13 @@
50% 50%,
50% 0%,
100% 0%,
calc(50% + (var(--pos-B) * 1% * var(--lt-25, 1)) + (var(--gt-25, 0) * 50%)) calc(50% - (var(--pos-A) * 1% * var(--lt-25, 1))),
calc(50% + (var(--gt-25, 0) * 50%)) calc(50% + (var(--gt-25, 0) * 50%)),
calc(50% + (var(--pos-A) * 1% * var(--lt-50, 1)) + (var(--gt-50, 0) * 50%)) calc(50% + (var(--pos-B) * 1% * var(--lt-50, 1)) + (var(--gt-50, 0) * 50%)),
calc(50% - (var(--gt-50, 0) * 50%)) calc(50% + (var(--gt-50, 0) * 50%)),
calc(50% - (var(--pos-B) * 1% * var(--lt-75, 1)) - (var(--gt-75, 0) * 50%)) calc(50% + (var(--pos-A) * 1% * var(--lt-75, 1))),
calc(50% - (var(--gt-75, 0) * 50%)) calc(50% - (var(--gt-75, 0) * 50%)),
calc(50% - (var(--pos-A) * 1% * var(--gt-75, 0))) calc(50% - (var(--pos-B) * 1% * var(--gt-75, 0))),
max(50% + (var(--pos-B) * 1%), var(--gt-25, 0) * 100%) calc(50% - (var(--pos-A) * var(--lt-25, 1) * 1%)),
max(50%, var(--gt-25, 0) * 100%) max(50%, var(--gt-25, 0) * 100%),
max(50% + (var(--pos-A) * 1%), var(--gt-50, 0) * 100%) max(50% + (var(--pos-B) * var(--lt-50, 0) * 1%), var(--gt-50, 0) * 100%),
max(0%, var(--lt-50, 0) * 50%) max(50%, var(--gt-50, 0) * 100%),
min(50% - (var(--pos-B) * var(--gt-75, 0) * 1%), 0%) calc(50% + (var(--pos-A) * var(--lt-75, 1) * 1%)),
max(0%, var(--lt-75, 0) * 50%) max(0%, var(--lt-75, 0) * 50%),
calc(50% - (var(--pos-A) * var(--gt-75, 0) * 1%)) calc(50% - (var(--pos-B) * var(--gt-75, 0) * 1%)),
50% 50%
);

Expand Down

0 comments on commit 204484f

Please sign in to comment.