diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 9cda8cab1..b9f9ca39e 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -6,6 +6,4 @@ @import "admin"; @import "layout"; @import "participation"; -@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 deleted file mode 100644 index 547d57a9b..000000000 --- a/app/assets/stylesheets/debates.scss +++ /dev/null @@ -1,346 +0,0 @@ -// Table of Contents -// -// 01. Debates -// 02. Index -// 02.1. Featured -// 02.2. List -// 03. Show -// - -// 02. Index -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// 02.1. Featured -// - - - - - - - - - - - - - - -// .debate-featured { - -// .panel { -// background: white; -// border: 1px solid; -// border-color: #e5e6e9 #dfe0e4 #d0d1d5; -// border-radius: rem-calc(3); -// margin-bottom: rem-calc(24); -// padding: rem-calc(24) rem-calc(12) 0 rem-calc(12); - -// .debate-content { -// min-height: rem-calc(353); -// } - -// .label-debate { -// background: none; -// clear: both; -// color: $debates; -// display: block; -// font-size: rem-calc(12); -// font-weight: bold; -// text-transform: uppercase; -// padding-left: 0; -// padding-top: 0; -// } - -// .icon-debates { -// color: $debates; -// font-size: rem-calc(36); -// line-height: $line-height; -// position: absolute; -// right: rem-calc(18); -// top: rem-calc(12); -// } - -// h3 { -// font-weight: bold; -// margin: rem-calc(8) 0 0 0; -// min-height: rem-calc(65); - -// 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-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(156); -// line-height: $line-height; -// margin-bottom: rem-calc(12); -// margin-top: rem-calc(24); -// 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; -// } -// } - -// 02.2. List -// - - - - - - - - - - - - - - -.debates-list { - - @media (min-width: $small-breakpoint) { - margin-bottom: rem-calc(48); - } -} - -.debate { - 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: rem-calc(12) rem-calc(12) 0 rem-calc(12); - - @media (min-width: $small-breakpoint) { - margin-bottom: rem-calc(-1); - padding-bottom: rem-calc(12); - } - - .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 { - 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 { - margin: 0; - min-height: rem-calc(180); - - .tags { - display: block; - } - } - - .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); - - @media (min-width: $small-breakpoint) { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - margin: 0 rem-calc(-25) 0 rem-calc(12); - } - - &:after { - content: none; - position: absolute; - display: block; - border-style: solid; - border-color: #166387 transparent transparent transparent; - bottom: rem-calc(-14); - border-left-width: 0; - border-right-color: transparent; - right: rem-calc(-1); - border-width: 1em 1em 0 0; - - @media (min-width: $small-breakpoint) { - content: ""; - } - } - - .total-votes { - display: inline-block; - line-height: $line-height; - margin-left: rem-calc(24); - padding-top: rem-calc(12); - vertical-align: top; - - @media (min-width: $small-breakpoint) { - display: block; - float: none; - line-height: $line-height*2; - margin-left: 0; - padding-top: 0; - } - } - - @media (min-width: $small-breakpoint) { - .like, .unlike { - - span { - display: block; - line-height: $line-height/2; - } - } - } - - .not-logged { - line-height: $line-height; - padding-top: rem-calc(24); - } - - .anonymous-votes, .organizations-votes { - padding-top: rem-calc(24); - } - - .divider { - display: none; - } - - @media (min-width: $medium-breakpoint) { - .divider { - display: inline-block; - } - } - } -} diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index deb13635a..9aa06dd04 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -1,11 +1,9 @@ -// Table of Contents +// Table of Contents - Styles for debates and proposals // -// Styles for debates and proposals // 01. Votes and supports // 02. New participation // 03. Show participation -// 04. Featured -// 05. +// 04. List participation // // 01. Votes and supports @@ -83,14 +81,12 @@ .voted { .icon-like { - @extend .icon-like; background: $votes-like; border-color: white; color: white; } .icon-unlike { - @extend .icon-unlike; background: $votes-unlike; border-color: white; color: white; @@ -442,7 +438,7 @@ line-height: rem-calc(30); } - .document-link { + .document-link, .video-link { border: 1px solid $border; display: block; margin-top: rem-calc(12); @@ -466,7 +462,6 @@ } .video-link { - @extend .document-link; :before { color: #CC181E; @@ -546,21 +541,33 @@ color: $border; } -// 04. Featured +// 04. List participation // - - - - - - - - - - - - - - - - - - - - - - - - - -.debate-featured, .proposal-featured { +.debates-list, .proposals-list { + + @media (min-width: $small-breakpoint) { + margin-bottom: rem-calc(48); + } +} + +.debate, .proposal { + margin-bottom: 0; + margin-top: 0; .panel { background: white; border: 1px solid; - border-color: #E5E6E9 #DFE0E4 #D0D1D5; - border-radius: rem-calc(3); - margin-bottom: rem-calc(24); - padding: rem-calc(24) rem-calc(12) 0 rem-calc(12); + 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: rem-calc(12) rem-calc(12) 0 rem-calc(12); - .debate-content, .proposal-content { - min-height: rem-calc(353); + @media (min-width: $small-breakpoint) { + margin-bottom: rem-calc(-1); + padding-bottom: rem-calc(12); } .label-debate, .label-proposal { @@ -569,9 +576,11 @@ display: block; font-size: rem-calc(12); font-weight: bold; - text-transform: uppercase; + line-height: $line-height; + padding-bottom: 0; padding-left: 0; padding-top: 0; + text-transform: uppercase; } .label-debate { @@ -582,26 +591,10 @@ color: $proposals; } - .icon-debates, .icon-proposals { - font-size: rem-calc(36); - line-height: $line-height; - position: absolute; - right: rem-calc(18); - top: rem-calc(12); - } - - .icon-debates { - color: $debates; - } - - .icon-proposals { - color: $proposals; - } - h3 { font-weight: bold; - margin: rem-calc(8) 0 0 0; - min-height: rem-calc(65); + margin: 0; + min-height: rem-calc(48); a { clear: both; @@ -617,6 +610,32 @@ } } + .debate-content, .proposal-content { + margin: 0; + min-height: rem-calc(180); + + .tags { + display: block; + } + } + + .icon-debates, .icon-proposals { + font-size: rem-calc(18); + line-height: $line-height; + position: absolute; + top: 0; + } + + .icon-debates { + color: $debates; + left: rem-calc(60); + } + + .icon-proposals { + color: $proposals; + left: rem-calc(88); + } + .debate-info, .proposal-info { color: $text-medium; font-weight: lighter; @@ -635,10 +654,10 @@ .debate-description, .proposal-description { color: $text; font-size: rem-calc(13); - height: rem-calc(156); + height: rem-calc(72); line-height: $line-height; margin-bottom: rem-calc(12); - margin-top: rem-calc(24); + margin-top: 0; overflow: hidden; position: relative; @@ -676,15 +695,126 @@ } } - .supports { - @include supports; + .not-logged { + line-height: $line-height; + padding-top: rem-calc(24); } - .votes { - @include votes; + .anonymous-votes, .organizations-votes { + padding-top: rem-calc(24); + } + + .divider { + display: none; + } + + @media (min-width: $medium-breakpoint) { + .divider { + display: inline-block; + } } } +.debate { + .votes { + @include votes; + border: 1px solid $votes-border; + margin: 0 rem-calc(-12); + @media (min-width: $small-breakpoint) { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + margin: 0 rem-calc(-25) 0 rem-calc(12); + } + &:after { + content: none; + position: absolute; + display: block; + border-style: solid; + border-color: #166387 transparent transparent transparent; + bottom: rem-calc(-14); + border-left-width: 0; + border-right-color: transparent; + right: rem-calc(-1); + border-width: 1em 1em 0 0; + + @media (min-width: $small-breakpoint) { + content: ""; + } + } + + .total-votes { + display: inline-block; + line-height: $line-height; + margin-left: rem-calc(24); + padding-top: rem-calc(12); + vertical-align: top; + + @media (min-width: $small-breakpoint) { + display: block; + float: none; + line-height: $line-height*2; + margin-left: 0; + padding-top: 0; + } + } + + @media (min-width: $small-breakpoint) { + .like, .unlike { + + span { + display: block; + line-height: $line-height/2; + } + } + } + } +} + +.proposal { + + .supports { + @include supports; + border: 1px solid $proposals-border; + margin: 0 rem-calc(-12); + + @media (min-width: $small-breakpoint) { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + margin: 0 rem-calc(-25) 0 rem-calc(12); + } + + &:after { + content: none; + position: absolute; + display: block; + border-style: solid; + border-color: #664212 transparent transparent transparent; + bottom: rem-calc(-14); + border-left-width: 0; + border-right-color: transparent; + right: rem-calc(-1); + border-width: 1em 1em 0 0; + + @media (min-width: $small-breakpoint) { + content: ""; + } + } + + .total-supports { + display: inline-block; + line-height: $line-height; + padding-top: rem-calc(12); + vertical-align: top; + + @media (min-width: $small-breakpoint) { + display: block; + float: none; + margin-left: 0; + padding-top: 0; + } + } + } +} diff --git a/app/assets/stylesheets/proposals.scss b/app/assets/stylesheets/proposals.scss deleted file mode 100644 index d2cdac183..000000000 --- a/app/assets/stylesheets/proposals.scss +++ /dev/null @@ -1,253 +0,0 @@ -// Table of Contents -// -// 01. Debates -// 02. Index -// 02.1. Featured -// 02.2. List -// 03. Show -// - - -// 02. Index -// - - - - - - - - - - - - - - - - - - - - - - - - - - -// 02.1. Featured -// - - - - - - - - - - - - - - -// .proposal-featured { - -// .panel { -// background: white; -// border: 1px solid; -// border-color: #e5e6e9 #dfe0e4 #d0d1d5; -// border-radius: rem-calc(3); -// margin-bottom: rem-calc(24); -// padding: rem-calc(24) rem-calc(12) 0 rem-calc(12); - -// .proposal-content { -// min-height: rem-calc(353); -// } - -// .label-proposal { -// background: none; -// clear: both; -// color: $proposals; -// display: block; -// font-size: rem-calc(12); -// font-weight: bold; -// text-transform: uppercase; -// padding-left: 0; -// padding-top: 0; -// } - -// .icon-proposals { -// color: $proposals; -// font-size: rem-calc(36); -// line-height: $line-height; -// position: absolute; -// right: rem-calc(18); -// top: rem-calc(12); -// } - -// h3 { -// font-weight: bold; -// margin: rem-calc(8) 0 0 0; -// min-height: rem-calc(65); - -// a { -// clear: both; -// color: $text; -// display: block; -// font-size: rem-calc(16); -// line-height: $line-height; -// text-transform: lowercase; - -// &:first-letter { -// text-transform: uppercase; -// } -// } -// } - -// .proposal-info { -// color: $text-medium; -// font-weight: lighter; -// margin-bottom: 0; - -// .icon-comments { -// font-size: rem-calc(16); -// vertical-align: top; -// } - -// a { -// color: $text-medium; -// } -// } - -// .proposal-description { -// color: $text; -// font-size: rem-calc(13); -// height: rem-calc(156); -// line-height: $line-height; -// margin-bottom: rem-calc(12); -// margin-top: rem-calc(24); -// 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); -// } -// } -// } - -// .supports { -// @include supports; -// } -// } - -// 02.2. List -// - - - - - - - - - - - - - - -.proposals-list { - - @media (min-width: $small-breakpoint) { - margin-bottom: rem-calc(48); - } -} - -.proposal { - @extend .proposal-featured; - margin-bottom: 0; - margin-top: 0; - - .panel { - 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); - - @media (min-width: $small-breakpoint) { - margin-bottom: rem-calc(-1); - padding-bottom: rem-calc(12); - } - - .label-proposal { - line-height: $line-height; - padding-bottom: 0; - } - - h3 { - margin-top: 0; - min-height: rem-calc(48); - } - - .proposal-content { - margin: 0; - min-height: rem-calc(180); - - .tags { - display: block; - } - } - - .icon-proposals { - font-size: rem-calc(18); - left: rem-calc(88); - top: 0; - } - - .proposal-description { - height: rem-calc(72); - margin-top: 0; - } - } - - .supports { - border: 1px solid $proposals-border; - margin: 0 rem-calc(-12); - - @media (min-width: $small-breakpoint) { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - margin: 0 rem-calc(-25) 0 rem-calc(12); - } - - &:after { - content: none; - position: absolute; - display: block; - border-style: solid; - border-color: #664212 transparent transparent transparent; - bottom: rem-calc(-14); - border-left-width: 0; - border-right-color: transparent; - right: rem-calc(-1); - border-width: 1em 1em 0 0; - - @media (min-width: $small-breakpoint) { - content: ""; - } - } - - .total-supports { - display: inline-block; - line-height: $line-height; - padding-top: rem-calc(12); - vertical-align: top; - - @media (min-width: $small-breakpoint) { - display: block; - float: none; - margin-left: 0; - padding-top: 0; - } - } - - .not-logged { - line-height: $line-height; - padding-top: rem-calc(24); - } - - .anonymous-votes, .organizations-votes { - padding-top: rem-calc(24); - } - - .divider { - display: none; - } - - @media (min-width: $medium-breakpoint) { - .divider { - display: inline-block; - } - } - } -}