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

Adds new styles for debates show

Browse Source
This commit is contained in:
Alberto Garcia Cabeza
2015-07-29 17:42:27 +02:00
parent 63895f52c3
commit 0efa9c77f1
5 changed files with 174 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,10 @@
// 03. Header
// 04. Footer
// 05. Debates
// 06. Comentarios
// 05.1. Debates Index
// 05.2. Debates Show
// 06. Comments
// 06. Tags
//
// 01. Variables
@@ -14,14 +17,31 @@
$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$line-height: rem-calc(24);
$background: #EDEFF0;
$background: #F9F9F9;
$border: #DEE0E3;
$brand: #0077B9;
$debates: #008CCF;
$comments-bg: #FAF9F8;
$header-color: #292B33;
$link: #0077B9;
$tags-bg: #FAFAFA;
$tags-border: #F0F0F0;
$tags-color: #8F8F8F;
$text-color: #919399;
$text-medium: #999999;
$text-light: #a3a6ad;
$votes-background: #EDEDED;
$votes-dislike: #FF7978;
$votes-like: #00D288;
$votes-border: #DEE0E3;
$votes-dislike: #EF8585;
$votes-dislike-b: #D26463;//FF7978;
$votes-like: #7BD2A8;
$votes-like-b: #56A47D;
// 02. Global styles
// - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -32,8 +52,9 @@ $votes-like: #00D288;
}
body {
background: $background;
background: white;
font-family: $font-family-sans-serif;
font-size: rem-calc(13);
font-weight: normal;
p {
@@ -45,6 +66,14 @@ body {
max-width: 1170px;
}
.row-full {
max-width: 100% !important;
}
.clear {
clear: both;
}
.inline-block {
display: inline-block;
}
@@ -53,13 +82,13 @@ body {
// - - - - - - - - - - - - - - - - - - - - - - - - -
header {
background: url('home-header-bg.jpg');
background: url('home_header_bg.jpg');
background-position: 50% 50%;
background-size: cover;
height: $line-height*20;
min-height: $line-height*20;
&.results {
height: $line-height*8 !important;
min-height: $line-height*8;
}
h1 {
@@ -152,6 +181,9 @@ header {
// 05. Debates
// - - - - - - - - - - - - - - - - - - - - - - - - -
// 05.1. Debates Index
// - - - - - - - - - - - -
.debates-index {
margin-top: $line-height;
}
@@ -160,7 +192,6 @@ header {
.panel {
background: white;
border: 0;
box-shadow: 0 2px 0 rgba(0,0,0,.1);
.fi-comment-quotes {
@@ -254,48 +285,97 @@ header {
}
}
// 05.2. Debates Show
// - - - - - - - - - - - -
.debate-show {
background: white;
color: $text-medium;
margin-top: $line-height;
padding: $line-height/2;
padding: 0 $line-height/2;
.back {
color: $text-light;
font-size: rem-calc(13);
line-height: $line-height;
}
h1 {
font-size: rem-calc(30);
clear: both;
font-size: rem-calc(24);
font-weight: bold;
line-height: $line-height*1.3333;
margin: 0;
padding-top: $line-height/2;
}
.fi-price-tag {
color: $text-color;
font-size: rem-calc(18);
line-height: $line-height;
.debate-info {
color: $text-light;
font-weight: lighter;
line-height: $line-height*2;
margin-bottom: $line-height*0.5;
text-align: justify;
span {
color: $border;
}
p {
font-size: rem-calc(14);
line-height: $line-height;
margin-bottom: 0;
}
}
.author-photo {
border-radius: 2px;
display: inline-block;
height: 32px;
line-height: $line-height*2;
margin-right: $line-height/4;
vertical-align: middle;
width: 32px;
}
.votes {
border: 1px solid $votes-border;
box-shadow: 0 2px 0 rgba(0,0,0,.1);
border-radius: 3px;
padding: $line-height/2;
.fi-like {
color: $votes-like;
background: $votes-like;
border: 1px solid $votes-like-b;
border-radius: $line-height*2.5;
color: white;
display: block;
font-size: rem-calc(48);
line-height: $line-height*2;
height: $line-height*2.5;
line-height: $line-height*2.5;
width: $line-height*2.5;
}
.fi-dislike {
color: $votes-dislike;
display: inline-block;
background: $votes-dislike;
border: 1px solid $votes-dislike-b;
border-radius: $line-height*2.5;
color: white;
display: block;
font-size: rem-calc(48);
line-height: $line-height*2;
padding-top: $line-height/3;
height: $line-height*2.5;
line-height: $line-height*2.5;
width: $line-height*2.5;
}
.in-favor {
color: $votes-like;
line-height: rem-calc(48);
vertical-align: top;
span {
display: inline-block;
line-height: 48px;
padding-top: 5px;
font-size: rem-calc(18);
font-weight: bold;
line-height: $line-height;
padding-top: $line-height/4;
vertical-align: top;
}
}
@@ -307,24 +387,26 @@ header {
.total-votes {
font-size: rem-calc(14);
line-height: $line-height*2;
margin: 0;
}
.divider {
background: rgba(0,0,0, .1);
background: rgba(0,0,0,.05);
display: inline-block;
height: 3rem;
margin: 0 .5rem;
height: $line-height*4;
margin: 0 $line-height;
width: 1px;
}
}
}
// 06. Comentarios
// 06. Comments
// - - - - - - - - - - - - - - - - - - - - - - - - -
.comments {
clear: both;
background: $comments-bg;
margin-top: $line-height*2;
padding-top: $line-height;
h2 {
margin: 0;
@@ -332,6 +414,27 @@ header {
}
}
// 07. Tags
// - - - - - - - - - - - - - - - - - - - - - - - - -
.tags a {
background: $tags-bg;
border: 1px solid $tags-border;
border-radius: 3px;
color: $tags-color;
font-size: rem-calc(13);
margin-bottom: 8px;
margin-right: $line-height/3;
padding: $line-height/4 $line-height/3;
&:hover {
color: $link;
cursor: pointer;
background: #e5f1f8;
border: 1px solid $brand;
}
}