Download as
Browse Code »

Commit 41911f31a8546a39c2a19f8f7c4e77870f4023b1

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

proposal detail

Showing 6 changed files with 351 additions and 33 deletions   Show diff stats
@@ -175,27 +175,143 @@ nav ul { @@ -175,27 +175,143 @@ nav ul {
175 #search-input-container { 175 #search-input-container {
176 margin-top: 10px; } 176 margin-top: 10px; }
177 177
178 -.proposal-detail .proposal-category {  
179 - background-color: #000;  
180 - border-top: 0;  
181 - display: block;  
182 - margin-right: 0;  
183 - padding-top: 0;  
184 - text-align: left; }  
185 .proposal-detail .proposal-link { 178 .proposal-detail .proposal-link {
186 border-radius: 0; 179 border-radius: 0;
187 - font-size: 18px; 180 + font-size: 19px;
188 padding: 15px 35px; 181 padding: 15px 35px;
189 text-transform: uppercase; 182 text-transform: uppercase;
190 vertical-align: middle; 183 vertical-align: middle;
191 width: auto; } 184 width: auto; }
192 .proposal-selection { 185 .proposal-selection {
  186 + background-color: #EEEFF1;
  187 + border: 0;
  188 + float: right;
  189 + font-size: 16px;
  190 + font-weight: 300;
193 height: 57px; 191 height: 57px;
  192 + margin: 0;
  193 + text-transform: uppercase;
194 width: 60%; } 194 width: 60%; }
  195 +.proposal-header {
  196 + position: relative; }
  197 +.proposal-container {
  198 + display: block;
  199 + float: left;
  200 + margin-bottom: 20px;
  201 + width: 50%; }
  202 +.proposal-content {
  203 + border: 1px solid #000;
  204 + height: 500px;
  205 + padding: 20px; }
  206 +
  207 +.category {
  208 + background-color: #000;
  209 + border-top: 0;
  210 + display: block;
  211 + margin-bottom: 0;
  212 + margin-right: 0;
  213 + padding-top: 0;
  214 + text-align: left; }
