consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactors css for comments and flags

Browse Source
This commit is contained in:
Alberto Garcia Cabeza
2015-10-08 17:19:37 +02:00
parent 784dd649c9
commit 7012d0c901
4 changed files with 172 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/application.scss
View File

@@ -4,7 +4,7 @@
@import "icons"; @import "icons";
@import "variables"; @import "variables";
@import "admin"; @import "admin";
@import "participacion"; @import "layout";
@import "debates"; @import "debates";
@import "proposals"; @import "proposals";
@import "c3"; @import "c3";

171
app/assets/stylesheets/debates.scss
View File

@@ -6,8 +6,6 @@
// 02.2. List // 02.2. List
// 03. Show // 03. Show
// 04. New // 04. New
// 05. Comments
// 06. Flags
// //
// 01. Debates // 01. Debates
@@ -615,172 +613,3 @@
.debate-edit { .debate-edit {
@extend .debate-new; @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;
}

171
app/assets/stylesheets/participacion.scss → app/assets/stylesheets/layout.scss
View File

@@ -17,6 +17,8 @@
// 15. Social // 15. Social
// 16. Pages // 16. Pages
// 17. Verification // 17. Verification
// 18. Comments
// 19. Flags
// //
// 01. Variables // 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;
}

171
app/assets/stylesheets/proposals.scss
View File

@@ -6,8 +6,6 @@
// 02.2. List // 02.2. List
// 03. Show // 03. Show
// 04. New // 04. New
// 05. Comments
// 06. Flags
// //
// 01. Proposals // 01. Proposals
@@ -605,172 +603,3 @@
.proposal-edit { .proposal-edit {
@extend .proposal-new; @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;
}