first commit

assets/css/components/_gauge.scss

@@ -0,0 +1,90 @@
+.gauge__container {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  position: relative;
+  top: calc(var(--spacing) * 0.25);
+
+  padding: 0 calc(var(--spacing) * 0.5);
+}
+
+#gauge {
+  --gauge-h: 12px;
+  width: 100%;
+  margin-bottom: calc(var(--spacing) * 0.25);
+  height: var(--gauge-h);
+  border-radius: calc(var(--gauge-h) * 0.5);
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-txt);
+  position: relative;
+  // overflow: hidden;
+  box-shadow: 7px 6px 5px -3px rgba(0, 0, 0, 0.14);
+  &::before {
+    content: '';
+    display: block;
+    height: calc(var(--gauge-h) - 2px);
+    border-radius: calc(var(--gauge-h) * 0.5);
+    width: var(--pourcent);
+    min-width: 20px;
+    background-color: var(--color-accent);
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    transition: width cubic-bezier(0.86, 0, 0.07, 1) 1s;
+  }
+}
+
+.gauge--infos {
+  .property {
+    font-size: var(--fs-small);
+    padding-bottom: 3px;
+  }
+
+  .value {
+    font-size: var(--fs-small);
+  }
+
+  &:last-of-type {
+    text-align: right;
+  }
+}
+
+#gauge--infos__donors {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .value {
+    font-weight: bold;
+    display: inline;
+  }
+
+  .property {
+    display: inline;
+    padding-bottom: 0;
+  }
+}
+
+
+@media #{$small-up} {
+  #gauge {
+    --gauge-h: 18px;
+    
+    border: 2px solid var(--color-txt);
+    &::before {
+      height: calc(var(--gauge-h) - 4px);
+    }
+  }
+
+  .gauge--infos {
+    .property {
+      font-size: var(--fs-small);
+    }
+    .value {
+      font-size: var(--fs-normal);
+    }
+  }
+}