fix(bar): set a minimum value in grid-column to fix #111

ffoodd · Oct 30, 2023 · 288a186 · 288a186
1 parent fb12a48
commit 288a186
Show file tree

Hide file tree

Showing 10 changed files with 10 additions and 10 deletions.
diff --git a/_site/templates/css/examples/bar.css b/_site/templates/css/examples/bar.css
@@ -51,7 +51,7 @@
   --position: calc(var(--value, 0) / var(--scale, 100) * 100%);
   background: linear-gradient(to right, var(--chaarts-green), var(--chaarts-gray), var(--chaarts-blue), var(--chaarts-purple), var(--chaarts-red)) var(--position) 0% / var(--size) 100%, var(--background) center/contain;
   background-blend-mode: hard-light;
-  grid-column: 2 / var(--value, 0);
+  grid-column: 2 / max(2, var(--value, 0));
   margin: 0.5rem 0 0;
   position: relative;
 }

diff --git a/_site/templates/css/examples/line.css b/_site/templates/css/examples/line.css
@@ -10,7 +10,7 @@
 
 .chaarts.line::after {
   --scale: calc((100% - (var(--y) * 1px)) / var(--y));
-  background: repeating-linear-gradient(to bottom, var(--background-lighter) 0 var(--scale), var(--foreground-o-25) calc(var(--scale) + 1px));
+  background: repeating-linear-gradient(to bottom, var(--scrollable-background) 0 var(--scale), var(--foreground-o-25) calc(var(--scale) + 1px));
   content: "";
   inline-size: 100%;
   inset-block-end: var(--bottom);

diff --git a/dist/chaarts.css b/dist/chaarts.css
diff --git a/dist/chaarts.min.css b/dist/chaarts.min.css
diff --git a/dist/chaarts.min.css.map b/dist/chaarts.min.css.map
diff --git a/docs/bar-charts.html b/docs/bar-charts.html
@@ -299,7 +299,7 @@ <h1>Bar charts</h1>
   --position: calc(var(--value, 0) / var(--scale, 100) * 100%);
   background: linear-gradient(to right, var(--chaarts-green), var(--chaarts-gray), var(--chaarts-blue), var(--chaarts-purple), var(--chaarts-red)) var(--position) 0% / var(--size) 100%, var(--background) center/contain;
   background-blend-mode: hard-light;
-  grid-column: 2 / var(--value, 0);
+  grid-column: 2 / max(2, var(--value, 0));
   margin: 0.5rem 0 0;
   position: relative;
 }

diff --git a/docs/css/chaarts.min.css b/docs/css/chaarts.min.css
diff --git a/docs/css/chaarts.min.css.map b/docs/css/chaarts.min.css.map
diff --git a/docs/line-charts.html b/docs/line-charts.html
@@ -285,7 +285,7 @@ <h2>Area charts</h2>
 
 .chaarts.line::after {
   --scale: calc((100% - (var(--y) * 1px)) / var(--y));
-  background: repeating-linear-gradient(to bottom, var(--background-lighter) 0 var(--scale), var(--foreground-o-25) calc(var(--scale) + 1px));
+  background: repeating-linear-gradient(to bottom, var(--scrollable-background) 0 var(--scale), var(--foreground-o-25) calc(var(--scale) + 1px));
   content: &quot;&quot;;
   inline-size: 100%;
   inset-block-end: var(--bottom);

diff --git a/src/_chaarts-bar.scss b/src/_chaarts-bar.scss
@@ -60,7 +60,7 @@
 		) var(--position) list.slash(0%, var(--size)) 100%,
 		var(--background) center / contain;
 		background-blend-mode: hard-light;
-		grid-column: list.slash(2, var(--value, 0));
+		grid-column: list.slash(2, max(2, var(--value, 0)));
 		margin: variables.$gutter * 0.5 0 0;
 		position: relative;
 	}