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
novo.css
  Diff comments   View file @41911f3
... ... @@ -175,27 +175,143 @@ nav ul {
175 175 #search-input-container {
176 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 178 .proposal-detail .proposal-link {
186 179 border-radius: 0;
187   - font-size: 18px;
  180 + font-size: 19px;
188 181 padding: 15px 35px;
189 182 text-transform: uppercase;
190 183 vertical-align: middle;
191 184 width: auto; }
192 185 .proposal-selection {
  186 + background-color: #EEEFF1;
  187 + border: 0;
  188 + float: right;
  189 + font-size: 16px;
  190 + font-weight: 300;
193 191 height: 57px;
  192 + margin: 0;
  193 + text-transform: uppercase;
194 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 216 .select {
197 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 315 #proposal-category-saude .proposal-link {
200 316 background-color: #00a9bd;
201 317 background-image: url(./images/icons/saude.png?3);
... ... @@ -222,6 +338,17 @@ li.category-saude {
222 338 background-position: 0 50%;
223 339 background-repeat: no-repeat;
224 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 353 #proposal-category-seguranca .proposal-link {
227 354 background-color: #e34748;
... ... @@ -249,6 +376,17 @@ li.category-seguranca {
249 376 background-position: 0 50%;
250 377 background-repeat: no-repeat;
251 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 391 #proposal-category-educacao .proposal-link {
254 392 background-color: #ffb400;
... ... @@ -276,6 +414,17 @@ li.category-educacao {
276 414 background-position: 0 50%;
277 415 background-repeat: no-repeat;
278 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 429 #proposal-category-reducao-da-pobreza .proposal-link {
281 430 background-color: #51d0b3;
... ... @@ -303,3 +452,14 @@ li.category-reducao-da-pobreza {
303 452 background-position: 0 50%;
304 453 background-repeat: no-repeat;
305 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; }
... ...
novo.html
  Diff comments   View file @41911f3
... ... @@ -112,8 +112,8 @@
112 112 </div>
113 113  
114 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 117 <div class='container-title'>Faça Uma Proposta</div>
118 118 <div class='subtitle'>Qual a sua sugestão para melhorar este programa?</div>
119 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 135 <br style="clear: both;" />
136 136 </div>
137 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 140 <div class='container-title'> Apoie outras propostas</div>
141 141 <div class='subtitle'> Propostas da sociedade</div>
142 142 <div class="random-proposal"></div>
... ... @@ -145,8 +145,8 @@
145 145 </div>
146 146 </div>
147 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 150 <div class='container-title'>Conte sua experiência</div>
151 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 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 167 </div>
168 168 </div>
169 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 172 <div class='container-title'>Fale com os ministros</div>
173 173 <p>Confira as datas e horários disponíveis:</p>
174 174 <ul class='calendar'>
... ...
sass/novo/_colors.scss
  Diff comments   View file @41911f3
1   -@import "../utilities/variables";
2   -
3 1 @each $category, $color in $categories {
4 2 #proposal {
5 3 &-category {
... ... @@ -48,6 +46,28 @@
48 46 background-repeat: no-repeat;
49 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 74 \ No newline at end of file
... ...
sass/novo/_proposal_categories.scss
  Diff comments   View file @41911f3
1   -@import "utilities/variables";
2   -
3 1 @each $category, $description in $categories-descriptions {
4 2 .proposal-category-items-#{$category} .description:before {
5 3 color: #fff;
... ...
sass/novo/_proposal_detail.scss
  Diff comments   View file @41911f3
1 1 .proposal {
2 2 &-detail {
3 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 4 &-link {
13 5 border-radius: 0;
14   - font-size: $category-title-size;
  6 + font-size: $category-select-size;
15 7 padding: 15px 35px;
16 8 text-transform: uppercase;
17 9 vertical-align: middle;
18 10 width: auto;
19 11 }
20 12 }
21   - }
  13 + }
22 14 &-selection {
  15 + background-color: #EEEFF1;
  16 + border: 0;
  17 + float: right;
  18 + font-size: $default-font-size;
  19 + font-weight: 300;
23 20 height: 57px;
  21 + margin: 0;
  22 + text-transform: uppercase;
24 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 49 .select {
30 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 169 \ No newline at end of file
... ...
sass/novo/_variables.scss
  Diff comments   View file @41911f3
... ... @@ -5,10 +5,13 @@ $default-color: #172938;
5 5  
6 6 // font sizes
7 7 $default-font-size: 16px;
8   -$small-font-size: $default-font-size - 2;
  8 +$small-font-size: 14px;
9 9 $header-h1-size: 28px;
10 10 $category-title-size: 18px;
  11 +$category-select-size: 19px;
11 12 $proposal-link-size: 24px;
  13 +$detail-title-size: 32px;
  14 +$detail-proposal-size: 38px;
12 15  
13 16 // radius sizes
14 17 $default-radius-size: 7px;
... ...