From 3592db288048a35b1ac3f632d5cbf867c2747536 Mon Sep 17 00:00:00 2001
From: Fabio Fenoglio <development@fabiofenoglio.it>
Date: Sat, 11 Dec 2021 11:22:36 +0100
Subject: [PATCH] added sm and xs variants of the soft skill round indicator

---
 static/css/sections/about.css | 38 +++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/static/css/sections/about.css b/static/css/sections/about.css
index 19fd6ce..de7fac8 100644
--- a/static/css/sections/about.css
+++ b/static/css/sections/about.css
@@ -23,6 +23,16 @@
   box-shadow: none;
   position: relative;
 }
+.circular-progress-sm {
+  width: 75px;
+  height: 75px;
+  line-height: 75px;
+}
+.circular-progress-xs {
+  width: 25px;
+  height: 25px;
+  line-height: 25px;
+}
 
 .circular-progress:after {
   content: "";
@@ -34,6 +44,12 @@
   top: 0;
   left: 0;
 }
+.circular-progress-sm:after {
+  border: 6px solid #f9fafc;
+}
+.circular-progress-xs:after {
+  border: 4px solid #f9fafc;
+}
 
 .circular-progress > span {
   width: 50%;
@@ -57,6 +73,12 @@
   position: absolute;
   top: 0;
 }
+.circular-progress-sm .circular-progress-bar {
+  border-width: 6px;
+}
+.circular-progress-xs .circular-progress-bar {
+  border-width: 4px;
+}
 
 .circular-progress .circular-progress-left .circular-progress-bar {
   left: 100%;
@@ -65,6 +87,14 @@
   border-left: 0;
   transform-origin: center left;
 }
+.circular-progress-sm .circular-progress-left .circular-progress-bar {
+  border-top-right-radius: 40px;
+  border-bottom-right-radius: 40px;
+}
+.circular-progress-xs .circular-progress-left .circular-progress-bar {
+  border-top-right-radius: 15px;
+  border-bottom-right-radius: 15px;
+}
 
 .circular-progress .circular-progress-right {
   right: 0;
@@ -79,6 +109,14 @@
   -webkit-animation: circular-loading-1 1.8s linear forwards;
           animation: circular-loading-1 1.8s linear forwards;
 }
+.circular-progress-sm .circular-progress-right .circular-progress-bar {
+  border-top-left-radius: 40px;
+  border-bottom-left-radius: 40px;
+}
+.circular-progress-xs .circular-progress-right .circular-progress-bar {
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+}
 
 .circular-progress .circular-progress-value {
   width: 90%;