diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss index 1155382dc..eff65e01a 100644 --- a/app/assets/stylesheets/debates.scss +++ b/app/assets/stylesheets/debates.scss @@ -66,7 +66,7 @@ } } - .like { + .like, .unlike { line-height: rem-calc(48); vertical-align: super; @@ -81,10 +81,6 @@ } } - .unlike { - @extend .like; - } - .voted { .icon-like { @extend .icon-like; @@ -297,16 +293,18 @@ } .debate { - @extend .debate-featured; margin-bottom: 0; margin-top: 0; .panel { + background: white; + border: 1px solid; + border-color: #e5e6e9 #dfe0e4 #d0d1d5; border-radius: 0; box-shadow: 0px 1px 3px 0 $border; margin-bottom: rem-calc(12); min-height: rem-calc(192); - padding-top: rem-calc(12); + padding: rem-calc(12) rem-calc(12) 0 rem-calc(12); @media (min-width: $small-breakpoint) { margin-bottom: rem-calc(-1); @@ -314,13 +312,36 @@ } .label-debate { + background: none; + clear: both; + color: $debates; + display: block; + font-size: rem-calc(12); + font-weight: bold; line-height: $line-height; padding-bottom: 0; + padding-left: 0; + padding-top: 0; + text-transform: uppercase; } h3 { - margin-top: 0; + font-weight: bold; + margin: 0; min-height: rem-calc(48); + + a { + clear: both; + color: $text; + display: block; + font-size: rem-calc(16); + line-height: $line-height; + text-transform: lowercase; + + &:first-letter { + text-transform: uppercase; + } + } } .debate-content { @@ -333,18 +354,75 @@ } .icon-debates { + color: $debates; font-size: rem-calc(18); left: rem-calc(60); + line-height: $line-height; + position: absolute; top: 0; } + .debate-info { + color: $text-medium; + font-weight: lighter; + margin-bottom: 0; + + .icon-comments { + font-size: rem-calc(16); + vertical-align: top; + } + + a { + color: $text-medium; + } + } + .debate-description { + color: $text; + font-size: rem-calc(13); height: rem-calc(72); + line-height: $line-height; + margin-bottom: rem-calc(12); margin-top: 0; + overflow: hidden; + position: relative; + + a { + color: $text; + } + + ul, ol { + + li { + font-size: rem-calc(13); + margin-bottom: rem-calc(12); + } + } + } + + .truncate { + background: image-url('truncate.png'); + background-repeat: repeat-x; + bottom: 0; + height: 24px; + position: absolute; + width: 100%; + } + + p { + color: $text; + font-size: rem-calc(14); + line-height: $line-height; + margin-bottom: rem-calc(12); + + &.debate-info { + font-size: rem-calc(13); + } } } .votes { + @include votes; border: 1px solid $votes-border; margin: 0 rem-calc(-12); @@ -388,7 +466,7 @@ } @media (min-width: $small-breakpoint) { - .like { + .like, .unlike { span { display: block; @@ -561,7 +639,7 @@ // 04. New // - - - - - - - - - - - - - - - - - - - - - - - - - -.debate-new { +.debate-new, .debate-edit { background: white; padding-top: rem-calc(24); @@ -609,7 +687,3 @@ } } } - -.debate-edit { - @extend .debate-new; -}