Compare View

switch
from
...
to
 
Commits (16)
src/app/layout.scss
1 1 .row-height {
2   - display: table;
3   - table-layout: fixed;
4   - height: 100%;
5   - width: 100%;
  2 + display: table;
  3 + table-layout: fixed;
  4 + height: 100%;
  5 + width: 100%;
6 6 }
7 7  
8 8 .col-height {
9   - display: table-cell;
10   - float: none;
11   - height: 100%;
  9 + display: table-cell;
  10 + float: none;
  11 + height: 100%;
12 12 }
13 13  
14 14 .col-top {
15   - vertical-align: top;
  15 + vertical-align: top;
16 16 }
17 17  
18 18 .col-middle {
19   - vertical-align: middle;
  19 + vertical-align: middle;
20 20 }
21 21  
22 22 .col-bottom {
23   - vertical-align: bottom;
  23 + vertical-align: bottom;
24 24 }
25 25  
26 26 // @media (min-width: 480px) {
27   - .row-xs-height {
  27 +.row-xs-height {
28 28 display: table;
29 29 table-layout: fixed;
30 30 height: 100%;
31 31 width: 100%;
32   - }
  32 +}
33 33  
34   - .col-xs-height {
  34 +.col-xs-height {
35 35 display: table-cell;
36 36 float: none;
37 37 height: 100%;
38   - }
  38 +}
39 39  
40   - .col-xs-top {
  40 +.col-xs-top {
41 41 vertical-align: top;
42   - }
  42 +}
43 43  
44   - .col-xs-middle {
  44 +.col-xs-middle {
45 45 vertical-align: middle;
46   - }
  46 +}
47 47  
48   - .col-xs-bottom {
  48 +.col-xs-bottom {
49 49 vertical-align: bottom;
50   - }
  50 +}
51 51  
52 52 // }
53 53 @media (min-width: 768px) {
54   - .row-sm-height {
55   - display: table;
56   - table-layout: fixed;
57   - height: 100%;
58   - width: 100%;
59   - }
60   - .col-sm-height {
61   - display: table-cell;
  54 + .row-sm-height {
  55 + display: table;
  56 + table-layout: fixed;
  57 + height: 100%;
  58 + width: 100%;
  59 + }
  60 + .col-sm-height {
  61 + display: table-cell;
62 62 // float: none;
63 63 height: 100%;
64   - }
65   - .col-sm-top {
  64 + }
  65 + .col-sm-top {
66 66 vertical-align: top;
67   - }
68   - .col-sm-middle {
  67 + }
  68 + .col-sm-middle {
69 69 vertical-align: middle;
70   - }
71   - .col-sm-bottom {
  70 + }
  71 + .col-sm-bottom {
72 72 vertical-align: bottom;
73   - }
74 73 }
  74 +}
