#31 : Update colors, set reversed progress indicator

2021-07-03 00:59:25 +03:00
parent a9515edcfd
commit 17e2e60098
4 changed files with 25 additions and 16 deletions
--- a/src/components/Progress/Progress.svelte
+++ b/src/components/Progress/Progress.svelte
@@ -7,9 +7,9 @@
  /**
   * Progress value
   */
-  export let value = 0.5
+  export let value = 0

-  $: width = Math.min(value * MAX_PERCENT, MAX_PERCENT)
+  $: width = Math.max(value * MAX_PERCENT, 0)
 </script>

 <div
@@ -20,8 +20,11 @@
 ></div>

 <style>
+  :root {
+    --sc-color-hex-dark-50p: rgba(30, 30, 30, 0.5)
+  }
  .sc-carousel-progress__indicator {
    height: 100%;
-    background-color: gray;
+    background-color: var(--sc-color-hex-dark-50p);
  }
 </style>