Refactor tab-milestones inside participation.scss and passed scss-lint test

app/assets/stylesheets/participation.scss

@@ -494,94 +494,108 @@
   }
 }
 
-#tab-milestones{
+
-  .timeline ul{
+.tab-milestones ul {
+  position: relative;
+  margin-top: rem-calc(40);
+
+  li {
     position: relative;
-    margin-top:rem-calc(40);
+    width: 0;
-    li {
+    margin: 0 auto;
-      position: relative;
-      width:0;
-      margin: 0 auto;
-      &:before{
-        content: '';
-        position: absolute;
-        top:rem-calc(5);
-        transform: translateX(-50%);
-        width: rem-calc(20);
-        height: rem-calc(20);
-        border-radius: 50%;
-        background: $budget;
-        z-index: 2;
-      }
-      &:after{
-        content: '';
-        width: 1px;
-        background: $light-gray;
-        bottom: 100%;
-        height: 100%;
-        position: absolute;
-        top: rem-calc(25);
-        z-index: 1;
-      }
-      div {
-        position: relative;
-        padding: rem-calc(3) rem-calc(10);
-        h3{
-          font-size: 1.2rem;
-          margin-bottom:0;
-        }
-        strong{
-          color:$text-light;
-          font-size: 0.9rem;
-        }
-      }
-
-      &:nth-child(odd),
-      &:nth-child(even){
-        div{
-          @include breakpoint(medium) {
-            width: rem-calc(300)
-          }
-          @include breakpoint(large) {
-            width: rem-calc(450)
-          }
-        }
-      }
-
-      &:nth-child(odd){
-        div{
-          text-align: right;
-          @include breakpoint(medium) {
-            margin-left:rem-calc(-315);
-          }
-          @include breakpoint(large) {
-            margin-left:rem-calc(-465);
-          }
-        }
-      }
-
-      &:nth-child(even) div {
-        left: rem-calc(15);
-      }
-    }
   }
 
+  li::before {
+    content: '';
+    position: absolute;
+    top: rem-calc(5);
+    transform: translateX(-50%);
+    width: rem-calc(20);
+    height: rem-calc(20);
+    border-radius: 50%;
+    background: $budget;
+    z-index: 2;
+  }
+
+  li::after {
+    content: '';
+    width: 1px;
+    background: $light-gray;
+    bottom: 100%;
+    height: 100%;
+    position: absolute;
+    top: rem-calc(25);
+    z-index: 1;
+  }
+}
+
+.tab-milestones ul div {
+  position: relative;
+  padding: rem-calc(3) rem-calc(10);
+
+  h3 {
+    font-size: 1.2rem;
+    margin-bottom: 0;
+  }
+
+  strong {
+    color: $text-light;
+    font-size: 0.9rem;
+  }
+}
+
+.tab-milestones .timeline ul li:nth-child(odd),
+.tab-milestones .timeline ul li:nth-child(even) {
+
+  div {
+    @include breakpoint(medium) {
+      width: rem-calc(300);
+    }
+
+    @include breakpoint(large) {
+      width: rem-calc(450);
+    }
+  }
+}
+
+.tab-milestones .timeline ul li:nth-child(odd) {
+  div {
+    text-align: right;
+
+    @include breakpoint(medium) {
+      margin-left: rem-calc(-315);
+    }
+
+    @include breakpoint(large) {
+      margin-left: rem-calc(-465);
+    }
+  }
+}
+
+.tab-milestones .timeline ul li:nth-child(even) {
+  div {
+    left: rem-calc(15);
+  }
+}
+
+.tab-milestones {
   @include breakpoint(small only) {
-    .timeline ul{
+
-      li{
+    .timeline ul li {
-        width: 100%;
+      width: 100%;
-        &:nth-child(odd),
+
-        &:nth-child(even){
+      &:nth-child(odd),
-          div{
+      &:nth-child(even) {
-            text-align: left;
+        div {
-            left:rem-calc(15);
+          text-align: left;
-          }
+          left: rem-calc(15);
         }
       }
     }
   }
 }
 
+
 // 04. List participation
 // ----------------------
 

app/views/budgets/investments/_milestones.html.erb

@@ -1,4 +1,4 @@
-<div class="tabs-panel" id="tab-milestones">
+<div class="tabs-panel tab-milestones" id="tab-milestones">
   <div class="row">
     <div class="small-12 column">
       <% if @investment.milestones.blank? %>