From 7012d0c901c16b6ea61b77e25ccf12f8e6991c8c Mon Sep 17 00:00:00 2001
From: Alberto Garcia Cabeza <alberto@decabeza.es>
Date: Thu, 8 Oct 2015 17:19:37 +0200
Subject: [PATCH] Refactors css for comments and flags

---
 app/assets/stylesheets/application.scss       |   2 +-
 app/assets/stylesheets/debates.scss           | 171 ------------------
 .../{participacion.scss => layout.scss}       | 171 ++++++++++++++++++
 app/assets/stylesheets/proposals.scss         | 171 ------------------
 4 files changed, 172 insertions(+), 343 deletions(-)
 rename app/assets/stylesheets/{participacion.scss => layout.scss} (89%)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 4bf184c2c..94ddf4867 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -4,7 +4,7 @@
 @import "icons";
 @import "variables";
 @import "admin";
-@import "participacion";
+@import "layout";
 @import "debates";
 @import "proposals";
 @import "c3";
\ No newline at end of file
diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss
index 560c16664..1155382dc 100644
--- a/app/assets/stylesheets/debates.scss
+++ b/app/assets/stylesheets/debates.scss
@@ -6,8 +6,6 @@
 //  02.2. List
 // 03. Show
 // 04. New
-// 05. Comments
-// 06. Flags
 //
 
 // 01. Debates
@@ -615,172 +613,3 @@
 .debate-edit {
   @extend .debate-new;
 }
-
-// 05. Comments
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.comments {
-  background: $white;
-  background-repeat: repeat-x;
-  padding-top: rem-calc(24);
-  padding-bottom: rem-calc(96);
-
-  h2 {
-    margin: 0;
-    font-weight: bold;
-
-    span {
-      font-size: rem-calc(18);
-      font-weight: normal;
-      opacity: .8;
-    }
-  }
-
-  .comment {
-    margin: rem-calc(6) 0;
-
-    p {
-      margin-bottom: 0;
-    }
-
-    .comment-votes {
-      color: $text-medium;
-      font-weight: lighter;
-      line-height: rem-calc(24);
-      margin: rem-calc(10) rem-calc(12) rem-calc(6) 0;
-
-      a {
-        color: $text-light;
-        display: inline-block;
-        vertical-align: top;
-
-        &:hover {
-          color: $text-medium;
-        }
-      }
-
-      [class^="icon-"] {
-        font-size: rem-calc(20);
-        vertical-align: middle;
-      }
-    }
-
-    .comment-body {
-      margin-left: rem-calc(42);
-
-      p {
-        font-size: rem-calc(14);
-      }
-
-      .reply {
-        background: white;
-        border: 1px solid $border;
-        font-size: rem-calc(12);
-        margin: rem-calc(6) 0;
-        padding: rem-calc(6);
-
-        .divider {
-          color: $text-light;
-        }
-      }
-
-      .comment-user {
-        margin-top: rem-calc(6);
-        padding: rem-calc(6) 0;
-        overflow: hidden;
-
-        @each $n in ("1", "2", "3","4", "5") {
-          &.level-#{$n} {
-            @if $n == "5" {
-              background: $comment-level-5;
-              padding: rem-calc(6) rem-calc(12);
-            }
-            @elseif $n == "1" {
-              background: none;
-              padding: rem-calc(6) rem-calc(12);
-            }
-            @else {
-              background: $comment-official;
-              padding: rem-calc(6) rem-calc(12);
-            }
-          }
-        }
-
-        &.is-author {
-          background: $comment-author;
-          padding: rem-calc(6) rem-calc(12);
-        }
-
-        &.is-admin {
-          background: $comment-admin;
-          padding: rem-calc(6) rem-calc(12);
-        }
-
-        &.is-moderator {
-          @extend .is-admin;
-        }
-
-        &.level-5 {
-          background: $comment-level-5;
-          padding: rem-calc(6) rem-calc(12);
-        }
-      }
-    }
-
-    .is-deleted {
-      background: $deleted;
-      margin-left: rem-calc(42);
-      padding: rem-calc(6) rem-calc(12);
-    }
-
-    .comment-children {
-      border-left: 1px dashed $border;
-      margin-left: rem-calc(42);
-      padding-left: rem-calc(6);
-
-      @media only screen and (max-width: 40em) {
-        margin-left: rem-calc(16);
-      }
-    }
-
-    .comment-info {
-      color: $text-light;
-      font-size: rem-calc(13);
-      font-weight: lighter;
-      margin-top: rem-calc(6);
-      vertical-align: middle;
-
-      span.user-name {
-        color: $text;
-        font-weight: bold;
-      }
-    }
-  }
-}
-
-.faded {
-  opacity: 0.4;
-}
-
-// 06. Flags
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.flag-content {
-
-  .button {
-    background: none;
-    margin-bottom: 0;
-    padding: 0;
-  }
-}
-
-.flag-disable {
-  color: $text-medium;
-  line-height: rem-calc(24);
-  vertical-align: middle;
-}
-
-.flag-active {
-  @extend .flag-disable;
-  color: $delete;
-}
diff --git a/app/assets/stylesheets/participacion.scss b/app/assets/stylesheets/layout.scss
similarity index 89%
rename from app/assets/stylesheets/participacion.scss
rename to app/assets/stylesheets/layout.scss
index 520a836aa..28e53b5b3 100644
--- a/app/assets/stylesheets/participacion.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -17,6 +17,8 @@
 // 15. Social
 // 16. Pages
 // 17. Verification
