Download as
Browse Code »

Commit 6dbe70d474072b8b39ecd6815c29eb6d03b72554

Authored by Augusto dos Anjos Almeida
1 parent 961c2732
Exists in refactory-sass

Cores aplicadas

Showing 6 changed files with 572 additions and 136 deletions   Show diff stats
@@ -25,7 +25,10 @@ @@ -25,7 +25,10 @@
25 if(base.match(/file:/) || filename.match(/http:/)){ 25 if(base.match(/file:/) || filename.match(/http:/)){
26 base = ''; 26 base = '';
27 }else{ 27 }else{
28 - base = this.initBase() + '/'; 28 + base = this.initBase();
  29 + if(base.indexOf('/', base.length - 1) === -1) {
  30 + base = base + '/';
  31 + }
29 } 32 }
30 return base + filename; 33 return base + filename;
31 } 34 }
@@ -94,11 +97,11 @@ @@ -94,11 +97,11 @@
94 97
95 <script id="proposal-template" type="text/x-handlebars-template"> 98 <script id="proposal-template" type="text/x-handlebars-template">
96 <header> 99 <header>
97 - <h1><a href="#">{{article.title}}</a></h1>  
98 <a id="display-contrast" href="#">Alto Contraste</a> 100 <a id="display-contrast" href="#">Alto Contraste</a>
99 <div class="social top"> 101 <div class="social top">
100 {{#social_share "Dialoga Brasil" "Aqui suas ideias viram propostas e você ajuda a melhorar as ações do governo" "#"}}{{/social_share}} 102 {{#social_share "Dialoga Brasil" "Aqui suas ideias viram propostas e você ajuda a melhorar as ações do governo" "#"}}{{/social_share}}
101 </div> 103 </div>
  104 + <h1><a href="#">{{article.title}}</a></h1>
102 </header> 105 </header>
103 106
104 <div id="content"> 107 <div id="content">
@@ -129,7 +132,7 @@ @@ -129,7 +132,7 @@
129 </ul> 132 </ul>
130 </nav> 133 </nav>
131 {{#each article.categories}} 134 {{#each article.categories}}
132 - <section id="proposal-item-{{id}}" class="proposal-category-items proposal-category-items-{{slug}} hide proposal-container" data-category="{{slug}}"> 135 + <section id="proposal-item-{{id}}" class="proposal-category-items proposal-category-items-{{slug}} hide proposal-container clearfix {{slug}}" data-category="{{slug}}">
133 <div class="header"> 136 <div class="header">
134 <div class="name">{{name}}</div> 137 <div class="name">{{name}}</div>
135 <div class="description"></div> 138 <div class="description"></div>
@@ -177,8 +180,10 @@ @@ -177,8 +180,10 @@
177 <div class="abstract"> 180 <div class="abstract">
178 <img src="{{../host}}{{image.url}}" alt="Imagem de apresentação do programa."/> 181 <img src="{{../host}}{{image.url}}" alt="Imagem de apresentação do programa."/>
179 </div> 182 </div>
180 - <div class="title">{{title}}</div>  
181 - <div class="abstract">{{{abstract}}}</div> 183 + <a href="#/programas/{{id}}/sobre-o-programa">
  184 + <div class="title">{{title}}</div>
  185 + <div class="abstract">{{{abstract}}}</div>
  186 + </a>
182 <div class="show_body row"> 187 <div class="show_body row">
183 <a class="col-sm-6 col-sm-offset-3" href="#/programas/{{id}}/sobre-o-programa"><span>Conheça o programa</span></a> 188 <a class="col-sm-6 col-sm-offset-3" href="#/programas/{{id}}/sobre-o-programa"><span>Conheça o programa</span></a>
184 </div> 189 </div>
@@ -202,7 +207,7 @@ @@ -202,7 +207,7 @@
202 <div class="col-sm-4 col-sm-offset-4"> 207 <div class="col-sm-4 col-sm-offset-4">
203 <div class="social right"> 208 <div class="social right">
204 <span>COMPARTILHE<br>ESTE PROGRAMA</span> 209 <span>COMPARTILHE<br>ESTE PROGRAMA</span>
205 - {{#social_share title abstract '#'}}{{/social_share}} 210 + {{{social_share title abstract (program_detail_url id)}}}
206 </div> 211 </div>
207 </div> 212 </div>
208 </div> 213 </div>
@@ -235,7 +240,7 @@ @@ -235,7 +240,7 @@
235 </section> 240 </section>
236 </div> 241 </div>
237 <div class="support-proposal-container col-sm-6"> 242 <div class="support-proposal-container col-sm-6">
238 - <section class="support-proposal box box-propostas box-center"> 243 + <section class="support-proposal box box-propostas box-center box-apoie">
239 <div class="container-title box-title">Apoie outras propostas</div> 244 <div class="container-title box-title">Apoie outras propostas</div>
240 <div class="alert alert-warning hide" role="alert"> 245 <div class="alert alert-warning hide" role="alert">
241 <i class="fa fa-warning"></i><strong>Proposta não encontrada</strong> 246 <i class="fa fa-warning"></i><strong>Proposta não encontrada</strong>
@@ -399,7 +404,7 @@ @@ -399,7 +404,7 @@
399 <li><a href="{{url}}" class="fb-share icon icon-facebook" data-caption="{{title}}" data-description="{{stripTags description}}">Compartilhar no Facebook</a></li> 404 <li><a href="{{url}}" class="fb-share icon icon-facebook" data-caption="{{title}}" data-description="{{stripTags description}}">Compartilhar no Facebook</a></li>
400 <li><a href="https://twitter.com/intent/tweet?url={{encodeURI url}}&text={{stripTags description}}" class="tw-share icon icon-twitter popup">Compartilhar no Twitter</a></li> 405 <li><a href="https://twitter.com/intent/tweet?url={{encodeURI url}}&text={{stripTags description}}" class="tw-share icon icon-twitter popup">Compartilhar no Twitter</a></li>
401 <li><a href="https://plus.google.com/share?url={{encodeURI url}}" class="gp-share icon icon-gplus popup">Compartilhar no Google Plus</a></li> 406 <li><a href="https://plus.google.com/share?url={{encodeURI url}}" class="gp-share icon icon-gplus popup">Compartilhar no Google Plus</a></li>
402 - <li><a href="whatsapp://send?text={{stripTags description}}" class="ws-share icon icon-whatsapp">Compartilhar no WhatsApp</a></li> 407 + <li><a href="whatsapp://send?text={{stripTags description}} {{encodeURI url}}" class="ws-share icon icon-whatsapp">Compartilhar no WhatsApp</a></li>
403 </ul> 408 </ul>
404 </script> 409 </script>
405 410
js/handlebars-helpers.js
  Diff comments   View file @6dbe70d
@@ -31,7 +31,7 @@ define([&#39;handlebars&#39;], function(Handlebars){ @@ -31,7 +31,7 @@ define([&#39;handlebars&#39;], function(Handlebars){
31 element = ''; 31 element = '';
32 continue; 32 continue;
33 } 33 }
34 - category = category + '<li class="category-'+proposal.categories[x].slug+'">' + proposal.categories[x].name + '</li>'; 34 + category = category + '<li class="category-'+proposal.categories[x].slug+' button button-inline">' + proposal.categories[x].name + '</li>';
35 } 35 }
36 if(element == ''){ 36 if(element == ''){
37 continue; 37 continue;
@@ -107,6 +107,10 @@ define([&#39;handlebars&#39;], function(Handlebars){ @@ -107,6 +107,10 @@ define([&#39;handlebars&#39;], function(Handlebars){
107 return "#/programas/"+parent_id+"/propostas/"+id; 107 return "#/programas/"+parent_id+"/propostas/"+id;
108 }); 108 });
109 109
  110 + Handlebars.registerHelper('program_detail_url', function(id) {
  111 + return "#/programas/"+id+"/sobre-o-programa";
  112 + });
  113 +
110 Handlebars.registerHelper('encodeURI', function(uri) { 114 Handlebars.registerHelper('encodeURI', function(uri) {
111 return encodeURIComponent(uri); 115 return encodeURIComponent(uri);
112 }); 116 });
@@ -20,7 +20,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F @@ -20,7 +20,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
20 var participa = true; 20 var participa = true;
21 if(participa){ 21 if(participa){
22 var host = 'http://www.participa.br'; 22 var host = 'http://www.participa.br';
23 - var proposal_discussion = '92856'; //participa 23 + var proposal_discussion = '103358'; //participa
24 }else{ 24 }else{
25 var host = 'http://noosfero.com:3000'; 25 var host = 'http://noosfero.com:3000';
26 var proposal_discussion = '632'; //local serpro 26 var proposal_discussion = '632'; //local serpro
@@ -2,22 +2,19 @@ @@ -2,22 +2,19 @@
2 body { 2 body {
3 font-family: "Open Sans", sans-serif; 3 font-family: "Open Sans", sans-serif;
4 font-size: 16px; 4 font-size: 16px;
5 - font-weight: 300; } 5 + font-weight: 400; }
6 6
7 h1 { 7 h1 {
8 - border-bottom: 1px solid #000;  
9 - bottom: 0; 8 + border-bottom: 1px solid #d6dcd7;
  9 + color: #03316f;
10 font-family: asap, sans; 10 font-family: asap, sans;
11 font-size: 28px; 11 font-size: 28px;
12 font-weight: 500; 12 font-weight: 500;
13 - margin: 0;  
14 - padding: 20px 0;  
15 - position: absolute;  
16 - text-transform: uppercase;  
17 - width: 100%; } 13 + padding-bottom: 20px;
  14 + text-transform: uppercase; }
18 15
19 h2 { 16 h2 {
20 - border-bottom: 1px solid; 17 + border-bottom: 1px solid #eeeff1;
21 font-size: 38px; 18 font-size: 38px;
22 font-weight: 300; 19 font-weight: 300;
23 margin-bottom: 40px; 20 margin-bottom: 40px;
@@ -26,6 +23,7 @@ h2 { @@ -26,6 +23,7 @@ h2 {
26 h2 small { 23 h2 small {
27 display: block; 24 display: block;
28 font-size: 16px; 25 font-size: 16px;
  26 + padding-top: 5px;
29 text-transform: none; } 27 text-transform: none; }
30 28
31 h3 { 29 h3 {
@@ -37,38 +35,35 @@ h4 { @@ -37,38 +35,35 @@ h4 {
37 font-size: 34px; 35 font-size: 34px;
38 font-weight: 500; } 36 font-weight: 500; }
39 37
40 -header {  
41 - position: relative;  
42 - height: 100px; } 38 +p, ul, select {
  39 + color: #000; }
43 40
44 .container, .row { 41 .container, .row {
45 margin-bottom: 20px; } 42 margin-bottom: 20px; }
46 43
47 -#content p {  
48 - font-family: asap, sans;  
49 - margin-bottom: 60px;  
50 - margin-left: 20px;  
51 - margin-right: 20px;  
52 - margin-top: 20px; }  
53 -  
54 .button { 44 .button {
55 - background-color: #000;  
56 - border: 0; 45 + border-bottom: 3px solid #000;
  46 + border-left: 0;
  47 + border-right: 0;
  48 + border-top: 0;
57 border-radius: 6px; 49 border-radius: 6px;
58 color: #fff; 50 color: #fff;
59 cursor: pointer; 51 cursor: pointer;
60 display: block; 52 display: block;
61 - font-size: 14px;  
62 - font-weight: 400; 53 + font-size: 16px;
  54 + font-weight: 700;
63 padding: 20px 0; 55 padding: 20px 0;
64 text-align: center; 56 text-align: center;
65 - text-transform: uppercase;  
66 transition: all 400ms; } 57 transition: all 400ms; }
67 .button:hover { 58 .button:hover {
68 - background-color: #333333; 59 + background-color: black;
69 text-decoration: none; } 60 text-decoration: none; }
70 .button:hover, .button:focus { 61 .button:hover, .button:focus {
71 color: #fff; } 62 color: #fff; }
  63 + .button-inline {
  64 + display: inline-block;
  65 + padding-bottom: 10px !important;
  66 + padding-top: 10px !important; }
72 .button-send span { 67 .button-send span {
73 padding-left: 30px; 68 padding-left: 30px;
74 background-image: url(images/airplane.png); 69 background-image: url(images/airplane.png);
@@ -122,11 +117,12 @@ header { @@ -122,11 +117,12 @@ header {
122 position: relative; 117 position: relative;
123 z-index: 1; } 118 z-index: 1; }
124 .social.top { 119 .social.top {
125 - margin-top: 45px; 120 + margin-top: 40px;
126 float: right; } 121 float: right; }
127 .social.right { 122 .social.right {
128 padding-top: 10px; } 123 padding-top: 10px; }
129 .social.right span { 124 .social.right span {
  125 + color: #000;
130 display: inline-block; 126 display: inline-block;
131 font-size: 12px; 127 font-size: 12px;
132 font-weight: 300; 128 font-weight: 300;
@@ -146,6 +142,13 @@ header { @@ -146,6 +142,13 @@ header {
146 display: inline-block; 142 display: inline-block;
147 padding: 0 2px !important; } 143 padding: 0 2px !important; }
148 144
  145 +#content p {
  146 + font-family: asap, sans;
  147 + margin-bottom: 60px;
  148 + margin-left: 20px;
  149 + margin-right: 20px;
  150 + margin-top: 20px; }
  151 +
149 .tab { 152 .tab {
150 margin-top: 20px; } 153 margin-top: 20px; }
151 .tab ul { 154 .tab ul {
@@ -194,8 +197,20 @@ header { @@ -194,8 +197,20 @@ header {
194 font-weight: 700; 197 font-weight: 700;
195 padding-bottom: 5px; 198 padding-bottom: 5px;
196 padding-top: 110px; } 199 padding-top: 110px; }
197 - .themes a:hover { 200 + .themes a:hover, .themes a:focus {
198 text-decoration: none; } 201 text-decoration: none; }
  202 + .themes .arrow-box {
  203 + position: relative;
  204 + top: 20px; }
  205 + .themes .arrow-box:after {
  206 + bottom: 100%;
  207 + left: 50%;
  208 + border: solid transparent;
  209 + content: "";
  210 + position: absolute;
  211 + border-bottom-color: #000;
  212 + border-width: 8px;
  213 + margin-left: -8px; }
199 214
200 #proposal-categories, #proposal-group { 215 #proposal-categories, #proposal-group {
201 border-bottom: 1px solid #000; 216 border-bottom: 1px solid #000;
@@ -212,13 +227,11 @@ header { @@ -212,13 +227,11 @@ header {
212 .proposal-container { 227 .proposal-container {
213 background-color: #ccc; 228 background-color: #ccc;
214 border-radius: 6px; 229 border-radius: 6px;
215 - padding-bottom: 10px;  
216 - padding-left: 20px;  
217 - padding-right: 20px;  
218 - padding-top: 20px; } 230 + margin-bottom: 20px;
  231 + padding: 20px 20px 0; }
219 .proposal-container .name { 232 .proposal-container .name {
220 - color: #000;  
221 - border-bottom: 1px solid #000; 233 + color: #fff;
  234 + border-bottom: 2px solid #fff;
222 font-family: asap, sans; 235 font-family: asap, sans;
223 font-size: 24px; 236 font-size: 24px;
224 font-weight: 700; 237 font-weight: 700;
@@ -262,8 +275,13 @@ header { @@ -262,8 +275,13 @@ header {
262 background-color: #fff; } 275 background-color: #fff; }
263 .box-propostas p { 276 .box-propostas p {
264 border-bottom: 0; 277 border-bottom: 0;
  278 + font-size: 14px;
265 padding-bottom: inherit; } 279 padding-bottom: inherit; }
  280 + .box-apoie p {
  281 + border-bottom: 0;
  282 + padding-bottom: inherit; }
266 .box-header { 283 .box-header {
  284 + color: #335277;
267 font-family: asap, sans; 285 font-family: asap, sans;
268 font-size: 24px; 286 font-size: 24px;
269 font-weight: 700; } 287 font-weight: 700; }
@@ -273,7 +291,6 @@ header { @@ -273,7 +291,6 @@ header {
273 list-style: none; 291 list-style: none;
274 padding-left: 0; } 292 padding-left: 0; }
275 .box-category li { 293 .box-category li {
276 - background-color: #000;  
277 color: #fff; 294 color: #fff;
278 display: inline-block; 295 display: inline-block;
279 padding-bottom: 5px; 296 padding-bottom: 5px;
@@ -284,7 +301,7 @@ header { @@ -284,7 +301,7 @@ header {
284 font-size: 38px; 301 font-size: 38px;
285 font-weight: 400; 302 font-weight: 400;
286 margin-bottom: 20px; } 303 margin-bottom: 20px; }
287 - .box-subtitle, .box-propostas p { 304 + .box-subtitle, .box-apoie p {
288 font-size: 24px; 305 font-size: 24px;
289 font-weight: 700; 306 font-weight: 700;
290 line-height: 1.2; 307 line-height: 1.2;
@@ -357,7 +374,11 @@ header { @@ -357,7 +374,11 @@ header {
357 margin-bottom: 20px; 374 margin-bottom: 20px;
358 margin-top: 20px; } 375 margin-top: 20px; }
359 .proposal-header .show_body a { 376 .proposal-header .show_body a {
360 - background-color: #000; 377 + background-color: #666666;
  378 + border-bottom: 5px solid #000;
  379 + border-left: 0;
  380 + border-right: 0;
  381 + border-top: 0;
361 border-radius: 6px; 382 border-radius: 6px;
362 color: #fff; 383 color: #fff;
363 font-size: 38px; 384 font-size: 38px;
@@ -369,7 +390,7 @@ header { @@ -369,7 +390,7 @@ header {
369 text-align: center; 390 text-align: center;
370 transition: all 400ms; } 391 transition: all 400ms; }
371 .proposal-header .show_body a:hover { 392 .proposal-header .show_body a:hover {
372 - background-color: #333333; 393 + background-color: black;
373 text-decoration: none; } 394 text-decoration: none; }
374 .proposal-header img { 395 .proposal-header img {
375 width: 100%; } 396 width: 100%; }
@@ -415,18 +436,22 @@ header { @@ -415,18 +436,22 @@ header {
415 float: left; } 436 float: left; }
416 .results-content .vote-result, .results-content .updated-at { 437 .results-content .vote-result, .results-content .updated-at {
417 float: right; } 438 float: right; }
  439 +.results-content .updated-at {
  440 + margin-top: 20px; }
418 .results-content table { 441 .results-content table {
419 clear: both; 442 clear: both;
420 font-weight: 300; } 443 font-weight: 300; }
421 .results-content table tr:nth-child(odd) { 444 .results-content table tr:nth-child(odd) {
422 background: #e5e5e5; } 445 background: #e5e5e5; }
423 .results-content table td { 446 .results-content table td {
424 - padding: 0 5px; } 447 + padding: 5px; }
425 .results-content table .header { 448 .results-content table .header {
426 font-weight: 700; 449 font-weight: 700;
427 text-align: center; } 450 text-align: center; }
428 .results-content table .abstract-text { 451 .results-content table .abstract-text {
429 width: 80%; } 452 width: 80%; }
  453 + .results-content table .abstract-text p {
  454 + margin: inherit; }
430 .results-content table .value { 455 .results-content table .value {
431 text-align: center; 456 text-align: center;
432 width: 10%; } 457 width: 10%; }
@@ -458,7 +483,7 @@ header { @@ -458,7 +483,7 @@ header {
458 display: inline-block; 483 display: inline-block;
459 line-height: 24px; } 484 line-height: 24px; }
460 .paging .current { 485 .paging .current {
461 - background-color: #333333; } 486 + background-color: #262626; }
462 .paging .next { 487 .paging .next {
463 border-radius: 0 6px 6px 0; } 488 border-radius: 0 6px 6px 0; }
464 .paging .prev { 489 .paging .prev {
@@ -496,7 +521,6 @@ header { @@ -496,7 +521,6 @@ header {
496 top: 43%; 521 top: 43%;
497 width: 20px; } 522 width: 20px; }
498 .slick-def:before, .slick-prev:before, .slick-next:before { 523 .slick-def:before, .slick-prev:before, .slick-next:before {
499 - color: #000;  
500 font-family: "FontAwesome"; 524 font-family: "FontAwesome";
501 font-size: 20px; } 525 font-size: 20px; }
502 .slick-prev { 526 .slick-prev {
@@ -517,9 +541,232 @@ header { @@ -517,9 +541,232 @@ header {
517 padding: 20px; } 541 padding: 20px; }
518 .list-unstyled li:first-child { 542 .list-unstyled li:first-child {
519 border-top: 0; } 543 border-top: 0; }
  544 +.list-styled {
  545 + margin-left: 20px;
  546 + padding-left: 0; }
520 547
521 .hide { 548 .hide {
522 display: none; } 549 display: none; }
523 550
524 h3.titulo-destaque { 551 h3.titulo-destaque {
525 font-size: 38px; } 552 font-size: 38px; }
  553 +
  554 +section.saude .description {
  555 + margin-top: 20px; }
  556 + section.saude .description:before {
  557 + color: #fff;
  558 + content: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é universal, integral e de responsabilidade do Governo Federal, estados e municípios. Atende a todos os brasileiros.";
  559 + font-family: asap, sans;
  560 + padding-top: 20px; }
  561 +
  562 +section.seguranca-publica .description {
  563 + margin-top: 20px; }
  564 + section.seguranca-publica .description:before {
  565 + color: #fff;
  566 + content: "A Segurança Pública é um direito fundamental, dever do Estado e responsabilidade de todos. A proteção da vida, a disseminação da cultura de paz e a integração dos órgãos e instituições são os maiores compromissos desta política pública.";
  567 + font-family: asap, sans;
  568 + padding-top: 20px; }
  569 +
  570 +section.educacao .description {
  571 + margin-top: 20px; }
  572 + section.educacao .description:before {
  573 + color: #fff;
  574 + content: "O Brasil avançou na qualidade e ampliou o acesso à educação em todos os níveis ‐ da creche à pós‐graduação. Com o Plano Nacional de Educação (PNE) para os próximos 10 anos, o Brasil consolida um caminho de oportunidades, por meio da educação, para todos os brasileiros.";
  575 + font-family: asap, sans;
  576 + padding-top: 20px; }
  577 +
  578 +section.reducao-da-pobreza .description {
  579 + margin-top: 20px; }
  580 + section.reducao-da-pobreza .description:before {
  581 + color: #fff;
  582 + content: "Com o esforço do Brasil para reduzir a pobreza e a desigualdade, na última década, 36 milhões de pessoas superaram a miséria e o país saiu do Mapa da Fome das Nações Unidas.";
  583 + font-family: asap, sans;
  584 + padding-top: 20px; }
  585 +
  586 +.saude {
  587 + color: #00a9bd; }
  588 + .saude .button, .saude .show_body a {
  589 + background-color: #00a9bd;
  590 + border-color: #006571;
  591 + transition: all 400ms; }
  592 + .saude .button:hover, .saude .show_body a:hover {
  593 + background-color: #006571;
  594 + text-decoration: none; }
  595 + .saude .select {
  596 + background-color: #00a9bd; }
  597 + .saude .proposal-header .title, .saude .proposal-header p, .saude .proposal-header p {
  598 + background-color: #006571; }
  599 + .saude .box-propostas {
  600 + border-color: #00a9bd; }
  601 + .saude .box-title {
  602 + color: #00a9bd; }
  603 + .saude .box-category li {
  604 + background-color: #00a9bd; }
  605 + .saude .slick-prev, .saude .slick-next {
  606 + color: #00a9bd; }
  607 + .saude .slick-slider .date, .saude .slick-slider .time {
  608 + color: #00a9bd; }
  609 +
  610 +section.saude {
  611 + background-color: #00a9bd; }
  612 +
  613 +.category-saude {
  614 + background-color: #00a9bd;
  615 + background-image: url(images/icons/saude.png);
  616 + background-position: 5px 50%;
  617 + background-repeat: no-repeat;
  618 + background-size: 22px;
  619 + border-color: #006571;
  620 + transition: all 400ms; }
  621 + .category-saude:hover {
  622 + background-color: #006571;
  623 + text-decoration: none; }
  624 +
  625 +#proposal-category-saude a {
  626 + background-color: #00a9bd;
  627 + background-image: url(images/icons/saude.png);
  628 + background-position: 50% 10px;
  629 + background-repeat: no-repeat; }
  630 +#proposal-category-saude .arrow-box:after {
  631 + border-bottom-color: #00a9bd; }
  632 +
  633 +.seguranca-publica {
  634 + color: #e34748; }
  635 + .seguranca-publica .button, .seguranca-publica .show_body a {
  636 + background-color: #e34748;
  637 + border-color: #c01d1e;
  638 + transition: all 400ms; }
  639 + .seguranca-publica .button:hover, .seguranca-publica .show_body a:hover {
  640 + background-color: #c01d1e;
  641 + text-decoration: none; }
  642 + .seguranca-publica .select {
  643 + background-color: #e34748; }
  644 + .seguranca-publica .proposal-header .title, .seguranca-publica .proposal-header p, .seguranca-publica .proposal-header p {
  645 + background-color: #c01d1e; }
  646 + .seguranca-publica .box-propostas {
  647 + border-color: #e34748; }
  648 + .seguranca-publica .box-title {
  649 + color: #e34748; }
  650 + .seguranca-publica .box-category li {
  651 + background-color: #e34748; }
  652 + .seguranca-publica .slick-prev, .seguranca-publica .slick-next {
  653 + color: #e34748; }
  654 + .seguranca-publica .slick-slider .date, .seguranca-publica .slick-slider .time {
  655 + color: #e34748; }
  656 +
  657 +section.seguranca-publica {
  658 + background-color: #e34748; }
  659 +
  660 +.category-seguranca-publica {
  661 + background-color: #e34748;
  662 + background-image: url(images/icons/seguranca-publica.png);
  663 + background-position: 5px 50%;
  664 + background-repeat: no-repeat;
  665 + background-size: 22px;
  666 + border-color: #c01d1e;
  667 + transition: all 400ms; }
  668 + .category-seguranca-publica:hover {
  669 + background-color: #c01d1e;
  670 + text-decoration: none; }
  671 +
  672 +#proposal-category-seguranca-publica a {
  673 + background-color: #e34748;
  674 + background-image: url(images/icons/seguranca-publica.png);
  675 + background-position: 50% 10px;
  676 + background-repeat: no-repeat; }
  677 +#proposal-category-seguranca-publica .arrow-box:after {
  678 + border-bottom-color: #e34748; }
  679 +
  680 +.educacao {
  681 + color: #ffb400; }
  682 + .educacao .button, .educacao .show_body a {
  683 + background-color: #ffb400;
  684 + border-color: #b37e00;
  685 + transition: all 400ms; }
  686 + .educacao .button:hover, .educacao .show_body a:hover {
  687 + background-color: #b37e00;
  688 + text-decoration: none; }
  689 + .educacao .select {
  690 + background-color: #ffb400; }
  691 + .educacao .proposal-header .title, .educacao .proposal-header p, .educacao .proposal-header p {
  692 + background-color: #b37e00; }
  693 + .educacao .box-propostas {
  694 + border-color: #ffb400; }
  695 + .educacao .box-title {
  696 + color: #ffb400; }
  697 + .educacao .box-category li {
  698 + background-color: #ffb400; }
  699 + .educacao .slick-prev, .educacao .slick-next {
  700 + color: #ffb400; }
  701 + .educacao .slick-slider .date, .educacao .slick-slider .time {
  702 + color: #ffb400; }
  703 +
  704 +section.educacao {
  705 + background-color: #ffb400; }
  706 +
  707 +.category-educacao {
  708 + background-color: #ffb400;
  709 + background-image: url(images/icons/educacao.png);
  710 + background-position: 5px 50%;
  711 + background-repeat: no-repeat;
  712 + background-size: 22px;
  713 + border-color: #b37e00;
  714 + transition: all 400ms; }
  715 + .category-educacao:hover {
  716 + background-color: #b37e00;
  717 + text-decoration: none; }
  718 +
  719 +#proposal-category-educacao a {
  720 + background-color: #ffb400;
  721 + background-image: url(images/icons/educacao.png);
  722 + background-position: 50% 10px;
  723 + background-repeat: no-repeat; }
  724 +#proposal-category-educacao .arrow-box:after {
  725 + border-bottom-color: #ffb400; }
  726 +
  727 +.reducao-da-pobreza {
  728 + color: #51d0b3; }
  729 + .reducao-da-pobreza .button, .reducao-da-pobreza .show_body a {
  730 + background-color: #51d0b3;
  731 + border-color: #2da78b;
  732 + transition: all 400ms; }
  733 + .reducao-da-pobreza .button:hover, .reducao-da-pobreza .show_body a:hover {
  734 + background-color: #2da78b;
  735 + text-decoration: none; }
  736 + .reducao-da-pobreza .select {
  737 + background-color: #51d0b3; }
  738 + .reducao-da-pobreza .proposal-header .title, .reducao-da-pobreza .proposal-header p, .reducao-da-pobreza .proposal-header p {
  739 + background-color: #2da78b; }
  740 + .reducao-da-pobreza .box-propostas {
  741 + border-color: #51d0b3; }
  742 + .reducao-da-pobreza .box-title {
  743 + color: #51d0b3; }
  744 + .reducao-da-pobreza .box-category li {
  745 + background-color: #51d0b3; }
  746 + .reducao-da-pobreza .slick-prev, .reducao-da-pobreza .slick-next {
  747 + color: #51d0b3; }
  748 + .reducao-da-pobreza .slick-slider .date, .reducao-da-pobreza .slick-slider .time {
  749 + color: #51d0b3; }
  750 +
  751 +section.reducao-da-pobreza {
  752 + background-color: #51d0b3; }
  753 +
  754 +.category-reducao-da-pobreza {
  755 + background-color: #51d0b3;
  756 + background-image: url(images/icons/reducao-da-pobreza.png);
  757 + background-position: 5px 50%;
  758 + background-repeat: no-repeat;
  759 + background-size: 22px;
  760 + border-color: #2da78b;
  761 + transition: all 400ms; }
  762 + .category-reducao-da-pobreza:hover {
  763 + background-color: #2da78b;
  764 + text-decoration: none; }
  765 +
  766 +#proposal-category-reducao-da-pobreza a {
  767 + background-color: #51d0b3;
  768 + background-image: url(images/icons/reducao-da-pobreza.png);
  769 + background-position: 50% 10px;
  770 + background-repeat: no-repeat; }
  771 +#proposal-category-reducao-da-pobreza .arrow-box:after {
  772 + border-bottom-color: #51d0b3; }
sass/novo.sass
  Diff comments   View file @6dbe70d
1 // ------------------------------------ 1 // ------------------------------------
2 -// variaveis 2 +// Organização da folha de estilo:
  3 +//
  4 +// 1 - Variaveis
  5 +// 1.1 - espacamento
  6 +// 1.2 - arredondamento
  7 +// 1.3 - tamanhos de fontes
  8 +// 1.4 - dicionarios
  9 +// 1.5 - cores
  10 +// 2 - Mixins
  11 +// 2.1 - hover
  12 +// 3 - Base
  13 +// 4 - Grid
  14 +// 5 - Elementos reusaveis
  15 +// 5.1 - botao padrao
  16 +// 5.2 - botao voltar
  17 +// 5.3 - icones de compartilhamento
  18 +// 6 - Blocos de elementos
  19 +// 6.1 - compartilhar
  20 +// 6.2 - texto do Dialoga Brasil
  21 +// 6.3 - tabs de temas e programas
  22 +// 6.4 - blocos dos temas
  23 +// 6.5 - listagem dos programas
  24 +// 6.6 - blocos dos programas
  25 +// 6.7 - header do programa e select box
  26 +// 6.8 - imagem destaque do programa, titulo, descricao e botao de acesso
  27 +// 6.9 - login form
  28 +// 6.10 - votacao
  29 +// 6.11 - lista de resultados
  30 +// 6.12 - paginador
  31 +// 6.13 - calendario dos ministros
  32 +// 6.14 - listas
  33 +// 7 - Modificadores
  34 +// 8 - Cores do Temas
3 // ------------------------------------ 35 // ------------------------------------
4 36
5 -// espacamento 37 +
  38 +// ------------------------------------
  39 +// 1 - Variaveis
  40 +// ------------------------------------
  41 +
  42 +// 1.1 - espacamento
6 $gutter: 20px 43 $gutter: 20px
7 44
8 -// arredondamento 45 +// 1.2 - arredondamento
9 $radius: 6px 46 $radius: 6px
10 47
11 -// tamanhos de fontes 48 +// 1.3 - tamanhos de fontes
12 $font-size-base: 16px 49 $font-size-base: 16px
13 $font-size-big: $font-size-base + 2 50 $font-size-big: $font-size-base + 2
14 $font-size-small: $font-size-base - 2 51 $font-size-small: $font-size-base - 2
@@ -19,45 +56,44 @@ $font-size-h4: 34px @@ -19,45 +56,44 @@ $font-size-h4: 34px
19 $theme-size-header: 24px 56 $theme-size-header: 24px
20 $proposal-title: 32px 57 $proposal-title: 32px
21 58
  59 +// 1.4 - dicionarios
  60 +$categories: (saude: #00a9bd, seguranca-publica: #e34748, educacao: #ffb400, reducao-da-pobreza: #51d0b3)
  61 +$categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é universal, integral e de responsabilidade do Governo Federal, estados e municípios. Atende a todos os brasileiros.", seguranca-publica: "A Segurança Pública é um direito fundamental, dever do Estado e responsabilidade de todos. A proteção da vida, a disseminação da cultura de paz e a integração dos órgãos e instituições são os maiores compromissos desta política pública.", educacao: "O Brasil avançou na qualidade e ampliou o acesso à educação em todos os níveis ‐ da creche à pós‐graduação. Com o Plano Nacional de Educação (PNE) para os próximos 10 anos, o Brasil consolida um caminho de oportunidades, por meio da educação, para todos os brasileiros.", reducao-da-pobreza: "Com o esforço do Brasil para reduzir a pobreza e a desigualdade, na última década, 36 milhões de pessoas superaram a miséria e o país saiu do Mapa da Fome das Nações Unidas.")
22 62
23 -// dicionarios  
24 -$categories: (saude: #00a9bd, seguranca: #e34748, educacao: #ffb400, reducao-da-pobreza: #51d0b3)  
25 -$categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é universal, integral e de responsabilidade do Governo Federal, estados e municípios. Atende a todos os brasileiros.", seguranca: "A Segurança Pública é um direito fundamental, dever do Estado e responsabilidade de todos. A proteção da vida, a disseminação da cultura de paz e a integração dos órgãos e instituições são os maiores compromissos desta política pública.", educacao: "O Brasil avançou na qualidade e ampliou o acesso à educação em todos os níveis ‐ da creche à pós‐graduação. Com o Plano Nacional de Educação (PNE) para os próximos 10 anos, o Brasil consolida um caminho de oportunidades, por meio da educação, para todos os brasileiros.", reducao-da-pobreza: "Com o esforço do Brasil para reduzir a pobreza e a desigualdade, na última década, 36 milhões de pessoas superaram a miséria e o país saiu do Mapa da Fome das Nações Unidas.") 63 +// 1.5 - cores
  64 +$header-color: #03316f
  65 +$link-color: #335277
26 66
27 67
28 // ------------------------------------ 68 // ------------------------------------
29 -// mixins 69 +// 2 - Mixins
30 // ------------------------------------ 70 // ------------------------------------
31 71
32 -// hover 72 +// 2.1 - hover
33 =hover($color, $amount) 73 =hover($color, $amount)
34 transition: all 400ms 74 transition: all 400ms
35 &:hover 75 &:hover
36 - background-color: lighten($color, $amount) 76 + background-color: darken($color, $amount)
37 text-decoration: none 77 text-decoration: none
38 78
39 -  
40 // ------------------------------------ 79 // ------------------------------------
41 -// base 80 +// 3 - Base
42 // ------------------------------------ 81 // ------------------------------------
43 82
44 body 83 body
45 font-family: 'Open Sans', sans-serif 84 font-family: 'Open Sans', sans-serif
46 font-size: $font-size-base 85 font-size: $font-size-base
47 - font-weight: 300 86 + font-weight: 400
48 h1 87 h1
49 - border-bottom: 1px solid #000  
50 - bottom: 0 88 + border-bottom: 1px solid #d6dcd7
  89 + color: $header-color
51 font-family: asap, sans 90 font-family: asap, sans
52 font-size: $font-size-h1 91 font-size: $font-size-h1
53 font-weight: 500 92 font-weight: 500
54 - margin: 0  
55 - padding: $gutter 0  
56 - position: absolute 93 + padding-bottom: $gutter
57 text-transform: uppercase 94 text-transform: uppercase
58 - width: 100%  
59 h2 95 h2
60 - border-bottom: 1px solid 96 + border-bottom: 1px solid #eeeff1
61 font-size: $font-size-h2 97 font-size: $font-size-h2
62 font-weight: 300 98 font-weight: 300
63 margin-bottom: $gutter * 2 99 margin-bottom: $gutter * 2
@@ -66,6 +102,7 @@ h2 @@ -66,6 +102,7 @@ h2
66 small 102 small
67 display: block 103 display: block
68 font-size: 16px 104 font-size: 16px
  105 + padding-top: $gutter * 0.25
69 text-transform: none 106 text-transform: none
70 h3 107 h3
71 font-size: $font-size-h3 108 font-size: $font-size-h3
@@ -74,13 +111,11 @@ h3 @@ -74,13 +111,11 @@ h3
74 h4 111 h4
75 font-size: $font-size-h4 112 font-size: $font-size-h4
76 font-weight: 500 113 font-weight: 500
77 -header  
78 - position: relative  
79 - height: 100px  
80 - 114 +p,ul,select
  115 + color: #000
81 116
82 // ------------------------------------ 117 // ------------------------------------
83 -// grid 118 +// 4 - Grid
84 // ------------------------------------ 119 // ------------------------------------
85 120
86 .container, .row 121 .container, .row
@@ -88,34 +123,30 @@ header @@ -88,34 +123,30 @@ header
88 123
89 124
90 // ------------------------------------ 125 // ------------------------------------
91 -// elementos 126 +// 5 - Elementos reusaveis
92 // ------------------------------------ 127 // ------------------------------------
93 128
94 -// conteudo  
95 -#content  
96 - p  
97 - font-family: asap, sans  
98 - margin-bottom: $gutter * 3  
99 - margin-left: $gutter  
100 - margin-right: $gutter  
101 - margin-top: $gutter  
102 -  
103 -// botao padrao 129 +// 5.1 - botao padrao
104 .button 130 .button
105 - background-color: #000  
106 - border: 0 131 + border-bottom: 3px solid #000
  132 + border-left: 0
  133 + border-right: 0
  134 + border-top: 0
107 border-radius: $radius 135 border-radius: $radius
108 color: #fff 136 color: #fff
109 cursor: pointer 137 cursor: pointer
110 display: block 138 display: block
111 - font-size: $font-size-small  
112 - font-weight: 400 139 + font-size: $font-size-base
  140 + font-weight: 700
113 padding: $gutter 0 141 padding: $gutter 0
114 text-align: center 142 text-align: center
115 - text-transform: uppercase  
116 - +hover(#000, 20%) 143 + +hover(#000, 15%)
117 &:hover, &:focus 144 &:hover, &:focus
118 color: #fff 145 color: #fff
  146 + &-inline
  147 + display: inline-block
  148 + padding-bottom: $gutter * 0.5 !important
  149 + padding-top: $gutter * 0.5 !important
119 &-send 150 &-send
120 span 151 span
121 padding-left: $gutter * 1.5 152 padding-left: $gutter * 1.5
@@ -126,7 +157,7 @@ header @@ -126,7 +157,7 @@ header
126 .fa 157 .fa
127 margin-right: $gutter * 0.5 158 margin-right: $gutter * 0.5
128 159
129 -// botao voltar 160 +// 5.2 - botao voltar
130 .btn 161 .btn
131 background-color: transparent 162 background-color: transparent
132 border: 0 163 border: 0
@@ -138,7 +169,7 @@ header @@ -138,7 +169,7 @@ header
138 padding-top: 0 169 padding-top: 0
139 vertical-align: middle 170 vertical-align: middle
140 171
141 -// icones 172 +// 5.3 - icones de compartilhamento
142 .icon 173 .icon
143 background-color: transparent !important 174 background-color: transparent !important
144 background-repeat: no-repeat 175 background-repeat: no-repeat
@@ -171,19 +202,20 @@ header @@ -171,19 +202,20 @@ header
171 202
172 203
173 // ------------------------------------ 204 // ------------------------------------
174 -// blocos 205 +// 6 - Blocos de elementos
175 // ------------------------------------ 206 // ------------------------------------
176 207
177 -// compartilhar 208 +// 6.1 - compartilhar
178 .social 209 .social
179 position: relative 210 position: relative
180 z-index: 1 211 z-index: 1
181 &.top 212 &.top
182 - margin-top: 45px 213 + margin-top: $gutter * 2
183 float: right 214 float: right
184 &.right 215 &.right
185 padding-top: 10px 216 padding-top: 10px
186 span 217 span
  218 + color: #000
187 display: inline-block 219 display: inline-block
188 font-size: 12px 220 font-size: 12px
189 font-weight: 300 221 font-weight: 300
@@ -203,7 +235,16 @@ header @@ -203,7 +235,16 @@ header
203 display: inline-block 235 display: inline-block
204 padding: 0 2px !important 236 padding: 0 2px !important
205 237
206 -// tabs de temas e programas 238 +// 6.2 - texto do Dialoga Brasil
  239 +#content
  240 + p
  241 + font-family: asap, sans
  242 + margin-bottom: $gutter * 3
  243 + margin-left: $gutter
  244 + margin-right: $gutter
  245 + margin-top: $gutter
  246 +
  247 +// 6.3 - tabs de temas e programas
207 .tab 248 .tab
208 margin-top: $gutter 249 margin-top: $gutter
209 ul 250 ul
@@ -234,7 +275,7 @@ header @@ -234,7 +275,7 @@ header
234 border-right: 1px solid #000 275 border-right: 1px solid #000
235 border-top: 1px solid #000 276 border-top: 1px solid #000
236 277
237 -// blocos dos temas 278 +// 6.4 - blocos dos temas
238 .themes 279 .themes
239 font-size: 0 280 font-size: 0
240 text-align: center 281 text-align: center
@@ -253,10 +294,22 @@ header @@ -253,10 +294,22 @@ header
253 font-weight: 700 294 font-weight: 700
254 padding-bottom: $gutter * 0.25 295 padding-bottom: $gutter * 0.25
255 padding-top: $gutter * 5.5 296 padding-top: $gutter * 5.5
256 - &:hover 297 + &:hover,&:focus
257 text-decoration: none 298 text-decoration: none
258 -  
259 -// listagem 299 + .arrow-box
  300 + position: relative
  301 + top: $gutter
  302 + &:after
  303 + bottom: 100%
  304 + left: 50%
  305 + border: solid transparent
  306 + content: ""
  307 + position: absolute
  308 + border-bottom-color: #000
  309 + border-width: 8px
  310 + margin-left: -8px
  311 +
  312 +// 6.5 - listagem dos programas
260 #proposal 313 #proposal
261 &-categories 314 &-categories
262 border-bottom: 1px solid #000 315 border-bottom: 1px solid #000
@@ -271,19 +324,15 @@ header @@ -271,19 +324,15 @@ header
271 padding-left: 0 324 padding-left: 0
272 &-group 325 &-group
273 @extend #proposal-categories 326 @extend #proposal-categories
274 -  
275 -// programas por temas  
276 .proposal 327 .proposal
277 &-container 328 &-container
278 background-color: #ccc 329 background-color: #ccc
279 border-radius: $radius 330 border-radius: $radius
280 - padding-bottom: $gutter * 0.5  
281 - padding-left: $gutter  
282 - padding-right: $gutter  
283 - padding-top: $gutter 331 + margin-bottom: $gutter
  332 + padding: $gutter $gutter 0
284 .name 333 .name
285 - color: #000  
286 - border-bottom: 1px solid #000 334 + color: #fff
  335 + border-bottom: 2px solid #fff
287 font-family: asap, sans 336 font-family: asap, sans
288 font-size: $theme-size-header 337 font-size: $theme-size-header
289 font-weight: 700 338 font-weight: 700
@@ -296,7 +345,7 @@ header @@ -296,7 +345,7 @@ header
296 list-style: none 345 list-style: none
297 padding-left: 0 346 padding-left: 0
298 347
299 -// box dos programas 348 +// 6.6 - blocos dos programas
300 .box 349 .box
301 background-color: #fff 350 background-color: #fff
302 border: 1px solid gray 351 border: 1px solid gray
@@ -328,10 +377,16 @@ header @@ -328,10 +377,16 @@ header
328 &:hover 377 &:hover
329 background-color: #fff 378 background-color: #fff
330 p 379 p
  380 + border-bottom: 0
  381 + font-size: $font-size-small
  382 + padding-bottom: inherit
  383 + &-apoie
  384 + p
331 @extend .box-subtitle 385 @extend .box-subtitle
332 border-bottom: 0 386 border-bottom: 0
333 padding-bottom: inherit 387 padding-bottom: inherit
334 &-header 388 &-header
  389 + color: $link-color
335 font-family: asap, sans 390 font-family: asap, sans
336 font-size: $theme-size-header 391 font-size: $theme-size-header
337 font-weight: 700 392 font-weight: 700
@@ -341,7 +396,6 @@ header @@ -341,7 +396,6 @@ header
341 list-style: none 396 list-style: none
342 padding-left: 0 397 padding-left: 0
343 li 398 li
344 - background-color: #000  
345 color: #fff 399 color: #fff
346 display: inline-block 400 display: inline-block
347 padding-bottom: $gutter * 0.25 401 padding-bottom: $gutter * 0.25
@@ -380,7 +434,7 @@ header @@ -380,7 +434,7 @@ header
380 &-center 434 &-center
381 text-align: center 435 text-align: center
382 436
383 -// header do programa 437 +// 6.7 - header do programa e select box
384 .select 438 .select
385 background-color: #000 439 background-color: #000
386 margin-bottom: $gutter * 0.5 440 margin-bottom: $gutter * 0.5
@@ -405,7 +459,7 @@ header @@ -405,7 +459,7 @@ header
405 width: 60% 459 width: 60%
406 vertical-align: middle 460 vertical-align: middle
407 461
408 -// imagem destaque do programa, titulo, descricao e botao de acesso 462 +// 6.8 - imagem destaque do programa, titulo, descricao e botao de acesso
409 .proposal-header 463 .proposal-header
410 position: relative 464 position: relative
411 .title 465 .title
@@ -429,7 +483,11 @@ header @@ -429,7 +483,11 @@ header
429 margin-bottom: $gutter 483 margin-bottom: $gutter
430 margin-top: $gutter 484 margin-top: $gutter
431 a 485 a
432 - background-color: #000 486 + background-color: lighten(#000, 40%)
  487 + border-bottom: 5px solid #000
  488 + border-left: 0
  489 + border-right: 0
  490 + border-top: 0
433 border-radius: $radius 491 border-radius: $radius
434 color: #fff 492 color: #fff
435 font-size: $font-size-h2 493 font-size: $font-size-h2
@@ -439,7 +497,7 @@ header @@ -439,7 +497,7 @@ header
439 padding-right: 0 497 padding-right: 0
440 padding-top: $gutter * 0.5 498 padding-top: $gutter * 0.5
441 text-align: center 499 text-align: center
442 - +hover(#000, 20%) 500 + +hover(#000, 15%)
443 img 501 img
444 width: 100% 502 width: 100%
445 p 503 p
@@ -450,7 +508,7 @@ header @@ -450,7 +508,7 @@ header
450 padding-top: $gutter * 0.25 508 padding-top: $gutter * 0.25
451 text-transform: none 509 text-transform: none
452 510
453 -// login form 511 +// 6.9 - login form
454 .login 512 .login
455 text-align: left 513 text-align: left
456 input 514 input
@@ -473,7 +531,7 @@ header @@ -473,7 +531,7 @@ header
473 i 531 i
474 font-style: normal 532 font-style: normal
475 533
476 -// votacao 534 +// 6.10 - votacao
477 .vote-actions 535 .vote-actions
478 .like 536 .like
479 background: url(images/like.png) no-repeat 537 background: url(images/like.png) no-repeat
@@ -484,24 +542,29 @@ header @@ -484,24 +542,29 @@ header
484 .dislike 542 .dislike
485 background-image: url(images/dislike.png) 543 background-image: url(images/dislike.png)
486 544
487 -// lista de resultados 545 +// 6.11 - lista de resultados
488 .results-content 546 .results-content
489 .total 547 .total
490 float: left 548 float: left
491 - .vote-result, .updated-at 549 + .vote-result
492 float: right 550 float: right
  551 + .updated-at
  552 + @extend .vote-result
  553 + margin-top: $gutter
493 table 554 table
494 clear: both 555 clear: both
495 font-weight: 300 556 font-weight: 300
496 tr:nth-child(odd) 557 tr:nth-child(odd)
497 background: #e5e5e5 558 background: #e5e5e5
498 td 559 td
499 - padding: 0 5px 560 + padding: $gutter * 0.25
500 .header 561 .header
501 font-weight: 700 562 font-weight: 700
502 text-align: center 563 text-align: center
503 .abstract-text 564 .abstract-text
504 width: 80% 565 width: 80%
  566 + p
  567 + margin: inherit
505 .value 568 .value
506 text-align: center 569 text-align: center
507 width: 10% 570 width: 10%
@@ -514,7 +577,7 @@ header @@ -514,7 +577,7 @@ header
514 text-overflow: ellipsis 577 text-overflow: ellipsis
515 white-space: nowrap 578 white-space: nowrap
516 579
517 -// paginador 580 +// 6.12 - paginador
518 .paging 581 .paging
519 padding: $gutter * 0.25 582 padding: $gutter * 0.25
520 ul 583 ul
@@ -536,13 +599,13 @@ header @@ -536,13 +599,13 @@ header
536 display: inline-block 599 display: inline-block
537 line-height: 24px 600 line-height: 24px
538 .current 601 .current
539 - background-color: lighten(#000, 20%) 602 + background-color: lighten(#000, 15%)
540 .next 603 .next
541 border-radius: 0 $radius $radius 0 604 border-radius: 0 $radius $radius 0
542 .prev 605 .prev
543 border-radius: $radius 0 0 $radius 606 border-radius: $radius 0 0 $radius
544 607
545 -// calendario dos ministros 608 +// 6.13 - calendario dos ministros
546 .slick 609 .slick
547 &-slider 610 &-slider
548 list-style: none 611 list-style: none
@@ -576,7 +639,6 @@ header @@ -576,7 +639,6 @@ header
576 top: 43% 639 top: 43%
577 width: 20px 640 width: 20px
578 &:before 641 &:before
579 - color: #000  
580 font-family: "FontAwesome" 642 font-family: "FontAwesome"
581 font-size: 20px 643 font-size: 20px
582 &-prev 644 &-prev
@@ -592,21 +654,85 @@ header @@ -592,21 +654,85 @@ header
592 &-disabled 654 &-disabled
593 opacity: 0.25 655 opacity: 0.25
594 656
595 -// lista sem bullets  
596 -.list-unstyled  
597 - li  
598 - border-top: 1px solid  
599 - font-size: $font-size-big  
600 - font-weight: 700  
601 - padding: $gutter  
602 - &:first-child  
603 - border-top: 0 657 +// 6.14 - listas
  658 +.list
  659 + &-unstyled
  660 + li
  661 + border-top: 1px solid
  662 + font-size: $font-size-big
  663 + font-weight: 700
  664 + padding: $gutter
  665 + &:first-child
  666 + border-top: 0
  667 + &-styled
  668 + margin-left: $gutter
  669 + padding-left: 0
604 670
605 671
606 // ------------------------------------ 672 // ------------------------------------
607 -// modificadores 673 +// 7 - Modificadores
608 // ------------------------------------ 674 // ------------------------------------
609 .hide 675 .hide
610 display: none 676 display: none
611 h3.titulo-destaque 677 h3.titulo-destaque
612 - font-size: $font-size-h3 + 10  
613 \ No newline at end of file 678 \ No newline at end of file
  679 + font-size: $font-size-h3 + 10
  680 +@each $category, $description in $categories-descriptions
  681 + section.#{$category}
  682 + .description
  683 + margin-top: $gutter
  684 + &:before
  685 + color: #fff
  686 + content: "#{$description}"
  687 + font-family: asap, sans
  688 + padding-top: $gutter
  689 +
  690 +
  691 +// ------------------------------------
  692 +// 8 - Cores do Temas
  693 +// ------------------------------------
  694 +
  695 +@each $category, $color in $categories
  696 + .#{$category}
  697 + color: $color
  698 + .button,.show_body a
  699 + background-color: $color
  700 + border-color: darken($color, 15%)
  701 + +hover($color, 15%)
  702 + .select
  703 + background-color: $color
  704 + .proposal
  705 + &-header
  706 + .title,p
  707 + background-color: darken($color, 15%)
  708 + .box
  709 + &-propostas
  710 + border-color: $color
  711 + &-title
  712 + color: $color
  713 + &-category
  714 + li
  715 + background-color: $color
  716 + .slick
  717 + &-prev,&-next
  718 + color: $color
  719 + &-slider
  720 + .date,.time
  721 + color: $color
  722 + section.#{$category}
  723 + background-color: $color
  724 + .category-#{$category}
  725 + background-color: $color
  726 + background-image: url(images/icons/#{$category}.png)
  727 + background-position: 5px 50%
  728 + background-repeat: no-repeat
  729 + background-size: 22px
  730 + border-color: darken($color, 15%)
  731 + +hover($color, 15%)
  732 + #proposal-category-#{$category}
  733 + a
  734 + background-color: $color
  735 + background-image: url(images/icons/#{$category}.png)
  736 + background-position: 50% 10px
  737 + background-repeat: no-repeat
  738 + .arrow-box:after
  739 + border-bottom-color: $color
614 \ No newline at end of file 740 \ No newline at end of file
sass/style.scss
  Diff comments   View file @6dbe70d
@@ -152,3 +152,57 @@ form { @@ -152,3 +152,57 @@ form {
152 margin-bottom: 20px; 152 margin-bottom: 20px;
153 } 153 }
154 } 154 }
  155 +
  156 +@media (max-width: 480px) {
  157 + header {
  158 + height: auto;
  159 + h1 {
  160 + border-bottom: 0;
  161 + padding-bottom: 15px;
  162 + padding-top: 50px;
  163 + position: relative;
  164 + margin-bottom: 0;
  165 + }
  166 + #display-contrast {
  167 + position: absolute;
  168 + top: 10px;
  169 + }
  170 + }
  171 + .social {
  172 + &.top {
  173 + float: none;
  174 + margin-top: 0;
  175 + margin-bottom: 20px;
  176 + }
  177 + }
  178 + .select {
  179 + .proposal-category {
  180 + &:after {
  181 + content: "";
  182 + display: block;
  183 + clear: both;
  184 + }
  185 + }
  186 + .proposal-selection {
  187 + float: none;
  188 + margin: 4px 0 0 !important;
  189 + width: auto;
  190 + }
  191 + }
  192 + .proposal-header {
  193 + .show_body {
  194 + a {
  195 + display: block !important;
  196 + line-height: 1;
  197 + }
  198 + span {
  199 + display: inline !important;
  200 + }
  201 + }
  202 + .abstract {
  203 + p {
  204 + padding-bottom: 5px !important;
  205 + }
  206 + }
  207 + }
  208 +}
155 \ No newline at end of file 209 \ No newline at end of file