Improvement/ProgressBar Round Alternative Design (#54)

weglot · May 23, 2024 · 25d9bf6 · 25d9bf6
1 parent eb84409
commit 25d9bf6
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 15 deletions.
diff --git a/dist/css/main.css b/dist/css/main.css
diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css
diff --git a/docs/assets/css/style.css.map b/docs/assets/css/style.css.map
diff --git a/docs/docs/components/progress.html b/docs/docs/components/progress.html
@@ -250,14 +250,29 @@ <h2 class="sg-component__title">Progress round</h2>
     </header>
     <div class="sg-component__body">
         <div class="sg-component__display">
-            <div class="progress-round" style="width: 30px">
-    <div class="progress-round-bar" style="--value: 42" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="42"></div>
+            <div class="mb-2 p-1">
+    <div class="progress-round" style="width: 30px">
+        <div class="progress-round-bar" style="--value: 42" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="42"></div>
+    </div>    
 </div>
 
+<div class="bg-dark p-1 mt-2">
+    <div class="progress-round progress-round-secondary" style="width: 30px">
+        <div class="progress-round-bar" style="--value: 42" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="42"></div>
+    </div>    
+</div>
         </div>
         <div class="sg-component__source">
-            <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-round"</span> <span class="na">style=</span><span class="s">"width: 30px"</span><span class="nt">&gt;</span>
-    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-round-bar"</span> <span class="na">style=</span><span class="s">"--value: 42"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"67"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"42"</span><span class="nt">&gt;&lt;/div&gt;</span>
+            <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-2 p-1"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-round"</span> <span class="na">style=</span><span class="s">"width: 30px"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-round-bar"</span> <span class="na">style=</span><span class="s">"--value: 42"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"67"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"42"</span><span class="nt">&gt;&lt;/div&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>    
+<span class="nt">&lt;/div&gt;</span>
+
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bg-dark p-1 mt-2"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-round progress-round-secondary"</span> <span class="na">style=</span><span class="s">"width: 30px"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-round-bar"</span> <span class="na">style=</span><span class="s">"--value: 42"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"67"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"42"</span><span class="nt">&gt;&lt;/div&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>    
 <span class="nt">&lt;/div&gt;</span></code></pre></figure>
         </div>
     </div>
@@ -278,7 +293,6 @@ <h2 class="sg-component__title">Progress round</h2>
 
 
 
-
                 </div>
             </div>
         </div>

diff --git a/docs/feed.xml b/docs/feed.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.1.1">Jekyll</generator><link href="http://localhost:4000/design/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/design/" rel="alternate" type="text/html" /><updated>2024-05-20T14:54:17+02:00</updated><id>http://localhost:4000/design/feed.xml</id><title type="html">Weglot Design Styleguide</title><subtitle>This is the Weglot Design styleguide.</subtitle></feed>
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.1.1">Jekyll</generator><link href="http://localhost:4000/design/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/design/" rel="alternate" type="text/html" /><updated>2024-05-21T17:32:03+02:00</updated><id>http://localhost:4000/design/feed.xml</id><title type="html">Weglot Design Styleguide</title><subtitle>This is the Weglot Design styleguide.</subtitle></feed>
diff --git a/docs/patterns/components/progress/progress-round.html b/docs/patterns/components/progress/progress-round.html
@@ -1,3 +1,11 @@
-<div class="progress-round" style="width: 30px">
-    <div class="progress-round-bar" style="--value: 42" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="42"></div>
+<div class="mb-2 p-1">
+    <div class="progress-round" style="width: 30px">
+        <div class="progress-round-bar" style="--value: 42" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="42"></div>
+    </div>    
 </div>
+
+<div class="bg-dark p-1 mt-2">
+    <div class="progress-round progress-round-secondary" style="width: 30px">
+        <div class="progress-round-bar" style="--value: 42" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="42"></div>
+    </div>    
+</div>
diff --git a/scss/_progress.scss b/scss/_progress.scss
@@ -26,4 +26,9 @@
         -webkit-mask: radial-gradient(#0000 55%, #000 0);
         -webkit-mask-mode: alpha;
     }
+    &-secondary {
+        .progress-round-bar::before {
+            background: conic-gradient(#fff calc(var(--percentage) * 1%), $gray-400 0);
+        }
+    }
 }
diff --git a/styleguide/_docs/components/progress.html b/styleguide/_docs/components/progress.html
@@ -2,5 +2,6 @@
 title: Progress
 category: progress
 ---
+
 {% include component.html url='/patterns/components/progress/progress-bar.html' %}
-{% include component.html url='/patterns/components/progress/progress-round.html' %}
+{% include component.html url='/patterns/components/progress/progress-round.html' %}
diff --git a/styleguide/patterns/components/progress/progress-round.html b/styleguide/patterns/components/progress/progress-round.html
@@ -3,6 +3,14 @@
 category: progress
 category_order: 1
 ---
-<div class="progress-round" style="width: 30px">
-    <div class="progress-round-bar" style="--value: 42" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="42"></div>
+<div class="mb-2 p-1">
+    <div class="progress-round" style="width: 30px">
+        <div class="progress-round-bar" style="--value: 42" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="42"></div>
+    </div>    
 </div>
+
+<div class="bg-dark p-1 mt-2">
+    <div class="progress-round progress-round-secondary" style="width: 30px">
+        <div class="progress-round-bar" style="--value: 42" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="42"></div>
+    </div>    
+</div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.1.1">Jekyll</generator><link href="http://localhost:4000/design/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/design/" rel="alternate" type="text/html" /><updated>2024-05-20T14:54:17+02:00</updated><id>http://localhost:4000/design/feed.xml</id><title type="html">Weglot Design Styleguide</title><subtitle>This is the Weglot Design styleguide.</subtitle></feed>
		<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.1.1">Jekyll</generator><link href="http://localhost:4000/design/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/design/" rel="alternate" type="text/html" /><updated>2024-05-21T17:32:03+02:00</updated><id>http://localhost:4000/design/feed.xml</id><title type="html">Weglot Design Styleguide</title><subtitle>This is the Weglot Design styleguide.</subtitle></feed>