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
@@ -259,8 +259,8 @@ @@ -259,8 +259,8 @@
259 <div class="results-container hide box box-propostas "></div> 259 <div class="results-container hide box box-propostas "></div>
260 260
261 <div class="row"> 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 <div class="container-title box-title">Bate-papo com os ministros</div> 264 <div class="container-title box-title">Bate-papo com os ministros</div>
265 <p>Confira as datas e horários:</p> 265 <p>Confira as datas e horários:</p>
266 <ul class="calendar" data-slick='{"infinite": false, "rows": 2}'> 266 <ul class="calendar" data-slick='{"infinite": false, "rows": 2}'>
@@ -285,8 +285,8 @@ @@ -285,8 +285,8 @@
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> 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 </li> 286 </li>
287 </ul> 287 </ul>
288 - </div>  
289 - </section> 288 + </section>
  289 + </div>
290 </div> 290 </div>
291 291
292 </div> 292 </div>
@@ -555,7 +555,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F @@ -555,7 +555,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
555 555
556 $( '#display-contrast' ).on('click', function(e){ 556 $( '#display-contrast' ).on('click', function(e){
557 e.preventDefault(); 557 e.preventDefault();
558 - $('#proposal-result').toggleClass('contrast'); 558 + $('body').toggleClass('contrast');
559 }); 559 });
560 560
561 $( '.show_body' ).on('click', function(e){ 561 $( '.show_body' ).on('click', function(e){
@@ -17,7 +17,7 @@ h1 { @@ -17,7 +17,7 @@ h1 {
17 h2 { 17 h2 {
18 border-bottom: 1px solid #eeeff1; 18 border-bottom: 1px solid #eeeff1;
19 font-size: 38px; 19 font-size: 38px;
20 - font-weight: 300; 20 + font-weight: 500;
21 margin-bottom: 40px; 21 margin-bottom: 40px;
22 padding-bottom: 20px; 22 padding-bottom: 20px;
23 text-transform: uppercase; } 23 text-transform: uppercase; }
@@ -29,7 +29,7 @@ h2 { @@ -29,7 +29,7 @@ h2 {
29 29
30 h3 { 30 h3 {
31 font-size: 28px; 31 font-size: 28px;
32 - font-weight: 300; 32 + font-weight: 500;
33 text-transform: uppercase; } 33 text-transform: uppercase; }
34 34
35 h4 { 35 h4 {
@@ -66,8 +66,8 @@ p, ul, select { @@ -66,8 +66,8 @@ p, ul, select {
66 color: #fff; } 66 color: #fff; }
67 .button-inline { 67 .button-inline {
68 display: inline-block; 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 .button-send span { 71 .button-send span {
72 padding-left: 30px; 72 padding-left: 30px;
73 background-image: url(images/airplane.png); 73 background-image: url(images/airplane.png);
@@ -285,6 +285,8 @@ p, ul, select { @@ -285,6 +285,8 @@ p, ul, select {
285 font-family: asap, sans; 285 font-family: asap, sans;
286 font-size: 24px; 286 font-size: 24px;
287 font-weight: 700; } 287 font-weight: 700; }
  288 + .box-header p {
  289 + font-size: 14px; }
288 .box-category { 290 .box-category {
289 font-size: 16px; 291 font-size: 16px;
290 font-weight: 700; 292 font-weight: 700;
@@ -573,6 +575,12 @@ p, ul, select { @@ -573,6 +575,12 @@ p, ul, select {
573 h3.titulo-destaque { 575 h3.titulo-destaque {
574 font-size: 38px; } 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 section.saude .description { 584 section.saude .description {
577 margin-top: 20px; } 585 margin-top: 20px; }
578 section.saude .description:before { 586 section.saude .description:before {
@@ -637,6 +645,14 @@ section.reducao-da-pobreza .description { @@ -637,6 +645,14 @@ section.reducao-da-pobreza .description {
637 text-decoration: none; } 645 text-decoration: none; }
638 .saude .login i, .saude .signup i { 646 .saude .login i, .saude .signup i {
639 color: #00a9bd; } 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 section.saude { 657 section.saude {
642 background-color: #00a9bd; } 658 background-color: #00a9bd; }
@@ -693,6 +709,14 @@ section.saude { @@ -693,6 +709,14 @@ section.saude {
693 text-decoration: none; } 709 text-decoration: none; }
694 .seguranca-publica .login i, .seguranca-publica .signup i { 710 .seguranca-publica .login i, .seguranca-publica .signup i {
695 color: #e34748; } 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 section.seguranca-publica { 721 section.seguranca-publica {
698 background-color: #e34748; } 722 background-color: #e34748; }
@@ -749,6 +773,14 @@ section.seguranca-publica { @@ -749,6 +773,14 @@ section.seguranca-publica {
749 text-decoration: none; } 773 text-decoration: none; }
750 .educacao .login i, .educacao .signup i { 774 .educacao .login i, .educacao .signup i {
751 color: #ffb400; } 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 section.educacao { 785 section.educacao {
754 background-color: #ffb400; } 786 background-color: #ffb400; }
@@ -805,6 +837,14 @@ section.educacao { @@ -805,6 +837,14 @@ section.educacao {
805 text-decoration: none; } 837 text-decoration: none; }
806 .reducao-da-pobreza .login i, .reducao-da-pobreza .signup i { 838 .reducao-da-pobreza .login i, .reducao-da-pobreza .signup i {
807 color: #51d0b3; } 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 section.reducao-da-pobreza { 849 section.reducao-da-pobreza {
810 background-color: #51d0b3; } 850 background-color: #51d0b3; }
@@ -828,3 +868,68 @@ section.reducao-da-pobreza { @@ -828,3 +868,68 @@ section.reducao-da-pobreza {
828 background-repeat: no-repeat; } 868 background-repeat: no-repeat; }
829 #proposal-category-reducao-da-pobreza .arrow-box:after { 869 #proposal-category-reducao-da-pobreza .arrow-box:after {
830 border-bottom-color: #51d0b3; } 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,6 +32,7 @@
32 // 6.14 - listas 32 // 6.14 - listas
33 // 7 - Modificadores 33 // 7 - Modificadores
34 // 8 - Cores do Temas 34 // 8 - Cores do Temas
  35 +// 9 - Alto Contraste
35 // ------------------------------------ 36 // ------------------------------------
36 37
37 38
@@ -96,7 +97,7 @@ h1 @@ -96,7 +97,7 @@ h1
96 h2 97 h2
97 border-bottom: 1px solid #eeeff1 98 border-bottom: 1px solid #eeeff1
98 font-size: $font-size-h2 99 font-size: $font-size-h2
99 - font-weight: 300 100 + font-weight: 500
100 margin-bottom: $gutter * 2 101 margin-bottom: $gutter * 2
101 padding-bottom: $gutter 102 padding-bottom: $gutter
102 text-transform: uppercase 103 text-transform: uppercase
@@ -107,7 +108,7 @@ h2 @@ -107,7 +108,7 @@ h2
107 text-transform: none 108 text-transform: none
108 h3 109 h3
109 font-size: $font-size-h3 110 font-size: $font-size-h3
110 - font-weight: 300 111 + font-weight: 500
111 text-transform: uppercase 112 text-transform: uppercase
112 h4 113 h4
113 font-size: $font-size-h4 114 font-size: $font-size-h4
@@ -149,8 +150,8 @@ p,ul,select @@ -149,8 +150,8 @@ p,ul,select
149 color: #fff 150 color: #fff
150 &-inline 151 &-inline
151 display: inline-block 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 &-cancela 155 &-cancela
155 @extend .button 156 @extend .button
156 &-send 157 &-send
@@ -392,6 +393,8 @@ p,ul,select @@ -392,6 +393,8 @@ p,ul,select
392 font-family: asap, sans 393 font-family: asap, sans
393 font-size: $theme-size-header 394 font-size: $theme-size-header
394 font-weight: 700 395 font-weight: 700
  396 + p
  397 + font-size: $font-size-small
395 &-category 398 &-category
396 font-size: $font-size-base 399 font-size: $font-size-base
397 font-weight: 700 400 font-weight: 700
@@ -703,6 +706,11 @@ p,ul,select @@ -703,6 +706,11 @@ p,ul,select
703 display: none 706 display: none
704 h3.titulo-destaque 707 h3.titulo-destaque
705 font-size: $font-size-h3 + 10 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 @each $category, $description in $categories-descriptions 714 @each $category, $description in $categories-descriptions
707 section.#{$category} 715 section.#{$category}
708 .description 716 .description
@@ -752,6 +760,14 @@ h3.titulo-destaque @@ -752,6 +760,14 @@ h3.titulo-destaque
752 +hover($color, 15%) 760 +hover($color, 15%)
753 i 761 i
754 color: $color 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 section.#{$category} 771 section.#{$category}
756 background-color: $color 772 background-color: $color
757 .category-#{$category} 773 .category-#{$category}
@@ -769,4 +785,77 @@ h3.titulo-destaque @@ -769,4 +785,77 @@ h3.titulo-destaque
769 background-position: 50% 10px 785 background-position: 50% 10px
770 background-repeat: no-repeat 786 background-repeat: no-repeat
771 .arrow-box:after 787 .arrow-box:after
772 - border-bottom-color: $color  
773 \ No newline at end of file 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%)