Adds featured debates

app/assets/stylesheets/participation.scss

@@ -4,7 +4,7 @@
 // 02. New participation
 // 03. Show participation
 // 04. List participation
-// 05. Featured proposals
+// 05. Featured
 //
 
 // 01. Votes and supports
@@ -827,12 +827,28 @@
   }
 }
 
-// 05. Featured proposals
+// 05. Featured
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
+.featured-debates-container {
+  background: $votes-bg;
+
+  @media (min-width: $medium-breakpoint) {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+
+  h2 {
+    color: white;
+  }
+
+  .debates-list {
+    margin-bottom: 0;
+  }
+}
+
 .featured-proposals-container {
   background: #FED900;
-  margin: 0 !important;
 
   @media (min-width: $medium-breakpoint) {
     margin-left: 0 !important;
@@ -841,14 +857,21 @@
 
   h2 {
     color: $text;
-    font-size: rem-calc(24);
-    margin: rem-calc(12) 0 0;
-    position: relative;
-    text-transform: uppercase;
 
     @media (min-width: $medium-breakpoint) {
       margin-bottom: rem-calc(27);
     }
+  }
+}
+
+.featured-debates-container, .featured-proposals-container {
+  margin: 0 !important;
+
+  h2 {
+    font-size: rem-calc(24);
+    margin: rem-calc(12) 0 0;
+    position: relative;
+    text-transform: uppercase;
 
     .icon-proposals {
       font-size: rem-calc(20);
@@ -858,34 +881,86 @@
     }
   }
 
+  .debates-list {
+
+    @media (min-width: $medium-breakpoint) {
+      border-left: 1px solid $votes-border;
+    }
+
+    &:after {
+
+      @media (min-width: $medium-breakpoint) {
+        content: none;
+      }
+    }
+  }
+
   .proposals-list {
-    margin: rem-calc(6) 0;
 
     @media (min-width: $medium-breakpoint) {
       border-left: 1px solid #D2B400;
     }
 
     &:after {
-      content: none;
-      position: absolute;
-      display: block;
-      border-style: solid;
       border-color: #C9AF00 transparent transparent transparent;
-      bottom: rem-calc(-20);
-      border-left-width: 0;
-      border-right-color: transparent;
-      right: rem-calc(1);
-      border-width: rem-calc(14) rem-calc(14) 0 0;
 
       @media (min-width: $medium-breakpoint) {
         content: " ";
       }
     }
   }
+
+  .debates-list, .proposals-list {
+    margin: rem-calc(6) 0;
+
+    &:after {
+      content: none;
+      position: absolute;
+      display: block;
+      border-style: solid;
+      bottom: rem-calc(-20);
+      border-left-width: 0;
+      border-right-color: transparent;
+      right: rem-calc(1);
+      border-width: rem-calc(14) rem-calc(14) 0 0;
+    }
+  }
+}
+
+.debate-featured {
+  background: $votes-bg;
+
+  .panel h3 a {
+    color: #0D3F54;
+  }
+
+  .info {
+    color: white !important;
+  }
+
+  .content {
+    height: auto;
+  }
 }
 
 .proposal-featured {
   background: #FED900;
+
+  .panel h3 a {
+    color: $text;
+  }
+
+  .info {
+    color: #806C00 !important;
+  }
+
+  .content {
+    height: rem-calc(60);
+  }
+}
+
+.debate-featured, .proposal-featured {
+
   margin-bottom: 0;
   margin-top: 0;
   padding-left: 0;
@@ -903,7 +978,6 @@
 
       a {
         clear: both;
-        color: $text;
         display: block;
         font-size: rem-calc(14);
         line-height: $line-height;
@@ -921,14 +995,9 @@
   }
 
   .content {
-    height: rem-calc(60);
     overflow: hidden;
   }
 
-  .info {
-    color: #806C00 !important;
-  }
-
   .supports {
     @include supports;
     background: none;