Some refactor for CSS after code review.

app/assets/stylesheets/pages/milestone.scss

@@ -12,35 +12,40 @@ li.milestone {
   }
 }
 
-.time-elapsed {
-  color: #F14539;
-}
+.milestone-content {
+  .issues-count {
+    margin-right: 17px;
+    float: right;
+    width: 105px;
+  }
 
-.issue-row .assignee-icon {
-  .color-label {
-    float: left;
-    padding: 8px;
-    margin-left: 10px;
+  .panel-heading {
+    font-weight: bold;
   }
 
-  img {
-    margin-left: 8px;
+  .issue-row .assignee-icon {
+    .color-label {
+      float: left;
+      padding: 8px;
+      margin-left: 10px;
+    }
+
+    img {
+      margin-left: 8px;
+    }
   }
 }
 
 .milestone-summary {
   margin-bottom: 25px;
-}
-
-.milestone-stat {
-  margin-right: 10px;
-}
 
+  .milestone-stat {
+    margin-right: 10px;
+  }
 
-#tab-labels .issues-count {
-  margin-right: 17px;
-  float: right;
-  width: 105px;
+  .time-elapsed {
+    color: $orange-light;
+  }
 }
 
 .issues-sortable-list {

app/models/milestone.rb

@@ -110,6 +110,9 @@ class Milestone < ActiveRecord::Base
     0
   end
 
+  # Returns the elapsed time (in percent) since the Milestone creation date until today.
+  # If the Milestone doesn't have a due_date then returns 0 since we can't calculate the elapsed time.
+  # If the Milestone is overdue then it returns 100%.
   def percent_time_used
     return 0 unless due_date
     return 100 if expired?

app/views/projects/milestones/_issues.html.haml

 .panel.panel-default
   .panel-heading
-    %strong= title
-    %strong.pull-right= issues.size
+    = title
+    .pull-right= issues.size
   %ul{ class: "well-list issues-sortable-list", id: "issues-list-#{id}", "data-state" => id }
     - issues.sort_by(&:position).each do |issue|
       = render 'issue', issue: issue

app/views/projects/milestones/show.html.haml

@@ -94,7 +94,7 @@
       Labels
       %span.badge= @labels.count
 
-.tab-content
+.tab-content.milestone-content
   .tab-pane.active#tab-issues
     .row.prepend-top-default
       .col-md-4