Download as
Browse Code »

Commit 7623736c2bd1b29bab19219a8723a1b87fd789f2

Authored by Augusto dos Anjos Almeida
1 parent 21eda9de
Exists in refactory-sass

Alto Contraste

Showing 8 changed files with 208 additions and 14 deletions   Show diff stats
images/icons/icon-facebook-contrast.png 100755 → 100644
View file @7623736

1.48 KB | W: | H:

1.34 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/icons/icon-gplus-contrast.png 100755 → 100644
View file @7623736

1.73 KB | W: | H:

1.77 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/icons/icon-twitter-contrast.png 100755 → 100644
View file @7623736

1.79 KB | W: | H:

1.43 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/icons/icon-whatsapp-contrast.png 100755 → 100644
View file @7623736

2.04 KB | W: | H:

2.02 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
index.html
  Diff comments   View file @7623736
... ... @@ -259,8 +259,8 @@
259 259 <div class="results-container hide box box-propostas "></div>
260 260  
261 261 <div class="row">
262   - <section class="talk-proposal-container col-sm-12">
263   - <div class="talk-proposal box box-propostas">
  262 + <div class="talk-proposal-container col-sm-12">
  263 + <section class="talk-proposal box box-propostas">
264 264 <div class="container-title box-title">Bate-papo com os ministros</div>
265 265 <p>Confira as datas e horários:</p>
266 266 <ul class="calendar" data-slick='{"infinite": false, "rows": 2}'>
... ... @@ -285,8 +285,8 @@
285 285 <div class="date"><i class="fa fa-calendar"></i> 25/04/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
286 286 </li>
287 287 </ul>
288   - </div>
289   - </section>
  288 + </section>
  289 + </div>
290 290 </div>
291 291  
292 292 </div>
... ...
js/main.js
  Diff comments   View file @7623736
