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
index.html
  Diff comments   View file @6dbe70d
... ... @@ -25,7 +25,10 @@
25 25 if(base.match(/file:/) || filename.match(/http:/)){
26 26 base = '';
27 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 33 return base + filename;
31 34 }
... ... @@ -94,11 +97,11 @@
94 97  
95 98 <script id="proposal-template" type="text/x-handlebars-template">
96 99 <header>
97   - <h1><a href="#">{{article.title}}</a></h1>
98 100 <a id="display-contrast" href="#">Alto Contraste</a>
99 101 <div class="social top">
100 102 {{#social_share "Dialoga Brasil" "Aqui suas ideias viram propostas e você ajuda a melhorar as ações do governo" "#"}}{{/social_share}}
101 103 </div>
  104 + <h1><a href="#">{{article.title}}</a></h1>
102 105 </header>
103 106  
104 107 <div id="content">
... ... @@ -129,7 +132,7 @@
129 132 </ul>
130 133 </nav>
131 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 136 <div class="header">
134 137 <div class="name">{{name}}</div>
135 138 <div class="description"></div>
... ... @@ -177,8 +180,10 @@
177 180 <div class="abstract">
178 181 <img src="{{../host}}{{image.url}}" alt="Imagem de apresentação do programa."/>
179 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 187 <div class="show_body row">
183 188 <a class="col-sm-6 col-sm-offset-3" href="#/programas/{{id}}/sobre-o-programa"><span>Conheça o programa</span></a>
184 189 </div>
... ... @@ -202,7 +207,7 @@
202 207 <div class="col-sm-4 col-sm-offset-4">
203 208 <div class="social right">
204 209 <span>COMPARTILHE<br>ESTE PROGRAMA</span>
205   - {{#social_share title abstract '#'}}{{/social_share}}
  210 + {{{social_share title abstract (program_detail_url id)}}}
206 211 </div>
207 212 </div>
208 213 </div>
... ... @@ -235,7 +240,7 @@
235 240 </section>
236 241 </div>
237 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 244 <div class="container-title box-title">Apoie outras propostas</div>
240 245 <div class="alert alert-warning hide" role="alert">
241 246 <i class="fa fa-warning"></i><strong>Proposta não encontrada</strong>
... ... @@ -399,7 +404,7 @@
399 404 <li><a href="{{url}}" class="fb-share icon icon-facebook" data-caption="{{title}}" data-description="{{stripTags description}}">Compartilhar no Facebook</a></li>
400 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 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 408 </ul>
404 409 </script>
405 410  
... ...
js/handlebars-helpers.js
  Diff comments   View file @6dbe70d
... ... @@ -31,7 +31,7 @@ define([&#39;handlebars&#39;], function(Handlebars){
31 31 element = '';
32 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 36 if(element == ''){
37 37 continue;
... ... @@ -107,6 +107,10 @@ define([&#39;handlebars&#39;], function(Handlebars){
107 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 114 Handlebars.registerHelper('encodeURI', function(uri) {
111 115 return encodeURIComponent(uri);
112 116 });
... ...
js/main.js
  Diff comments   View file @6dbe70d
... ... @@ -20,7 +20,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
20 20 var participa = true;
21 21 if(participa){
22 22 var host = 'http://www.participa.br';
23   - var proposal_discussion = '92856'; //participa
  23 + var proposal_discussion = '103358'; //participa
24 24 }else{
25 25 var host = 'http://noosfero.com:3000';
26 26 var proposal_discussion = '632'; //local serpro
... ...
novo.css
  Diff comments   View file @6dbe70d
... ... @@ -2,22 +2,19 @@
2 2 body {
3 3 font-family: "Open Sans", sans-serif;
4 4 font-size: 16px;
5   - font-weight: 300; }
  5 + font-weight: 400; }
6 6  
7 7 h1 {
8   - border-bottom: 1px solid #000;
9   - bottom: 0;
  8 + border-bottom: 1px solid #d6dcd7;
  9 + color: #03316f;
10 10 font-family: asap, sans;
11 11 font-size: 28px;
12 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 16 h2 {
20   - border-bottom: 1px solid;
  17 + border-bottom: 1px solid #eeeff1;
21 18 font-size: 38px;
22 19 font-weight: 300;
23 20 margin-bottom: 40px;
... ... @@ -26,6 +23,7 @@ h2 {
26 23 h2 small {
27 24 display: block;
28 25 font-size: 16px;
  26 + padding-top: 5px;
29 27 text-transform: none; }
30 28  
31 29 h3 {
... ... @@ -37,38 +35,35 @@ h4 {
37 35 font-size: 34px;
38 36 font-weight: 500; }
39 37  
40   -header {
41   - position: relative;
42   - height: 100px; }
  38 +p, ul, select {
  39 + color: #000; }
43 40  
44 41 .container, .row {
45 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 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 49 border-radius: 6px;
58 50 color: #fff;
59 51 cursor: pointer;
60 52 display: block;
61   - font-size: 14px;
62   - font-weight: 400;
  53 + font-size: 16px;
  54 + font-weight: 700;
63 55 padding: 20px 0;
64 56 text-align: center;
65   - text-transform: uppercase;
66 57 transition: all 400ms; }
67 58 .button:hover {
68   - background-color: #333333;
  59 + background-color: black;
69 60 text-decoration: none; }
70 61 .button:hover, .button:focus {
71 62 color: #fff; }
  63 + .button-inline {
  64 + display: inline-block;
  65 + padding-bottom: 10px !important;
  66 + padding-top: 10px !important; }
72 67 .button-send span {
73 68 padding-left: 30px;
74 69 background-image: url(images/airplane.png);
... ... @@ -122,11 +117,12 @@ header {
122 117 position: relative;
123 118 z-index: 1; }
124 119 .social.top {
125   - margin-top: 45px;
  120 + margin-top: 40px;
126 121 float: right; }
127 122 .social.right {
128 123 padding-top: 10px; }
129 124 .social.right span {
  125 + color: #000;
130 126 display: inline-block;
131 127 font-size: 12px;
132 128 font-weight: 300;
... ... @@ -146,6 +142,13 @@ header {
146 142 display: inline-block;
147 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 152 .tab {
150 153 margin-top: 20px; }
151 154 .tab ul {
... ... @@ -194,8 +197,20 @@ header {
194 197 font-weight: 700;
195 198 padding-bottom: 5px;
196 199 padding-top: 110px; }
197   - .themes a:hover {
  200 + .themes a:hover, .themes a:focus {
198 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 215 #proposal-categories, #proposal-group {
201 216 border-bottom: 1px solid #000;
... ... @@ -212,13 +227,11 @@ header {
212 227 .proposal-container {
213 228 background-color: #ccc;
214 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 232 .proposal-container .name {
220   - color: #000;
221   - border-bottom: 1px solid #000;
  233 + color: #fff;
  234 + border-bottom: 2px solid #fff;
222 235 font-family: asap, sans;
223 236 font-size: 24px;
224 237 font-weight: 700;
... ... @@ -262,8 +275,13 @@ header {
262 275 background-color: #fff; }
263 276 .box-propostas p {
264 277 border-bottom: 0;
  278 + font-size: 14px;
265 279 padding-bottom: inherit; }
  280 + .box-apoie p {
  281 + border-bottom: 0;
  282 + padding-bottom: inherit; }
266 283 .box-header {
  284 + color: #335277;
267 285 font-family: asap, sans;
268 286 font-size: 24px;
269 287 font-weight: 700; }
... ... @@ -273,7 +291,6 @@ header {
273 291 list-style: none;
274 292 padding-left: 0; }
275 293 .box-category li {
276   - background-color: #000;
277 294 color: #fff;
278 295 display: inline-block;
279 296 padding-bottom: 5px;
... ... @@ -284,7 +301,7 @@ header {
284 301 font-size: 38px;
285 302 font-weight: 400;
286 303 margin-bottom: 20px; }
287   - .box-subtitle, .box-propostas p {
  304 + .box-subtitle, .box-apoie p {
288 305 font-size: 24px;
289 306 font-weight: 700;
290 307 line-height: 1.2;
... ... @@ -357,7 +374,11 @@ header {
357 374 margin-bottom: 20px;
358 375 margin-top: 20px; }
359 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 382 border-radius: 6px;
362 383 color: #fff;
363 384 font-size: 38px;
... ... @@ -369,7 +390,7 @@ header {
369 390 text-align: center;
370 391 transition: all 400ms; }
371 392 .proposal-header .show_body a:hover {
372   - background-color: #333333;
  393 + background-color: black;
373 394 text-decoration: none; }
374 395 .proposal-header img {
375 396 width: 100%; }
... ... @@ -415,18 +436,22 @@ header {
415 436 float: left; }
416 437 .results-content .vote-result, .results-content .updated-at {
417 438 float: right; }
  439 +.results-content .updated-at {
  440 + margin-top: 20px; }
418 441 .results-content table {
419 442 clear: both;
420 443 font-weight: 300; }
421 444 .results-content table tr:nth-child(odd) {
422 445 background: #e5e5e5; }
423 446 .results-content table td {
424   - padding: 0 5px; }
  447 + padding: 5px; }
425 448 .results-content table .header {
426 449 font-weight: 700;
427 450 text-align: center; }
428 451 .results-content table .abstract-text {
429 452 width: 80%; }
  453 + .results-content table .abstract-text p {
  454 + margin: inherit; }
430 455 .results-content table .value {
431 456 text-align: center;
432 457 width: 10%; }
... ... @@ -458,7 +483,7 @@ header {
458 483 display: inline-block;
459 484 line-height: 24px; }
460 485 .paging .current {
461   - background-color: #333333; }
  486 + background-color: #262626; }
462 487 .paging .next {
463 488 border-radius: 0 6px 6px 0; }
464 489 .paging .prev {
... ... @@ -496,7 +521,6 @@ header {
496 521 top: 43%;
497 522 width: 20px; }
498 523 .slick-def:before, .slick-prev:before, .slick-next:before {
499   - color: #000;
500 524 font-family: "FontAwesome";
501 525 font-size: 20px; }
502 526 .slick-prev {
... ... @@ -517,9 +541,232 @@ header {
517 541 padding: 20px; }
518 542 .list-unstyled li:first-child {
519 543 border-top: 0; }
  544 +.list-styled {
  545 + margin-left: 20px;
  546 + padding-left: 0; }
520 547  
521 548 .hide {
522 549 display: none; }
523 550  
524 551 h3.titulo-destaque {
525 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 43 $gutter: 20px
7 44  
8   -// arredondamento
  45 +// 1.2 - arredondamento
9 46 $radius: 6px
10 47  
11   -// tamanhos de fontes
  48 +// 1.3 - tamanhos de fontes
12 49 $font-size-base: 16px
13 50 $font-size-big: $font-size-base + 2
14 51 $font-size-small: $font-size-base - 2
... ... @@ -19,45 +56,44 @@ $font-size-h4: 34px
19 56 $theme-size-header: 24px
20 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 73 =hover($color, $amount)
34 74 transition: all 400ms
35 75 &:hover
36   - background-color: lighten($color, $amount)
  76 + background-color: darken($color, $amount)
37 77 text-decoration: none
38 78  
39   -
40 79 // ------------------------------------
41   -// base
  80 +// 3 - Base
42 81 // ------------------------------------
43 82  
44 83 body
45 84 font-family: 'Open Sans', sans-serif
46 85 font-size: $font-size-base
47   - font-weight: 300
  86 + font-weight: 400
48 87 h1
49   - border-bottom: 1px solid #000
50   - bottom: 0
  88 + border-bottom: 1px solid #d6dcd7
  89 + color: $header-color
51 90 font-family: asap, sans
52 91 font-size: $font-size-h1
53 92 font-weight: 500
54   - margin: 0
55   - padding: $gutter 0
56   - position: absolute
  93 + padding-bottom: $gutter
57 94 text-transform: uppercase
58   - width: 100%
59 95 h2
60   - border-bottom: 1px solid
  96 + border-bottom: 1px solid #eeeff1
61 97 font-size: $font-size-h2
62 98 font-weight: 300
63 99 margin-bottom: $gutter * 2
... ... @@ -66,6 +102,7 @@ h2
66 102 small
67 103 display: block
68 104 font-size: 16px
  105 + padding-top: $gutter * 0.25
69 106 text-transform: none
70 107 h3
71 108 font-size: $font-size-h3
... ... @@ -74,13 +111,11 @@ h3
74 111 h4
75 112 font-size: $font-size-h4
76 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 121 .container, .row
... ... @@ -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 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 135 border-radius: $radius
108 136 color: #fff
109 137 cursor: pointer
110 138 display: block
111   - font-size: $font-size-small
112   - font-weight: 400
  139 + font-size: $font-size-base
  140 + font-weight: 700
113 141 padding: $gutter 0
114 142 text-align: center
115   - text-transform: uppercase
116   - +hover(#000, 20%)
  143 + +hover(#000, 15%)
117 144 &:hover, &:focus
118 145 color: #fff
  146 + &-inline
  147 + display: inline-block
  148 + padding-bottom: $gutter * 0.5 !important
  149 + padding-top: $gutter * 0.5 !important
119 150 &-send
120 151 span
121 152 padding-left: $gutter * 1.5
... ... @@ -126,7 +157,7 @@ header
126 157 .fa
127 158 margin-right: $gutter * 0.5
128 159  
129   -// botao voltar
  160 +// 5.2 - botao voltar
130 161 .btn
131 162 background-color: transparent
132 163 border: 0
... ... @@ -138,7 +169,7 @@ header
138 169 padding-top: 0
139 170 vertical-align: middle
140 171  
141   -// icones
  172 +// 5.3 - icones de compartilhamento
142 173 .icon
143 174 background-color: transparent !important
144 175 background-repeat: no-repeat
... ... @@ -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 209 .social
179 210 position: relative
180 211 z-index: 1
181 212 &.top
182   - margin-top: 45px
  213 + margin-top: $gutter * 2
183 214 float: right
184 215 &.right
185 216 padding-top: 10px
186 217 span
  218 + color: #000
187 219 display: inline-block
188 220 font-size: 12px
189 221 font-weight: 300
... ... @@ -203,7 +235,16 @@ header
203 235 display: inline-block
204 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 248 .tab
208 249 margin-top: $gutter
209 250 ul
... ... @@ -234,7 +275,7 @@ header
234 275 border-right: 1px solid #000
235 276 border-top: 1px solid #000
236 277  
237   -// blocos dos temas
  278 +// 6.4 - blocos dos temas
238 279 .themes
239 280 font-size: 0
240 281 text-align: center
... ... @@ -253,10 +294,22 @@ header
253 294 font-weight: 700
254 295 padding-bottom: $gutter * 0.25
255 296 padding-top: $gutter * 5.5
256   - &:hover
  297 + &:hover,&:focus
257 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 313 #proposal
261 314 &-categories
262 315 border-bottom: 1px solid #000
... ... @@ -271,19 +324,15 @@ header
271 324 padding-left: 0
272 325 &-group
273 326 @extend #proposal-categories
274   -
275   -// programas por temas
276 327 .proposal
277 328 &-container
278 329 background-color: #ccc
279 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 333 .name
285   - color: #000
286   - border-bottom: 1px solid #000
  334 + color: #fff
  335 + border-bottom: 2px solid #fff
287 336 font-family: asap, sans
288 337 font-size: $theme-size-header
289 338 font-weight: 700
... ... @@ -296,7 +345,7 @@ header
296 345 list-style: none
297 346 padding-left: 0
298 347  
299   -// box dos programas
  348 +// 6.6 - blocos dos programas
300 349 .box
301 350 background-color: #fff
302 351 border: 1px solid gray
... ... @@ -328,10 +377,16 @@ header
328 377 &:hover
329 378 background-color: #fff
330 379 p
  380 + border-bottom: 0
  381 + font-size: $font-size-small
  382 + padding-bottom: inherit
  383 + &-apoie
  384 + p
331 385 @extend .box-subtitle
332 386 border-bottom: 0
333 387 padding-bottom: inherit
334 388 &-header
  389 + color: $link-color
335 390 font-family: asap, sans
336 391 font-size: $theme-size-header
337 392 font-weight: 700
... ... @@ -341,7 +396,6 @@ header
341 396 list-style: none
342 397 padding-left: 0
343 398 li
344   - background-color: #000
345 399 color: #fff
346 400 display: inline-block
347 401 padding-bottom: $gutter * 0.25
... ... @@ -380,7 +434,7 @@ header
380 434 &-center
381 435 text-align: center
382 436  
383   -// header do programa
  437 +// 6.7 - header do programa e select box
384 438 .select
385 439 background-color: #000
386 440 margin-bottom: $gutter * 0.5
... ... @@ -405,7 +459,7 @@ header
405 459 width: 60%
406 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 463 .proposal-header
410 464 position: relative
411 465 .title
... ... @@ -429,7 +483,11 @@ header
429 483 margin-bottom: $gutter
430 484 margin-top: $gutter
431 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 491 border-radius: $radius
434 492 color: #fff
435 493 font-size: $font-size-h2
... ... @@ -439,7 +497,7 @@ header
439 497 padding-right: 0
440 498 padding-top: $gutter * 0.5
441 499 text-align: center
442   - +hover(#000, 20%)
  500 + +hover(#000, 15%)
443 501 img
444 502 width: 100%
445 503 p
... ... @@ -450,7 +508,7 @@ header
450 508 padding-top: $gutter * 0.25
451 509 text-transform: none
452 510  
453   -// login form
  511 +// 6.9 - login form
454 512 .login
455 513 text-align: left
456 514 input
... ... @@ -473,7 +531,7 @@ header
473 531 i
474 532 font-style: normal
475 533  
476   -// votacao
  534 +// 6.10 - votacao
477 535 .vote-actions
478 536 .like
479 537 background: url(images/like.png) no-repeat
... ... @@ -484,24 +542,29 @@ header
484 542 .dislike
485 543 background-image: url(images/dislike.png)
486 544  
487   -// lista de resultados
  545 +// 6.11 - lista de resultados
488 546 .results-content
489 547 .total
490 548 float: left
491   - .vote-result, .updated-at
  549 + .vote-result
492 550 float: right
  551 + .updated-at
  552 + @extend .vote-result
  553 + margin-top: $gutter
493 554 table
494 555 clear: both
495 556 font-weight: 300
496 557 tr:nth-child(odd)
497 558 background: #e5e5e5
498 559 td
499   - padding: 0 5px
  560 + padding: $gutter * 0.25
500 561 .header
501 562 font-weight: 700
502 563 text-align: center
503 564 .abstract-text
504 565 width: 80%
  566 + p
  567 + margin: inherit
505 568 .value
506 569 text-align: center
507 570 width: 10%
... ... @@ -514,7 +577,7 @@ header
514 577 text-overflow: ellipsis
515 578 white-space: nowrap
516 579  
517   -// paginador
  580 +// 6.12 - paginador
518 581 .paging
519 582 padding: $gutter * 0.25
520 583 ul
... ... @@ -536,13 +599,13 @@ header
536 599 display: inline-block
537 600 line-height: 24px
538 601 .current
539   - background-color: lighten(#000, 20%)
  602 + background-color: lighten(#000, 15%)
540 603 .next
541 604 border-radius: 0 $radius $radius 0
542 605 .prev
543 606 border-radius: $radius 0 0 $radius
544 607  
545   -// calendario dos ministros
  608 +// 6.13 - calendario dos ministros
546 609 .slick
547 610 &-slider
548 611 list-style: none
... ... @@ -576,7 +639,6 @@ header
576 639 top: 43%
577 640 width: 20px
578 641 &:before
579   - color: #000
580 642 font-family: "FontAwesome"
581 643 font-size: 20px
582 644 &-prev
... ... @@ -592,21 +654,85 @@ header
592 654 &-disabled
593 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 675 .hide
610 676 display: none
611 677 h3.titulo-destaque
612   - font-size: $font-size-h3 + 10
613 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 740 \ No newline at end of file
... ...
sass/style.scss
  Diff comments   View file @6dbe70d
... ... @@ -152,3 +152,57 @@ form {
152 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 209 \ No newline at end of file
... ...