75 75  
76   - @media (min-width: 992px) {
77   - .row-md-height {
  76 +@media (min-width: 992px) {
  77 + .row-md-height {
78 78 display: table;
79 79 table-layout: fixed;
80 80 height: 100%;
81 81 width: 100%;
82   - }
83   - .col-md-height {
  82 + }
  83 + .col-md-height {
84 84 display: table-cell;
85 85 // float: none;
86 86 height: 100%;
87   - }
88   - .col-md-top {
  87 + }
  88 + .col-md-top {
89 89 vertical-align: top;
90   - }
91   - .col-md-middle {
  90 + }
  91 + .col-md-middle {
92 92 vertical-align: middle;
93   - }
94   - .col-md-bottom {
  93 + }
  94 + .col-md-bottom {
95 95 vertical-align: bottom;
96   - }
97 96 }
  97 +}
98 98  
99   - @media (min-width: 1200px) {
100   - .row-lg-height {
  99 +@media (min-width: 1200px) {
  100 + .row-lg-height {
101 101 display: table;
102 102 table-layout: fixed;
103 103 height: 100%;
104 104 width: 100%;
105   - }
106   - .col-lg-height {
  105 + }
  106 + .col-lg-height {
107 107 display: table-cell;
108 108 // float: none;
109 109 height: 100%;
110   - }
111   - .col-lg-top {
  110 + }
  111 + .col-lg-top {
112 112 vertical-align: top;
113   - }
114   - .col-lg-middle {
  113 + }
  114 + .col-lg-middle {
115 115 vertical-align: middle;
116   - }
117   - .col-lg-bottom {
  116 + }
  117 + .col-lg-bottom {
118 118 vertical-align: bottom;
119   - }
120 119 }
  120 +}
121 121  
122   - .vcenter {
123   - display: inline-block;
124   - vertical-align: middle;
125   - float: none;
126   - margin-right: -2px;
127   - margin-left: -2px;
128   - }
  122 +.vcenter {
  123 + display: inline-block;
  124 + vertical-align: middle;
  125 + float: none;
  126 + margin-right: -2px;
  127 + margin-left: -2px;
  128 +}
129 129  
130   - .vertical-padding {
131   - padding-top: 15px;
132   - padding-bottom: 15px;
133   - }
  130 +.vertical-padding {
  131 + padding-top: 15px;
  132 + padding-bottom: 15px;
  133 +}
134 134  
135   - .no-space-left {
136   - margin-left: 0;
137   - padding-left: 0;
138   - }
  135 +.no-space-left {
  136 + margin-left: 0;
  137 + padding-left: 0;
  138 +}
139 139  
140   - .no-space-right {
141   - margin-right: 0;
142   - padding-right: 0;
143   - }
  140 +.no-space-right {
  141 + margin-right: 0;
  142 + padding-right: 0;
  143 +}
144 144  
145   - .text-center-sm {
146   - @media screen and (max-width: $screen-sm) {
  145 +.text-center-sm {
  146 + @media screen and (max-width: $screen-sm) {
147 147 text-align: center;
148   - }
149 148 }
  149 +}
150 150  
151   - .btn-submit {
152   - background-color: $defaultblue;
153   - color: #fff;
154   - font-weight: bold;
155   - &:hover,
156   - &:focus {
  151 +.btn-submit {
  152 + background-color: $defaultblue;
  153 + color: #fff;
  154 + font-weight: bold;
  155 + &:hover,
  156 + &:focus {
157 157 color: #fff;
158   - }
159 158 }
  159 +}
160 160  
161   - .has-error {
162   - border-color: #FF0000;
163   - border-width: 1px;
164   - }
  161 +.has-error {
  162 + border-color: #FF0000;
  163 + border-width: 1px;
  164 +}
165 165  
166 166 // Está com o nome do termos de uso. Deixas genérico ou apenas aqui? Ver como vão ficar esses modais
167 167 .modal-termos-uso {
168   - &-header {
169   - border-bottom: none;
170   - padding: 0px;
171   - min-height: 10px;
172   - border-bottom: none;
173   - padding: 0px;
174   - position: relative;
175   - top: -30px;
176   - right: 0px;
177   - }
178   - &-body {
179   - padding: 25px 35px;
180   - height: 500px;
181   - &-inner {
182   - background-color: lightgray;
183   - overflow-y: auto;
184   - padding: 15px;
185   - height: 440px;
186   - }
187   - }
  168 + &-header {
  169 + border-bottom: none;
  170 + padding: 0px;
  171 + min-height: 10px;
  172 + border-bottom: none;
  173 + padding: 0px;
  174 + position: relative;
  175 + top: -30px;
  176 + right: 0px;
  177 + }
  178 + &-body {
  179 + padding: 25px 35px;
  180 + height: 500px;
  181 + &-inner {
  182 + background-color: lightgray;
  183 + overflow-y: auto;
  184 + padding: 15px;
  185 + height: 440px;
  186 + }
  187 + }
188 188 }
189 189  
190 190 .modal-fechar-pequeno {
191   - font-size: 15px;
  191 + font-size: 15px;
192 192 }
193 193  
194 194 .modal-fechar-grande {
195   - font-size: 24px;
  195 + font-size: 24px;
196 196 }
197 197  
198 198 .btn-question {
199   - color: #484848;
200   - background-color: #fff;
201   - display: inline-block;
202   - text-align: center;
203   - width: 22px;
204   - height: 22px;
205   - margin-left: 10px;
206   - padding: 0;
207   - border-radius: 100%;
208   -
209   - &:hover,
210   - &:focus,
211   - &:active {
212   - color: #fff;
213   - border-color: #fff;
214   - }
  199 + color: #484848;
  200 + background-color: #fff;
  201 + display: inline-block;
  202 + text-align: center;
  203 + width: 22px;
  204 + height: 22px;
  205 + margin-left: 10px;
  206 + padding: 0;
  207 + border-radius: 100%;
  208 + &:hover,
  209 + &:focus,
  210 + &:active {
  211 + color: #fff;
  212 + border-color: #fff;
  213 + }
215 214 }
216 215  
217 216 .page--program {
218   - .program-content {
219   - ul {
220   - list-style: none;
221   - padding: 0;
222   - margin: 0;
223   - }
224   -
225   - ul.list-color li:before {
226   - @each $category,
227   - $color in $categories {
228   - .#{$category} & {
229   - color: $color;
  217 + .program-content {
  218 + ul {
  219 + list-style: none;
  220 + padding: 0;
  221 + margin: 0;
  222 + }
  223 + ul.list-color li:before {
  224 + @each $category,
  225 + $color in $categories {
  226 + .#{$category} & {
  227 + color: $color;
  228 + }
  229 + }
  230 + }
  231 + ul li:before {
  232 + content: "\2022";
  233 + font-weight: bold;
  234 + font-size: 12px;
  235 + position: relative;
  236 + padding-right: 4px;
  237 + }
  238 + ul li {
  239 + padding-left: 2em;
  240 + padding-bottom: 15px;
  241 + text-indent: -0.7em;
  242 + }
  243 + .col-middle {
  244 + vertical-align: top;
  245 + }
  246 + @media screen and (min-width: $screen-lg) {
  247 + //FIXME Leandro put this but we have to evaluate all impacts
  248 + // img {
  249 + // width: 100%;
  250 + // }
230 251 }
231   - }
232   - }
233   -
234   - ul li:before {
235   - content: "\2022";
236   - font-weight: bold;
237   - font-size: 12px;
238   - position: relative;
239   - padding-right: 4px;
240   - }
241   -
242   - ul li {
243   - padding-left: 2em;
244   - padding-bottom: 15px;
245   - text-indent: -0.7em;
246   - }
247   -
248   - .col-middle {
249   - vertical-align: top;
250 252 }
251   - @media screen and (min-width: $screen-lg) {
252   -//FIXME Leandro put this but we have to evaluate all impacts
253   -// img {
254   -// width: 100%;
255   -// }
256   -}
257   -}
258 253 }
259 254  
260 255 .destaque-bg-cinza {
261   - background-color: #F1F1F1;
262   - color: #484848;
  256 + background-color: #F1F1F1;
  257 + color: #484848;
263 258 }
264 259  
265 260 .destaque-padding {
266   - padding: 20px;
  261 + padding: 20px;
267 262 }
268 263  
269 264 .destaque-font {
270   - font-size: 130%!important;
271   - line-height: 28px!important;
  265 + font-size: 130%!important;
  266 + line-height: 28px!important;
272 267 }
273 268  
274 269 .font {
275   - line-height: 28px!important;
276   -
277   - &-140 {
278   - @extend .font;
279   - font-size: 140%!important;
280   - }
281   -
282   - &-115 {
283   - @extend .font;
284   - font-size: 115%!important;
285   - }
286   -
287   - &-180 {
288   - @extend .font;
289   - font-size: 180%!important;
290   - }
  270 + line-height: 28px!important;
  271 + &-140 {
  272 + @extend .font;
  273 + font-size: 140%!important;
  274 + }
  275 + &-115 {
  276 + @extend .font;
  277 + font-size: 115%!important;
  278 + }
  279 + &-180 {
  280 + @extend .font;
  281 + font-size: 180%!important;
  282 + }
291 283 }
292 284  
293 285 .destaque-bg-lightgray {
294   - background-color: #F8F8F8;
  286 + background-color: #F8F8F8;
295 287 }
296 288  
297 289 .margin-15 {
298   - margin-left: 15px;
299   - margin-right: 15px;
  290 + margin-left: 15px;
  291 + margin-right: 15px;
300 292 }
301 293  
302 294 .left-border-gray {
303   - border-left: 2px solid #d1d6d9;
304   - margin-bottom: 10px;
305   - ul.list-color li:last-child {
306   - padding-bottom: 0;
307   - }
308   - @media (max-width: 768px) {
309   - border: none;
310   - }
  295 + border-left: 2px solid #d1d6d9;
  296 + margin-bottom: 10px;
  297 + ul.list-color li:last-child {
  298 + padding-bottom: 0;
  299 + }
  300 + @media (max-width: 768px) {
  301 + border: none;
  302 + }
311 303 }
312 304  
313 305 .bottom-border-gray {
314   - border-bottom: 1px lightgray;
315   - border-bottom-style: solid;
316   - margin: 0px!important;
317   - padding: 30px;
  306 + border-bottom: 1px lightgray;
  307 + border-bottom-style: solid;
  308 + margin: 0px!important;
  309 + padding: 30px;
318 310 }
319 311  
320 312 .padding-30 {
321   - padding: 30px;
  313 + padding: 30px;
322 314 }
323 315  
324 316 a.link-black {
325   - color: black;
  317 + color: black;
326 318 }
327 319  
328 320 .inline-block {
329   - display: inline-block;
  321 + display: inline-block;
330 322 }
331 323  
332 324 .close {
333   - color: white;
334   - opacity: 1;
335   - font-weight: normal;
  325 + color: white;
  326 + opacity: 1;
  327 + font-weight: normal;
336 328 }
337 329  
338 330 blockquote {
339   - border-left: medium none;
340   - padding-left: 0;
341   - margin: 0px;
342   - border-left: none;
343   -
344   - .content-highlight-icon {
345   - // &:before {
346   - // content: "";
347   - width: 110px;
348   - height: 112px;
349   - position: absolute;
350   - display: inline-block;
351   - opacity: .5;
352   -
353   - @each $category,
354   - $color in $categories {
355   - .#{$category} & {
356   - border-left: 34px solid $color;
357   - border-top: 33px solid $color;
  331 + border-left: medium none;
  332 + padding-left: 0;
  333 + margin: 0px;
  334 + border-left: none;
  335 + .content-highlight-icon {
  336 + // &:before {
  337 + // content: "";
  338 + width: 110px;
  339 + height: 112px;
  340 + position: absolute;
  341 + display: inline-block;
  342 + opacity: .5;
  343 + @each $category,
  344 + $color in $categories {
  345 + .#{$category} & {
  346 + border-left: 34px solid $color;
  347 + border-top: 33px solid $color;
  348 + }
  349 + }
  350 + }
  351 + p {
  352 + margin-left: 60px;
  353 + &:first-of-type {
  354 + padding-top: 50px;
  355 + }
358 356 }
359   - }
360   -}
361   -
362   -p {
363   - margin-left: 60px;
364   -
365   - &:first-of-type {
366   - padding-top: 50px;
367   - }
368   -}
369   -
370 357 }
371 358  
372 359 .page--program .program-content blockquote,
373 360 .page--program .program-content blockquote p {
374   - font-size: 24px;
375   - line-height: 28px;
  361 + font-size: 24px;
  362 + line-height: 28px;
376 363 }
377 364  
378 365 .top-border-theme {
379   - @each $category,
380   - $color in $categories {
381   - .#{$category} & {
382   - border-color: $color;
  366 + @each $category,
  367 + $color in $categories {
  368 + .#{$category} & {
  369 + border-color: $color;
  370 + }
383 371 }
384   - }
385   - border-top: 20px solid;
  372 + border-top: 20px solid;
386 373 }
387 374  
388 375 .pad-right-0 {
389   - padding-right: 0px!important;
  376 + padding-right: 0px!important;
390 377 }
391 378  
392 379 .pad-left-0 {
393   - padding-left: 0px!important;
  380 + padding-left: 0px!important;
394 381 }
395 382  
396 383 .bloco-mais-especialidades {
397   - @media (max-width: 480px) {
398   - padding: 2% 0 0 5%;
399   - }
400   -
401   - @media (min-width: 768px) {
402   - padding: 2% 0 0 10%;
403   - }
404   -
405   - @media (min-width: 992px) {
406   - padding: 12% 0 0 10%;
407   - }
408   -
409   - @media (max-width: 1200px) {
410   - padding: 10% 0 0 10%;
411   - }
  384 + @media (max-width: 480px) {
  385 + padding: 2% 0 0 5%;
  386 + }
  387 + @media (min-width: 768px) {
  388 + padding: 2% 0 0 10%;
  389 + }
  390 + @media (min-width: 992px) {
  391 + padding: 12% 0 0 10%;
  392 + }
  393 + @media (max-width: 1200px) {
  394 + padding: 10% 0 0 10%;
  395 + }
412 396 }
413 397  
414 398 ul li:last-child {
415   - padding-bottom: 0px!important;
  399 + padding-bottom: 0px!important;
416 400 }
417 401  
418 402 // .destaque-esporte ul li {
419 403 // padding-bottom: 2px!important;
420 404 // }
421   -
422 405 .bloco1-preparacao-atletas {
423   - @media (max-width: 480px) {
424   - padding: 2% 0 0 5%;
425   - }
426   -
427   - @media (min-width: 768px) {
428   - padding: 2% 0 0 10%;
429   - }
430   -
431   - @media (min-width: 992px) {
432   - padding: 2% 10% 0 10%;
433   - }
434   -
435   - @media (min-width: 1200px) {
436   - padding: 17% 10% 0 10%;
437   - }
  406 + @media (max-width: 480px) {
  407 + padding: 2% 0 0 5%;
  408 + }
  409 + @media (min-width: 768px) {
  410 + padding: 2% 0 0 10%;
  411 + }
  412 + @media (min-width: 992px) {
  413 + padding: 2% 10% 0 10%;
  414 + }
  415 + @media (min-width: 1200px) {
  416 + padding: 17% 10% 0 10%;
  417 + }
438 418 }
439 419  
440 420 .bloco2-preparacao-atletas {
441   - @media (min-width: 1200px) {
442   - padding-top: 10%;
443   - }
  421 + @media (min-width: 1200px) {
  422 + padding-top: 10%;
  423 + }
444 424 }
445 425  
446 426 .bloco1-futebol {
447   - @media (min-width: 992px) {
448   - padding: 14% 5% 0 5%;
449   - }
450   -
451   - @media (max-width: 1199px) {
452   - padding-top: 6%;
453   - }
454   -
455   - @media (max-width: 992px) {
456   - font-size: 77%;
457   - padding: 20px 10px 0px 10px;
458   - }
459   -
460   - @media (max-width: 767px) {
461   - font-size: 100%;
462   - padding: 20px 20px 10px 20px;
463   - }
  427 + @media (min-width: 992px) {
  428 + padding: 14% 5% 0 5%;
  429 + }
  430 + @media (max-width: 1199px) {
  431 + padding-top: 6%;
  432 + }
  433 + @media (max-width: 992px) {
  434 + font-size: 77%;
  435 + padding: 20px 10px 0px 10px;
  436 + }
  437 + @media (max-width: 767px) {
  438 + font-size: 100%;
  439 + padding: 20px 20px 10px 20px;
  440 + }
464 441 }
465 442  
466 443 .bloco1-esporte-toda-vida {
467   - @media (max-width: 992px) {
468   - padding-top: 10%;
469   - }
470   -
471   - @media (min-width: 992px) {
472   - padding-top: 10%;
473   - }
474   -
475   - @media (min-width: 1200px) {
476   - padding-top: 10%;
477   - }
  444 + @media (max-width: 992px) {
  445 + padding-top: 10%;
  446 + }
  447 + @media (min-width: 992px) {
  448 + padding-top: 10%;
  449 + }
  450 + @media (min-width: 1200px) {
  451 + padding-top: 10%;
  452 + }
478 453 }
479 454  
480 455 .bloco2-esporte-toda-vida {
481   - @media (max-width: 992px) {
482   - padding-top: 10%;
483   - padding-left: 5%;
484   - }
485   -
486   - @media (min-width: 992px) {
487   - padding-top: 10%;
488   - padding-left: 5%;
489   - }
490   -
491   - @media (min-width: 1200px) {
492   - padding-top: 10%;
493   - padding-left: 5%;
494   - }
  456 + @media (max-width: 992px) {
  457 + padding-top: 10%;
  458 + padding-left: 5%;
  459 + }
  460 + @media (min-width: 992px) {
  461 + padding-top: 10%;
  462 + padding-left: 5%;
  463 + }
  464 + @media (min-width: 1200px) {
  465 + padding-top: 10%;
  466 + padding-left: 5%;
  467 + }
495 468 }
496 469  
497 470 .bloco-mais-medicos {
498   - background-color: #3D4AB3;
499   - padding-top: 25px;
  471 + background-color: #3D4AB3;
  472 + padding-top: 25px;
500 473 }
501 474  
502 475 .img-full {
503   - @media (min-width: 1199px) {
504   - width: 100%;
505   - height: 100%;
506   - }
  476 + @media (min-width: 1199px) {
  477 + width: 100%;
  478 + height: 100%;
  479 + }
507 480 }
508 481  
509   -.middle-row{
510   - @media (min-width: 768px) {
511   - display: table;
512   - table-layout: fixed;
513   - }
  482 +.middle-row {
  483 + @media (min-width: 768px) {
  484 + display: table;
  485 + table-layout: fixed;
  486 + }
514 487 }
515 488  
516   -.middle-col{
517   - @media (min-width: 768px) {
518   - display: table-cell;
519   - vertical-align: middle;
520   - float: none;
521   - }
  489 +.middle-col {
  490 + @media (min-width: 768px) {
  491 + display: table-cell;
  492 + vertical-align: middle;
  493 + float: none;
  494 + }
522 495 }
523 496  
524 497 // Links grandes quebram a linha em telas pequenas
525 498 a {
526   - white-space: pre-wrap; /* css-3 */
527   - white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
528   - white-space: -pre-wrap; /* Opera 4-6 */
529   - white-space: -o-pre-wrap; /* Opera 7 */
530   - word-wrap: break-word; /* Internet Explorer 5.5+ */
531   -}
532 499 \ No newline at end of file
  500 + white-space: pre-wrap;
  501 + /* css-3 */
  502 + white-space: -moz-pre-wrap;
  503 + /* Mozilla, since 1999 */
  504 + white-space: -pre-wrap;
  505 + /* Opera 4-6 */
  506 + white-space: -o-pre-wrap;
  507 + /* Opera 7 */
  508 + word-wrap: break-word;
  509 + /* Internet Explorer 5.5+ */
  510 +}
  511 +
  512 +// correção para problema na barra-brasil
  513 +div.brasil-flag > a {
  514 + word-wrap: normal;
  515 +}
... ...