+// 18. Comments
+// 19. Flags
 //
 
 // 01. Variables
@@ -1727,3 +1729,172 @@ table {
     }
   }
 }
+
+// 18. Comments
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+.comments {
+  background: $white;
+  background-repeat: repeat-x;
+  padding-top: rem-calc(24);
+  padding-bottom: rem-calc(96);
+
+  h2 {
+    margin: 0;
+    font-weight: bold;
+
+    span {
+      font-size: rem-calc(18);
+      font-weight: normal;
+      opacity: .8;
+    }
+  }
+
+  .comment {
+    margin: rem-calc(6) 0;
+
+    p {
+      margin-bottom: 0;
+    }
+
+    .comment-votes {
+      color: $text-medium;
+      font-weight: lighter;
+      line-height: rem-calc(24);
+      margin: rem-calc(10) rem-calc(12) rem-calc(6) 0;
+
+      a {
+        color: $text-light;
+        display: inline-block;
+        vertical-align: top;
+
+        &:hover {
+          color: $text-medium;
+        }
+      }
+
+      [class^="icon-"] {
+        font-size: rem-calc(20);
+        vertical-align: middle;
+      }
+    }
+
+    .comment-body {
+      margin-left: rem-calc(42);
+
+      p {
+        font-size: rem-calc(14);
+      }
+
+      .reply {
+        background: white;
+        border: 1px solid $border;
+        font-size: rem-calc(12);
+        margin: rem-calc(6) 0;
+        padding: rem-calc(6);
+
+        .divider {
+          color: $text-light;
+        }
+      }
+
+      .comment-user {
+        margin-top: rem-calc(6);
+        padding: rem-calc(6) 0;
+        overflow: hidden;
+
+        @each $n in ("1", "2", "3","4", "5") {
+          &.level-#{$n} {
+            @if $n == "5" {
+              background: $comment-level-5;
+              padding: rem-calc(6) rem-calc(12);
+            }
+            @elseif $n == "1" {
+              background: none;
+              padding: rem-calc(6) rem-calc(12);
+            }
+            @else {
+              background: $comment-official;
+              padding: rem-calc(6) rem-calc(12);
+            }
+          }
+        }
+
+        &.is-author {
+          background: $comment-author;
+          padding: rem-calc(6) rem-calc(12);
+        }
+
+        &.is-admin {
+          background: $comment-admin;
+          padding: rem-calc(6) rem-calc(12);
+        }
+
+        &.is-moderator {
+          @extend .is-admin;
+        }
+
+        &.level-5 {
+          background: $comment-level-5;
+          padding: rem-calc(6) rem-calc(12);
+        }
+      }
+    }
+
+    .is-deleted {
+      background: $deleted;
+      margin-left: rem-calc(42);
+      padding: rem-calc(6) rem-calc(12);
+    }
+
+    .comment-children {
+      border-left: 1px dashed $border;
+      margin-left: rem-calc(42);
+      padding-left: rem-calc(6);
+
+      @media only screen and (max-width: 40em) {
+        margin-left: rem-calc(16);
+      }
+    }
+
+    .comment-info {
+      color: $text-light;
+      font-size: rem-calc(13);
+      font-weight: lighter;
+      margin-top: rem-calc(6);
+      vertical-align: middle;
+
+      span.user-name {
+        color: $text;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.faded {
+  opacity: 0.4;
+}
+
+// 19. Flags
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+.flag-content {
+
+  .button {
+    background: none;
+    margin-bottom: 0;
+    padding: 0;
+  }
+}
+
+.flag-disable {
+  color: $text-medium;
+  line-height: rem-calc(24);
+  vertical-align: middle;
+}
+
+.flag-active {
+  @extend .flag-disable;
+  color: $delete;
+}
diff --git a/app/assets/stylesheets/proposals.scss b/app/assets/stylesheets/proposals.scss
index 7689e93dd..92db612b7 100644
--- a/app/assets/stylesheets/proposals.scss
+++ b/app/assets/stylesheets/proposals.scss
@@ -6,8 +6,6 @@
 //  02.2. List
 // 03. Show
 // 04. New
-// 05. Comments
-// 06. Flags
 //
 
 // 01. Proposals
@@ -605,172 +603,3 @@
 .proposal-edit {
   @extend .proposal-new;
 }
-
-// 05. Comments
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.comments {
-  background: $white;
-  background-repeat: repeat-x;
-  padding-top: rem-calc(24);
-  padding-bottom: rem-calc(96);
-
-  h2 {
-    margin: 0;
-    font-weight: bold;
-
-    span {
-      font-size: rem-calc(18);
-      font-weight: normal;
-      opacity: .8;
-    }
-  }
-
-  .comment {
-    margin: rem-calc(6) 0;
-
-    p {
-      margin-bottom: 0;
-    }
-
-    .comment-votes {
-      color: $text-medium;
-      font-weight: lighter;
-      line-height: rem-calc(24);
-      margin: rem-calc(10) rem-calc(12) rem-calc(6) 0;
-
-      a {
-        color: $text-light;
-        display: inline-block;
-        vertical-align: top;
-
-        &:hover {
-          color: $text-medium;
-        }
-      }
-
-      [class^="icon-"] {
-        font-size: rem-calc(20);
-        vertical-align: middle;
-      }
-    }
-
-    .comment-body {
-      margin-left: rem-calc(42);
-
-      p {
-        font-size: rem-calc(14);
-      }
-
-      .reply {
-        background: white;
-        border: 1px solid $border;
-        font-size: rem-calc(12);
-        margin: rem-calc(6) 0;
-        padding: rem-calc(6);
-
-        .divider {
-          color: $text-light;
-        }
-      }
-
-      .comment-user {
-        margin-top: rem-calc(6);
-        padding: rem-calc(6) 0;
-        overflow: hidden;
-
-        @each $n in ("1", "2", "3","4", "5") {
-          &.level-#{$n} {
-            @if $n == "5" {
-              background: $comment-level-5;
-              padding: rem-calc(6) rem-calc(12);
-            }
-            @elseif $n == "1" {
-              background: none;
-              padding: rem-calc(6) rem-calc(12);
-            }
-            @else {
-              background: $comment-official;
-              padding: rem-calc(6) rem-calc(12);
-            }
-          }
-        }
-
-        &.is-author {
-          background: $comment-author;
-          padding: rem-calc(6) rem-calc(12);
-        }
-
-        &.is-admin {
-          background: $comment-admin;
-          padding: rem-calc(6) rem-calc(12);
-        }
-
-        &.is-moderator {
-          @extend .is-admin;
-        }
-
-        &.level-5 {
-          background: $comment-level-5;
-          padding: rem-calc(6) rem-calc(12);
-        }
-      }
-    }
-
-    .is-deleted {
-      background: $deleted;
-      margin-left: rem-calc(42);
-      padding: rem-calc(6) rem-calc(12);
-    }
-
-    .comment-children {
-      border-left: 1px dashed $border;
-      margin-left: rem-calc(42);
-      padding-left: rem-calc(6);
-
-      @media only screen and (max-width: 40em) {
-        margin-left: rem-calc(16);
-      }
-    }
-
-    .comment-info {
-      color: $text-light;
-      font-size: rem-calc(13);
-      font-weight: lighter;
-      margin-top: rem-calc(6);
-      vertical-align: middle;
-
-      span.user-name {
-        color: $text;
-        font-weight: bold;
-      }
-    }
-  }
-}
-
-.faded {
-  opacity: 0.4;
-}
-
-// 06. Flags
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.flag-content {
-
-  .button {
-    background: none;
-    margin-bottom: 0;
-    padding: 0;
-  }
-}
-
-.flag-disable {
-  color: $text-medium;
-  line-height: rem-calc(24);
-  vertical-align: middle;
-}
-
-.flag-active {
-  @extend .flag-disable;
-  color: $delete;
-}