195 215
196 .select { 216 .select {
197 padding-left: 0; } 217 padding-left: 0; }
198 218
  219 +.btn {
  220 + border: 1px solid;
  221 + display: inline-block;
  222 + font-size: 14px;
  223 + line-height: 3.1;
  224 + padding: 6px 12px; }
  225 + .btn-default {
  226 + background-color: #fff; }
  227 +
  228 +.abstract img {
  229 + width: 100%; }
  230 +.abstract p {
  231 + background-color: #000;
  232 + bottom: 140px;
  233 + color: #fff;
  234 + font-size: 14px;
  235 + padding: 5px 20px 20px 20px;
  236 + position: absolute;
  237 + right: 0;
  238 + text-align: center;
  239 + width: 50%; }
  240 +
  241 +.title {
  242 + background-color: #000;
  243 + bottom: 170px;
  244 + color: #fff;
  245 + font-size: 32px;
  246 + font-weight: 700;
  247 + padding: 20px 20px 0;
  248 + position: absolute;
  249 + right: 0;
  250 + text-align: center;
  251 + text-transform: uppercase;
  252 + width: 50%; }
  253 +
  254 +.show_body {
  255 + background: #000 url("images/black-alpha.png") no-repeat;
  256 + border-top: 5px solid;
  257 + padding: 30px 0;
  258 + margin: 10px auto; }
  259 + .show_body a {
  260 + background: url("images/white-line.png") left center repeat-x;
  261 + color: #fff;
  262 + display: block;
  263 + font-size: 38px;
  264 + font-weight: 700;
  265 + margin: auto;
  266 + text-align: center;
  267 + text-transform: uppercase;
  268 + width: 70%; }
  269 + .show_body span {
  270 + padding: 5px 15px; }
  271 +
  272 +.container-title {
  273 + color: #000;
  274 + font-size: 38px;
  275 + margin-bottom: 20px; }
  276 +
  277 +.subtitle {
  278 + color: #03316f;
  279 + font-size: 24px;
  280 + font-weight: 700;
  281 + margin-bottom: 20px; }
  282 +
  283 +.info {
  284 + font-size: 14px;
  285 + font-weight: 300; }
  286 +
  287 +.send-button a {
  288 + background-color: #000;
  289 + border-radius: 7px;
  290 + color: #fff;
  291 + display: block;
  292 + margin: auto;
  293 + padding: 20px 0;
  294 + text-align: center;
  295 + text-transform: uppercase;
  296 + width: 60%; }
  297 + .send-button a span {
  298 + padding-left: 20px;
  299 + background-image: url("images/airplane.png");
  300 + background-position: 0 50%;
  301 + background-repeat: no-repeat; }
  302 +
  303 +.make-proposal {
  304 + margin-right: 10px; }
  305 +
  306 +.support-proposal {
  307 + margin-left: 10px; }
  308 +
  309 +.experience-proposal {
  310 + margin-right: 10px; }
  311 +
  312 +.talk-proposal {
  313 + margin-left: 10px; }
  314 +
199 #proposal-category-saude .proposal-link { 315 #proposal-category-saude .proposal-link {
200 background-color: #00a9bd; 316 background-color: #00a9bd;
201 background-image: url(./images/icons/saude.png?3); 317 background-image: url(./images/icons/saude.png?3);
@@ -222,6 +338,17 @@ li.category-saude { @@ -222,6 +338,17 @@ li.category-saude {
222 background-position: 0 50%; 338 background-position: 0 50%;
223 background-repeat: no-repeat; 339 background-repeat: no-repeat;
224 background-size: 32px; } 340 background-size: 32px; }
  341 +.saude .proposal-content {
  342 + border-color: #00a9bd; }
  343 +.saude .show_body {
  344 + background-color: #007280;
  345 + border-color: #00a9bd; }
  346 + .saude .show_body span {
  347 + background-color: #007280; }
  348 +.saude .container-title {
  349 + color: #00a9bd; }
  350 +.saude .send-button a {
  351 + background-color: #00a9bd; }
225 352
226 #proposal-category-seguranca .proposal-link { 353 #proposal-category-seguranca .proposal-link {
227 background-color: #e34748; 354 background-color: #e34748;
@@ -249,6 +376,17 @@ li.category-seguranca { @@ -249,6 +376,17 @@ li.category-seguranca {
249 background-position: 0 50%; 376 background-position: 0 50%;
250 background-repeat: no-repeat; 377 background-repeat: no-repeat;
251 background-size: 32px; } 378 background-size: 32px; }
  379 +.seguranca .proposal-content {
  380 + border-color: #e34748; }
  381 +.seguranca .show_body {
  382 + background-color: #ce1f20;
  383 + border-color: #e34748; }
  384 + .seguranca .show_body span {
  385 + background-color: #ce1f20; }
  386 +.seguranca .container-title {
  387 + color: #e34748; }
  388 +.seguranca .send-button a {
  389 + background-color: #e34748; }
252 390
253 #proposal-category-educacao .proposal-link { 391 #proposal-category-educacao .proposal-link {
254 background-color: #ffb400; 392 background-color: #ffb400;
@@ -276,6 +414,17 @@ li.category-educacao { @@ -276,6 +414,17 @@ li.category-educacao {
276 background-position: 0 50%; 414 background-position: 0 50%;
277 background-repeat: no-repeat; 415 background-repeat: no-repeat;
278 background-size: 32px; } 416 background-size: 32px; }
  417 +.educacao .proposal-content {
  418 + border-color: #ffb400; }
  419 +.educacao .show_body {
  420 + background-color: #c28900;
  421 + border-color: #ffb400; }
  422 + .educacao .show_body span {
  423 + background-color: #c28900; }
  424 +.educacao .container-title {
  425 + color: #ffb400; }
  426 +.educacao .send-button a {
  427 + background-color: #ffb400; }
279 428
280 #proposal-category-reducao-da-pobreza .proposal-link { 429 #proposal-category-reducao-da-pobreza .proposal-link {
281 background-color: #51d0b3; 430 background-color: #51d0b3;
@@ -303,3 +452,14 @@ li.category-reducao-da-pobreza { @@ -303,3 +452,14 @@ li.category-reducao-da-pobreza {
303 background-position: 0 50%; 452 background-position: 0 50%;
304 background-repeat: no-repeat; 453 background-repeat: no-repeat;
305 background-size: 32px; } 454 background-size: 32px; }
  455 +.reducao-da-pobreza .proposal-content {
  456 + border-color: #51d0b3; }
  457 +.reducao-da-pobreza .show_body {
  458 + background-color: #30b395;
  459 + border-color: #51d0b3; }
  460 + .reducao-da-pobreza .show_body span {
  461 + background-color: #30b395; }
  462 +.reducao-da-pobreza .container-title {
  463 + color: #51d0b3; }
  464 +.reducao-da-pobreza .send-button a {
  465 + background-color: #51d0b3; }
@@ -112,8 +112,8 @@ @@ -112,8 +112,8 @@
112 </div> 112 </div>
113 113
114 </div> 114 </div>
115 - <div class='make-proposal-container'>  
116 - <div class='make-proposal'> 115 + <div class='make-proposal-container proposal-container'>
  116 + <div class='make-proposal proposal-content'>
117 <div class='container-title'>Faça Uma Proposta</div> 117 <div class='container-title'>Faça Uma Proposta</div>
118 <div class='subtitle'>Qual a sua sugestão para melhorar este programa?</div> 118 <div class='subtitle'>Qual a sua sugestão para melhorar este programa?</div>
119 <div class='info'>Ela se tornará pública em até 24 horas após o envio e poderá ser apoiada por outros participantes.</div> 119 <div class='info'>Ela se tornará pública em até 24 horas após o envio e poderá ser apoiada por outros participantes.</div>
@@ -135,8 +135,8 @@ @@ -135,8 +135,8 @@
135 <br style="clear: both;" /> 135 <br style="clear: both;" />
136 </div> 136 </div>
137 </div> 137 </div>
138 - <div class='support-proposal-container'>  
139 - <div class='support-proposal'> 138 + <div class='support-proposal-container proposal-container'>
  139 + <div class='support-proposal proposal-content'>
140 <div class='container-title'> Apoie outras propostas</div> 140 <div class='container-title'> Apoie outras propostas</div>
141 <div class='subtitle'> Propostas da sociedade</div> 141 <div class='subtitle'> Propostas da sociedade</div>
142 <div class="random-proposal"></div> 142 <div class="random-proposal"></div>
@@ -145,8 +145,8 @@ @@ -145,8 +145,8 @@
145 </div> 145 </div>
146 </div> 146 </div>
147 <div class='results-container hide'></div> 147 <div class='results-container hide'></div>
148 - <div class='experience-proposal-container'>  
149 - <div class='experience-proposal'> 148 + <div class='experience-proposal-container proposal-container'>
  149 + <div class='experience-proposal proposal-content'>
150 <div class='container-title'>Conte sua experiência</div> 150 <div class='container-title'>Conte sua experiência</div>
151 <p>Adoraríamos que você nos contasse a sua experiência com este programa ou a de alguém que você conhece.</p> 151 <p>Adoraríamos que você nos contasse a sua experiência com este programa ou a de alguém que você conhece.</p>
152 <p>Esta história pode nos ajudar a melhorar a nossa ação e não será divulgada.</p> 152 <p>Esta história pode nos ajudar a melhorar a nossa ação e não será divulgada.</p>
@@ -167,8 +167,8 @@ @@ -167,8 +167,8 @@
167 </div> 167 </div>
168 </div> 168 </div>
169 </div> 169 </div>
170 - <div class='talk-proposal-container'>  
171 - <div class='talk-proposal'> 170 + <div class='talk-proposal-container proposal-container'>
  171 + <div class='talk-proposal proposal-content'>
172 <div class='container-title'>Fale com os ministros</div> 172 <div class='container-title'>Fale com os ministros</div>
173 <p>Confira as datas e horários disponíveis:</p> 173 <p>Confira as datas e horários disponíveis:</p>
174 <ul class='calendar'> 174 <ul class='calendar'>
sass/novo/_colors.scss
  Diff comments   View file @41911f3
1 -@import "../utilities/variables";  
2 -  
3 @each $category, $color in $categories { 1 @each $category, $color in $categories {
4 #proposal { 2 #proposal {
5 &-category { 3 &-category {
@@ -48,6 +46,28 @@ @@ -48,6 +46,28 @@
48 background-repeat: no-repeat; 46 background-repeat: no-repeat;
49 background-size: 32px; 47 background-size: 32px;
50 } 48 }
  49 + &-content {
  50 + border-color: $color;
  51 + }
  52 + }
  53 + .show_body {
  54 + background-color: darken($color, 12%);
  55 + border-color: $color;
  56 + span {
  57 + background-color: darken($color, 12%);
  58 + }
  59 + }
  60 + .container {
  61 + &-title {
  62 + color: $color;
  63 + }
  64 + }
  65 + .send {
  66 + &-button {
  67 + a {
  68 + background-color: $color;
  69 + }
  70 + }
51 } 71 }
52 } 72 }
53 } 73 }
54 \ No newline at end of file 74 \ No newline at end of file
sass/novo/_proposal_categories.scss
  Diff comments   View file @41911f3
1 -@import "utilities/variables";  
2 -  
3 @each $category, $description in $categories-descriptions { 1 @each $category, $description in $categories-descriptions {
4 .proposal-category-items-#{$category} .description:before { 2 .proposal-category-items-#{$category} .description:before {
5 color: #fff; 3 color: #fff;
sass/novo/_proposal_detail.scss
  Diff comments   View file @41911f3
1 .proposal { 1 .proposal {
2 &-detail { 2 &-detail {
3 .proposal { 3 .proposal {
4 - &-category {  
5 - background-color: #000;  
6 - border-top: 0;  
7 - display: block;  
8 - margin-right: 0;  
9 - padding-top: 0;  
10 - text-align: left;  
11 - }  
12 &-link { 4 &-link {
13 border-radius: 0; 5 border-radius: 0;
14 - font-size: $category-title-size; 6 + font-size: $category-select-size;
15 padding: 15px 35px; 7 padding: 15px 35px;
16 text-transform: uppercase; 8 text-transform: uppercase;
17 vertical-align: middle; 9 vertical-align: middle;
18 width: auto; 10 width: auto;
19 } 11 }
20 } 12 }
21 - } 13 + }
22 &-selection { 14 &-selection {
  15 + background-color: #EEEFF1;
  16 + border: 0;
  17 + float: right;
  18 + font-size: $default-font-size;
  19 + font-weight: 300;
23 height: 57px; 20 height: 57px;
  21 + margin: 0;
  22 + text-transform: uppercase;
24 width: 60%; 23 width: 60%;
25 -  
26 } 24 }
  25 + &-header {
  26 + position: relative;
  27 + }
  28 + &-container {
  29 + display: block;
  30 + float: left;
  31 + margin-bottom: $default-spacing-size;
  32 + width: 50%;
  33 + }
  34 + &-content {
  35 + border: 1px solid #000;
  36 + height: $container-height;
  37 + padding: $default-spacing-size;
  38 + }
  39 +}
  40 +.category {
  41 + background-color: #000;
  42 + border-top: 0;
  43 + display: block;
  44 + margin-bottom: 0;
  45 + margin-right: 0;
  46 + padding-top: 0;
  47 + text-align: left;
27 } 48 }
28 -  
29 .select { 49 .select {
30 padding-left: 0; 50 padding-left: 0;
  51 +}
  52 +.btn {
  53 + border: 1px solid;
  54 + display: inline-block;
  55 + font-size: $small-font-size;
  56 + line-height: 3.1;
  57 + padding: 6px 12px;
  58 + &-default {
  59 + background-color: #fff;
  60 + }
  61 +}
  62 +.abstract {
  63 + img {
  64 + width: 100%;
  65 + }
  66 + p {
  67 + background-color: #000;
  68 + bottom: 140px;
  69 + color: #fff;
  70 + font-size: $small-font-size;
  71 + padding: 5px 20px 20px 20px;
  72 + position: absolute;
  73 + right: 0;
  74 + text-align: center;
  75 + width: 50%;
  76 + }
  77 +}
  78 +.title {
  79 + background-color: #000;
  80 + bottom: 170px;
  81 + color: #fff;
  82 + font-size: $detail-title-size;
  83 + font-weight: 700;
  84 + padding: $default-spacing-size $default-spacing-size 0;
  85 + position: absolute;
  86 + right: 0;
  87 + text-align: center;
  88 + text-transform: uppercase;
  89 + width: 50%;
  90 +}
  91 +.show_body {
  92 + background: #000 url("images/black-alpha.png") no-repeat;
  93 + border-top: 5px solid;
  94 + padding: 30px 0;
  95 + margin: 10px auto;
  96 + a {
  97 + background: url("images/white-line.png") left center repeat-x;
  98 + color: #fff;
  99 + display: block;
  100 + font-size: $detail-proposal-size;
  101 + font-weight: 700;
  102 + margin: auto;
  103 + text-align: center;
  104 + text-transform: uppercase;
  105 + width: 70%;
  106 + }
  107 + span {
  108 + padding: 5px 15px;
  109 + }
  110 +}
  111 +.container {
  112 + &-title {
  113 + color: #000;
  114 + font-size: $detail-proposal-size;
  115 + margin-bottom: $default-spacing-size;
  116 + }
  117 +}
  118 +.subtitle {
  119 + color: $header-color;
  120 + font-size: $proposal-link-size;
  121 + font-weight: 700;
  122 + margin-bottom: $default-spacing-size;
  123 +}
  124 +.info {
  125 + font-size: $small-font-size;
  126 + font-weight: 300;
  127 +}
  128 +.send {
  129 + &-button {
  130 + a {
  131 + background-color: #000;
  132 + border-radius: $default-radius-size;
  133 + color: #fff;
  134 + display: block;
  135 + margin: auto;
  136 + padding: $default-spacing-size 0;
  137 + text-align: center;
  138 + text-transform: uppercase;
  139 + width: 60%;
  140 + span {
  141 + padding-left: 20px;
  142 + background-image: url("images/airplane.png");
  143 + background-position: 0 50%;
  144 + background-repeat: no-repeat;
  145 + }
  146 + }
  147 + }
  148 +}
  149 +.make {
  150 + &-proposal {
  151 + margin-right: $default-spacing-size - 10;
  152 + }
  153 +}
  154 +.support {
  155 + &-proposal {
  156 + margin-left: $default-spacing-size - 10;
  157 + }
  158 +}
  159 +.experience {
  160 + &-proposal {
  161 + margin-right: $default-spacing-size - 10;
  162 + }
  163 +}
  164 +.talk {
  165 + &-proposal {
  166 + margin-left: $default-spacing-size - 10;
  167 + }
31 } 168 }
32 \ No newline at end of file 169 \ No newline at end of file
sass/novo/_variables.scss
  Diff comments   View file @41911f3
@@ -5,10 +5,13 @@ $default-color: #172938; @@ -5,10 +5,13 @@ $default-color: #172938;
5 5
6 // font sizes 6 // font sizes
7 $default-font-size: 16px; 7 $default-font-size: 16px;
8 -$small-font-size: $default-font-size - 2; 8 +$small-font-size: 14px;
9 $header-h1-size: 28px; 9 $header-h1-size: 28px;
10 $category-title-size: 18px; 10 $category-title-size: 18px;
  11 +$category-select-size: 19px;
11 $proposal-link-size: 24px; 12 $proposal-link-size: 24px;
  13 +$detail-title-size: 32px;
  14 +$detail-proposal-size: 38px;
12 15
13 // radius sizes 16 // radius sizes
14 $default-radius-size: 7px; 17 $default-radius-size: 7px;