... ... @@ -555,7 +555,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
555 555  
556 556 $( '#display-contrast' ).on('click', function(e){
557 557 e.preventDefault();
558   - $('#proposal-result').toggleClass('contrast');
  558 + $('body').toggleClass('contrast');
559 559 });
560 560  
561 561 $( '.show_body' ).on('click', function(e){
... ...
novo.css
  Diff comments   View file @7623736
... ... @@ -17,7 +17,7 @@ h1 {
17 17 h2 {
18 18 border-bottom: 1px solid #eeeff1;
19 19 font-size: 38px;
20   - font-weight: 300;
  20 + font-weight: 500;
21 21 margin-bottom: 40px;
22 22 padding-bottom: 20px;
23 23 text-transform: uppercase; }
... ... @@ -29,7 +29,7 @@ h2 {
29 29  
30 30 h3 {
31 31 font-size: 28px;
32   - font-weight: 300;
  32 + font-weight: 500;
33 33 text-transform: uppercase; }
34 34  
35 35 h4 {
... ... @@ -66,8 +66,8 @@ p, ul, select {
66 66 color: #fff; }
67 67 .button-inline {
68 68 display: inline-block;
69   - padding-bottom: 10px !important;
70   - padding-top: 10px !important; }
  69 + padding-bottom: 5px !important;
  70 + padding-top: 5px !important; }
71 71 .button-send span {
72 72 padding-left: 30px;
73 73 background-image: url(images/airplane.png);
... ... @@ -285,6 +285,8 @@ p, ul, select {
285 285 font-family: asap, sans;
286 286 font-size: 24px;
287 287 font-weight: 700; }
  288 + .box-header p {
  289 + font-size: 14px; }
288 290 .box-category {
289 291 font-size: 16px;
290 292 font-weight: 700;
... ... @@ -573,6 +575,12 @@ p, ul, select {
573 575 h3.titulo-destaque {
574 576 font-size: 38px; }
575 577  
  578 +.bloco-destaque {
  579 + padding: 35px;
  580 + border-radius: 6px; }
  581 + .bloco-destaque h4 {
  582 + margin-bottom: 60px; }
  583 +
576 584 section.saude .description {
577 585 margin-top: 20px; }
578 586 section.saude .description:before {
... ... @@ -637,6 +645,14 @@ section.reducao-da-pobreza .description {
637 645 text-decoration: none; }
638 646 .saude .login i, .saude .signup i {
639 647 color: #00a9bd; }
  648 + .saude .bloco-destaque {
  649 + background-color: #00a9bd;
  650 + background-image: url(http://www.participa.br/articles/public/0009/6039/mais-medicos-foto4.png);
  651 + background-repeat: no-repeat;
  652 + background-position: 100% 100%;
  653 + color: #fff; }
  654 + .saude .bloco-destaque p {
  655 + color: #fff; }
640 656  
641 657 section.saude {
642 658 background-color: #00a9bd; }
... ... @@ -693,6 +709,14 @@ section.saude {
693 709 text-decoration: none; }
694 710 .seguranca-publica .login i, .seguranca-publica .signup i {
695 711 color: #e34748; }
  712 + .seguranca-publica .bloco-destaque {
  713 + background-color: #e34748;
  714 + background-image: url(http://www.participa.br/articles/public/0009/6039/mais-medicos-foto4.png);
  715 + background-repeat: no-repeat;
  716 + background-position: 100% 100%;
  717 + color: #fff; }
  718 + .seguranca-publica .bloco-destaque p {
  719 + color: #fff; }
696 720  
697 721 section.seguranca-publica {
698 722 background-color: #e34748; }
... ... @@ -749,6 +773,14 @@ section.seguranca-publica {
749 773 text-decoration: none; }
750 774 .educacao .login i, .educacao .signup i {
751 775 color: #ffb400; }
  776 + .educacao .bloco-destaque {
  777 + background-color: #ffb400;
  778 + background-image: url(http://www.participa.br/articles/public/0009/6039/mais-medicos-foto4.png);
  779 + background-repeat: no-repeat;
  780 + background-position: 100% 100%;
  781 + color: #fff; }
  782 + .educacao .bloco-destaque p {
  783 + color: #fff; }
752 784  
753 785 section.educacao {
754 786 background-color: #ffb400; }
... ... @@ -805,6 +837,14 @@ section.educacao {
805 837 text-decoration: none; }
806 838 .reducao-da-pobreza .login i, .reducao-da-pobreza .signup i {
807 839 color: #51d0b3; }
  840 + .reducao-da-pobreza .bloco-destaque {
  841 + background-color: #51d0b3;
  842 + background-image: url(http://www.participa.br/articles/public/0009/6039/mais-medicos-foto4.png);
  843 + background-repeat: no-repeat;
  844 + background-position: 100% 100%;
  845 + color: #fff; }
  846 + .reducao-da-pobreza .bloco-destaque p {
  847 + color: #fff; }
808 848  
809 849 section.reducao-da-pobreza {
810 850 background-color: #51d0b3; }
... ... @@ -828,3 +868,68 @@ section.reducao-da-pobreza {
828 868 background-repeat: no-repeat; }
829 869 #proposal-category-reducao-da-pobreza .arrow-box:after {
830 870 border-bottom-color: #51d0b3; }
  871 +
  872 +.contrast {
  873 + background-color: #000;
  874 + color: #fff; }
  875 + .contrast h2, .contrast h3, .contrast h4, .contrast a, .contrast p, .contrast li, .contrast label, .contrast .label, .contrast .login i {
  876 + color: #fff; }
  877 + .contrast a {
  878 + text-decoration: underline; }
  879 + .contrast small {
  880 + color: #999999; }
  881 + .contrast .button, .contrast .button-cancela, .contrast .login input.button, .login .contrast input.button, .contrast .signup input.button, .signup .contrast input.button, .contrast .show_body a, .contrast .login input.button-cancela, .contrast .login input.button, .contrast .box-category li {
  882 + background-color: #fff;
  883 + border-color: #999999;
  884 + color: #000;
  885 + text-decoration: none;
  886 + transition: all 400ms; }
  887 + .contrast .button:hover, .contrast .button-cancela:hover, .contrast .show_body a:hover, .contrast .login input.button-cancela:hover, .contrast .login input.button:hover, .contrast .box-category li:hover {
  888 + background-color: #999999;
  889 + text-decoration: none; }
  890 + .contrast .icon-facebook {
  891 + background-image: url(images/icons/icon-facebook-contrast.png) !important; }
  892 + .contrast .icon-twitter {
  893 + background-image: url(images/icons/icon-twitter-contrast.png) !important; }
  894 + .contrast .icon-gplus {
  895 + background-image: url(images/icons/icon-gplus-contrast.png) !important; }
  896 + .contrast .icon-whatsapp {
  897 + background-image: url(images/icons/icon-whatsapp-contrast.png) !important; }
  898 + .contrast .tab a {
  899 + background-color: #262626;
  900 + border-bottom-color: #fff; }
  901 + .contrast .tab .active {
  902 + background-color: #000;
  903 + border-color: #fff;
  904 + border-bottom-color: #000; }
  905 + .contrast #proposal-categories, .contrast #proposal-group, .contrast #proposal-group {
  906 + border-color: #fff; }
  907 + .contrast .proposal-category a {
  908 + background-color: #262626 !important; }
  909 + .contrast .proposal-category .arrow-box:after {
  910 + border-bottom-color: #262626 !important; }
  911 + .contrast .select {
  912 + background-color: #262626; }
  913 + .contrast section {
  914 + background-color: #262626; }
  915 + .contrast section:hover {
  916 + background-color: #262626; }
  917 + .contrast section .box {
  918 + background-color: #000; }
  919 + .contrast .proposal-header .title, .contrast .proposal-header p, .contrast .proposal-header p {
  920 + background-color: #262626; }
  921 + .contrast .box {
  922 + background-color: #262626;
  923 + text-decoration: none; }
  924 + .contrast .box-propostas {
  925 + border-color: #fff; }
  926 + .contrast .box-title, .contrast .box-subtitle, .contrast .box-apoie p, .box-apoie .contrast p, .contrast .box-info, .contrast .box-bottom, .contrast .box .social span, .contrast .box-header {
  927 + color: #fff; }
  928 + .contrast .slick-prev, .contrast .slick-next {
  929 + color: #fff; }
  930 + .contrast .slick-slider li {
  931 + background-color: #000; }
  932 + .contrast .slick-slider .date, .contrast .slick-slider .time {
  933 + color: #fff; }
  934 + .contrast .bloco-destaque {
  935 + background: #262626; }
... ...
sass/novo.sass
  Diff comments   View file @7623736
... ... @@ -32,6 +32,7 @@
32 32 // 6.14 - listas
33 33 // 7 - Modificadores
34 34 // 8 - Cores do Temas
  35 +// 9 - Alto Contraste
35 36 // ------------------------------------
36 37  
37 38  
... ... @@ -96,7 +97,7 @@ h1
96 97 h2
97 98 border-bottom: 1px solid #eeeff1
98 99 font-size: $font-size-h2
99   - font-weight: 300
  100 + font-weight: 500
100 101 margin-bottom: $gutter * 2
101 102 padding-bottom: $gutter
102 103 text-transform: uppercase
... ... @@ -107,7 +108,7 @@ h2
107 108 text-transform: none
108 109 h3
109 110 font-size: $font-size-h3
110   - font-weight: 300
  111 + font-weight: 500
111 112 text-transform: uppercase
112 113 h4
113 114 font-size: $font-size-h4
... ... @@ -149,8 +150,8 @@ p,ul,select
149 150 color: #fff
150 151 &-inline
151 152 display: inline-block
152   - padding-bottom: $gutter * 0.5 !important
153   - padding-top: $gutter * 0.5 !important
  153 + padding-bottom: $gutter * 0.25 !important
  154 + padding-top: $gutter * 0.25 !important
154 155 &-cancela
155 156 @extend .button
156 157 &-send
... ... @@ -392,6 +393,8 @@ p,ul,select
392 393 font-family: asap, sans
393 394 font-size: $theme-size-header
394 395 font-weight: 700
  396 + p
  397 + font-size: $font-size-small
395 398 &-category
396 399 font-size: $font-size-base
397 400 font-weight: 700
... ... @@ -703,6 +706,11 @@ p,ul,select
703 706 display: none
704 707 h3.titulo-destaque
705 708 font-size: $font-size-h3 + 10
  709 +.bloco-destaque
  710 + padding: $gutter * 1.75
  711 + border-radius: $radius
  712 + h4
  713 + margin-bottom: $gutter * 3
706 714 @each $category, $description in $categories-descriptions
707 715 section.#{$category}
708 716 .description
... ... @@ -752,6 +760,14 @@ h3.titulo-destaque
752 760 +hover($color, 15%)
753 761 i
754 762 color: $color
  763 + .bloco-destaque
  764 + background-color: $color
  765 + background-image: url(http://www.participa.br/articles/public/0009/6039/mais-medicos-foto4.png)
  766 + background-repeat: no-repeat
  767 + background-position: 100% 100%
  768 + color: #fff
  769 + p
  770 + color: #fff
755 771 section.#{$category}
756 772 background-color: $color
757 773 .category-#{$category}
... ... @@ -769,4 +785,77 @@ h3.titulo-destaque
769 785 background-position: 50% 10px
770 786 background-repeat: no-repeat
771 787 .arrow-box:after
772   - border-bottom-color: $color
773 788 \ No newline at end of file
  789 + border-bottom-color: $color
  790 +
  791 +
  792 +// ------------------------------------
  793 +// 9 - Alto Contraste
  794 +// ------------------------------------
  795 +
  796 +.contrast
  797 + background-color: #000
  798 + color: #fff
  799 + h2,h3,h4,a,p,li,label,.label,.login i
  800 + color: #fff
  801 + a
  802 + text-decoration: underline
  803 + small
  804 + color: darken(#fff, 40%)
  805 + .button,.show_body a,.login input.button,.box-category li
  806 + background-color: #fff
  807 + border-color: darken(#fff, 40%)
  808 + color: #000
  809 + text-decoration: none
  810 + +hover(#fff, 40%)
  811 + .icon
  812 + &-facebook
  813 + background-image: url(images/icons/icon-facebook-contrast.png) !important
  814 + &-twitter
  815 + background-image: url(images/icons/icon-twitter-contrast.png) !important
  816 + &-gplus
  817 + background-image: url(images/icons/icon-gplus-contrast.png) !important
  818 + &-whatsapp
  819 + background-image: url(images/icons/icon-whatsapp-contrast.png) !important
  820 + .tab
  821 + a
  822 + background-color: darken(#fff, 85%)
  823 + border-bottom-color: #fff
  824 + .active
  825 + background-color: #000
  826 + border-color: #fff
  827 + border-bottom-color: #000
  828 + #proposal-categories,#proposal-group
  829 + border-color: #fff
  830 + .proposal-category
  831 + a
  832 + background-color: darken(#fff, 85%) !important
  833 + .arrow-box:after
  834 + border-bottom-color: darken(#fff, 85%) !important
  835 + .select
  836 + background-color: darken(#fff, 85%)
  837 + section
  838 + background-color: darken(#fff, 85%)
  839 + &:hover
  840 + background-color: darken(#fff, 85%)
  841 + .box
  842 + background-color: #000
  843 + .proposal-header
  844 + .title, p
  845 + background-color: darken(#fff, 85%)
  846 + .box
  847 + background-color: darken(#fff, 85%)
  848 + text-decoration: none
  849 + &-propostas
  850 + border-color: #fff
  851 + &-title,&-subtitle,&-info,&-bottom,.social span,&-header
  852 + color: #fff
  853 + .slick
  854 + &-prev,&-next
  855 + color: #fff
  856 + &-slider
  857 + li
  858 + background-color: #000
  859 + .date,.time
  860 + color: #fff
  861 + .bloco-destaque
  862 + background: darken(#fff, 85%)
... ...