From b47d794d1c51a15eb44cec5412d40f49469421ff Mon Sep 17 00:00:00 2001
From: Matei Stanca <i@ambientimpact.com>
Date: Sat, 30 Nov 2024 11:43:01 -0500
Subject: [PATCH] Issue #3488464: Add --refreshless-progress-bar-computed-value
f/ themes.
---
components/progress-bar/progress-bar.css | 22 +++++++++++++++++-----
1 file changed, 17 insertions(+), 5 deletions(-)
diff --git a/components/progress-bar/progress-bar.css b/components/progress-bar/progress-bar.css
index 785582b..68dc85f 100644
--- a/components/progress-bar/progress-bar.css
+++ b/components/progress-bar/progress-bar.css
@@ -57,6 +57,22 @@
calc(var(--refreshless-progress-bar-transition-duration) / 2)
ease-in;
+ /**
+ * Progress bar computed value.
+ *
+ * Unlike --refreshless-progress-bar-value, which is a float between 0 and 1
+ * (inclusive), this is a percent, and it also takes
+ * --refreshless-progress-bar-start into account. This is intended to be used
+ * as the cleaned up and UI-ready value. The default implementation below sets
+ * this as the value of the width property, but themes can use this however
+ * they choose.
+ */
+ --refreshless-progress-bar-computed-value: calc(
+ var(--refreshless-progress-bar-value, 0) * (
+ 100% - var(--refreshless-progress-bar-start)
+ ) + var(--refreshless-progress-bar-start)
+ );
+
}
.refreshless-document-progress-bar {
@@ -70,11 +86,7 @@
height: var(--refreshless-progress-bar-thickness);
- width: calc(
- var(--refreshless-progress-bar-value) * (
- 100% - var(--refreshless-progress-bar-start)
- ) + var(--refreshless-progress-bar-start)
- );
+ width: var(--refreshless-progress-bar-computed-value);
background-color: var(--refreshless-progress-bar-colour);
--
GitLab