From ce0a93be5838af5f73f8f02808325e576d22e203 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 10 Jan 2019 22:19:32 +0100
Subject: [PATCH] Add styles to milestones progress bars

---
 app/assets/stylesheets/milestones.scss       | 47 ++++++++++++++++++++
 app/views/milestones/_progress_bars.html.erb |  2 +-
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/milestones.scss b/app/assets/stylesheets/milestones.scss
index e4b50487d..ade816c56 100644
--- a/app/assets/stylesheets/milestones.scss
+++ b/app/assets/stylesheets/milestones.scss
@@ -3,6 +3,53 @@
   position: relative;
 }
 
+.tab-milestones .progress-bars {
+  margin-top: $line-height / 2;
+
+  h5 {
+    font-size: rem-calc(25);
+  }
+
+  ul {
+    border-spacing: rem-calc(15) $line-height / 4;
+    display: table;
+    margin-top: $line-height / 2;
+
+    li {
+      display: table-row;
+
+      > * {
+        display: table-cell;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  progress {
+    $background-color: #fef0e2;
+    $progress-color: #fea230;
+
+    background-color: $background-color;
+    color: $progress-color;
+
+    &.primary {
+      width: 100%;
+    }
+
+    &::-webkit-progress-bar {
+      background-color: $background-color;
+    }
+
+    &::-webkit-progress-value {
+      background-color: $progress-color;
+    }
+
+    &::-moz-progress-bar {
+      background-color: $progress-color;
+    }
+  }
+}
+
 .tab-milestones .timeline li {
   margin: 0 auto;
   position: relative;
diff --git a/app/views/milestones/_progress_bars.html.erb b/app/views/milestones/_progress_bars.html.erb
index a5db62008..1b0a37781 100644
--- a/app/views/milestones/_progress_bars.html.erb
+++ b/app/views/milestones/_progress_bars.html.erb
@@ -8,7 +8,7 @@
       <ul class="milestone-progress">
         <% milestoneable.secondary_progress_bars.each do |progress_bar| %>
           <li>
-            <%= progress_bar.title %>
+            <span class="title"><%= progress_bar.title %></span>
             <%= progress_tag_for(progress_bar) %>
           </li>
         <% end %>