Download as
Browse Code »

Commit 37da4819d2df956615290d810851bc2e3c2c2747

Authored by Leonardo Merlin
2 parents 4702aeaf 17068521
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Merge branch 'rafael' into merlin

Showing 1 changed file with 233 additions and 130 deletions   Show diff stats
src/app/layout.scss
  Diff comments   View file @37da481
... ... @@ -25,140 +25,144 @@
25 25 }
26 26  
27 27 // @media (min-width: 480px) {
28   -.row-xs-height {
29   - display: table;
30   - table-layout: fixed;
31   - height: 100%;
32   - width: 100%;
33   -}
34   -.col-xs-height {
35   - display: table-cell;
36   - float: none;
37   - height: 100%;
38   -}
39   -.col-xs-top {
40   - vertical-align: top;
41   -}
42   -.col-xs-middle {
43   - vertical-align: middle;
44   -}
45   -.col-xs-bottom {
46   - vertical-align: bottom;
47   -}
48   -// }
49   -
50   -@media (min-width: 768px) {
51   - .row-sm-height {
  28 + .row-xs-height {
52 29 display: table;
53 30 table-layout: fixed;
54 31 height: 100%;
55 32 width: 100%;
56 33 }
57   - .col-sm-height {
58   - display: table-cell;
59   - float: none;
60   - height: 100%;
61   - }
62   - .col-sm-top {
63   - vertical-align: top;
64   - }
65   - .col-sm-middle {
66   - vertical-align: middle;
67   - }
68   - .col-sm-bottom {
69   - vertical-align: bottom;
70   - }
71   -}
72 34  
73   -@media (min-width: 992px) {
74   - .row-md-height {
75   - display: table;
76   - table-layout: fixed;
77   - height: 100%;
78   - width: 100%;
79   - }
80   - .col-md-height {
  35 + .col-xs-height {
81 36 display: table-cell;
82 37 float: none;
83 38 height: 100%;
84 39 }
85   - .col-md-top {
  40 +
  41 + .col-xs-top {
86 42 vertical-align: top;
87 43 }
88   - .col-md-middle {
  44 +
  45 + .col-xs-middle {
89 46 vertical-align: middle;
90 47 }
91   - .col-md-bottom {
  48 +
  49 + .col-xs-bottom {
92 50 vertical-align: bottom;
93 51 }
94   -}
95 52  
96   -@media (min-width: 1200px) {
97   - .row-lg-height {
  53 +// }
  54 +@media (min-width: 768px) {
  55 + .row-sm-height {
98 56 display: table;
99 57 table-layout: fixed;
100 58 height: 100%;
101 59 width: 100%;
102 60 }
103   - .col-lg-height {
  61 + .col-sm-height {
104 62 display: table-cell;
105   - float: none;
106   - height: 100%;
107   - }
108   - .col-lg-top {
109   - vertical-align: top;
110   - }
111   - .col-lg-middle {
112   - vertical-align: middle;
113   - }
114   - .col-lg-bottom {
115   - vertical-align: bottom;
116   - }
117   -}
  63 + // float: none;
  64 + height: 100%;
  65 + }
  66 + .col-sm-top {
  67 + vertical-align: top;
  68 + }
  69 + .col-sm-middle {
  70 + vertical-align: middle;
  71 + }
  72 + .col-sm-bottom {
  73 + vertical-align: bottom;
  74 + }
  75 + }
118 76  
119   -.vcenter {
120   - display: inline-block;
121   - vertical-align: middle;
122   - float: none;
123   - margin-right: -2px;
124   - margin-left: -2px;
125   -}
  77 + @media (min-width: 992px) {
  78 + .row-md-height {
  79 + display: table;
  80 + table-layout: fixed;
  81 + height: 100%;
  82 + width: 100%;
  83 + }
  84 + .col-md-height {
  85 + display: table-cell;
  86 + // float: none;
  87 + height: 100%;
  88 + }
  89 + .col-md-top {
  90 + vertical-align: top;
  91 + }
  92 + .col-md-middle {
  93 + vertical-align: middle;
  94 + }
  95 + .col-md-bottom {
  96 + vertical-align: bottom;
  97 + }
  98 + }
126 99  
127   -.vertical-padding {
128   - padding-top: 15px;
129   - padding-bottom: 15px;
130   -}
  100 + @media (min-width: 1200px) {
  101 + .row-lg-height {
  102 + display: table;
  103 + table-layout: fixed;
  104 + height: 100%;
  105 + width: 100%;
  106 + }
  107 + .col-lg-height {
  108 + display: table-cell;
  109 + // float: none;
  110 + height: 100%;
  111 + }
  112 + .col-lg-top {
  113 + vertical-align: top;
  114 + }
  115 + .col-lg-middle {
  116 + vertical-align: middle;
  117 + }
  118 + .col-lg-bottom {
  119 + vertical-align: bottom;
  120 + }
  121 + }
131 122  
132   -.no-space-left {
133   - margin-left: 0;
134   - padding-left: 0;
135   -}
  123 + .vcenter {
  124 + display: inline-block;
  125 + vertical-align: middle;
  126 + float: none;
  127 + margin-right: -2px;
  128 + margin-left: -2px;
  129 + }
136 130  
137   -.no-space-right {
138   - margin-right: 0;
139   - padding-right: 0;
140   -}
  131 + .vertical-padding {
  132 + padding-top: 15px;
  133 + padding-bottom: 15px;
  134 + }
141 135  
142   -.text-center-sm {
143   - @media screen and (max-width: $screen-sm) {
144   - text-align: center;
145   - }
146   -}
  136 + .no-space-left {
  137 + margin-left: 0;
  138 + padding-left: 0;
  139 + }
147 140  
148   -.btn-submit {
149   - background-color: $defaultblue;
150   - color: #fff;
151   - font-weight: bold;
152   - &:hover,
153   - &:focus {
154   - color: #fff;
155   - }
156   -}
  141 + .no-space-right {
  142 + margin-right: 0;
  143 + padding-right: 0;
  144 + }
157 145  
158   -.has-error {
159   - border-color: #FF0000;
160   - border-width: 1px;
161   -}
  146 + .text-center-sm {
  147 + @media screen and (max-width: $screen-sm) {
  148 + text-align: center;
  149 + }
  150 + }
  151 +
  152 + .btn-submit {
  153 + background-color: $defaultblue;
  154 + color: #fff;
  155 + font-weight: bold;
  156 + &:hover,
  157 + &:focus {
  158 + color: #fff;
  159 + }
  160 + }
  161 +
  162 + .has-error {
  163 + border-color: #FF0000;
  164 + border-width: 1px;
  165 + }
162 166  
163 167 // Está com o nome do termos de uso. Deixas genérico ou apenas aqui? Ver como vão ficar esses modais
164 168 .modal-termos-uso {
... ... @@ -229,23 +233,21 @@ ul.list-color li:before {
229 233 }
230 234  
231 235 .page--program {
232   - .program-content {
233   - ul li {
234   - padding-left: 2em;
235   - padding-bottom: 15px;
236   - text-indent: -0.7em;
237   - }
238   -
239   - .col-middle {
240   - vertical-align: top;
241   - }
242   -
243   - @media screen and (min-width: $screen-lg) {
244   - img {
245   - width: 100%;
246   - }
247   - }
  236 + .program-content {
  237 + ul li {
  238 + padding-left: 2em;
  239 + padding-bottom: 15px;
  240 + text-indent: -0.7em;
248 241 }
  242 + .col-middle {
  243 + vertical-align: top;
  244 + }
  245 + @media screen and (min-width: $screen-lg) {
  246 + img {
  247 + width: 100%;
  248 + }
  249 + }
  250 + }
249 251 }
250 252  
251 253 .destaque-bg-cinza {
... ... @@ -258,19 +260,26 @@ ul.list-color li:before {
258 260 }
259 261  
260 262 .destaque-font {
261   - font-size: 130%;
  263 + font-size: 130%!important;
262 264 }
263 265  
264   -.font-140 {
265   - font-size: 140%;
266   -}
  266 +.font {
  267 + line-height: normal!important;
267 268  
268   -.font-115 {
269   - font-size: 115%;
270   -}
  269 + &-140 {
  270 + @extend .font;
  271 + font-size: 140%!important;
  272 + }
271 273  
272   -.font-180 {
273   - font-size: 180%;
  274 + &-115 {
  275 + @extend .font;
  276 + font-size: 115%!important;
  277 + }
  278 +
  279 + &-180 {
  280 + @extend .font;
  281 + font-size: 180%!important;
  282 + }
274 283 }
275 284  
276 285 .destaque-bg-lightgray {
... ... @@ -333,7 +342,8 @@ blockquote {
333 342 top: -10px;
334 343 left: -10px;
335 344 font-weight: bolder;
336   - @each $category, $color in $categories {
  345 + @each $category,
  346 + $color in $categories {
337 347 .#{$category} & {
338 348 color: $color;
339 349 }
... ... @@ -341,6 +351,7 @@ blockquote {
341 351 }
342 352  
343 353 }
  354 +
344 355 .page--program .program-content blockquote,
345 356 .page--program .program-content blockquote p {
346 357 font-size: 24px;
... ... @@ -356,3 +367,95 @@ blockquote {
356 367 }
357 368 border-top: 20px solid;
358 369 }
  370 +
  371 +.pad-right-0 {
  372 + padding-right: 0px!important;
  373 +}
  374 +
  375 +.pad-left-0 {
  376 + padding-left: 0px!important;
  377 +}
  378 +
  379 +.bloco-mais-especialidades {
  380 + @media (max-width: 480px) {
  381 + padding: 2% 0 0 5%;
  382 + }
  383 +
  384 + @media (min-width: 768px) {
  385 + padding: 2% 0 0 10%;
  386 + }
  387 +
  388 + @media (min-width: 992px) {
  389 + padding: 12% 0 0 10%;
  390 + }
  391 +
  392 + @media (max-width: 1200px) {
  393 + padding: 10% 0 0 10%;
  394 + }
  395 +}
  396 +
  397 +ul li:last-child {
  398 + padding-bottom: 0px!important;
  399 +}
  400 +
  401 +// .destaque-esporte ul li {
  402 +// padding-bottom: 2px!important;
  403 +// }
  404 +
  405 +.bloco1-preparacao-atletas {
  406 + @media (max-width: 480px) {
  407 + padding: 2% 0 0 5%;
  408 + }
  409 +
  410 + @media (min-width: 768px) {
  411 + padding: 2% 0 0 10%;
  412 + }
  413 +
  414 + @media (min-width: 992px) {
  415 + padding: 2% 10% 0 10%;
  416 + }
  417 +
  418 + @media (min-width: 1200px) {
  419 + padding: 17% 10% 0 10%;
  420 + }
  421 +}
  422 +
  423 +.bloco2-preparacao-atletas {
  424 + @media (min-width: 1200px) {
  425 + padding: 15% 0% 0 0%;
  426 + }
  427 +}
  428 +
  429 +.bloco1-futebol {
  430 + @media (min-width: 992px) {
  431 + padding: 3% 5% 0 5%;
  432 + }
  433 +}
  434 +
  435 +.bloco1-esporte-toda-vida {
  436 + @media (max-width: 992px) {
  437 + padding: 5% 10% 0 10%;
  438 + }
  439 +
  440 + @media (min-width: 992px) {
  441 + padding: 10% 10% 0 10%;
  442 + }
  443 +
  444 + @media (min-width: 1200px) {
  445 + padding: 18% 10% 0 10%;
  446 + }
  447 +}
  448 +
  449 +.bloco2-esporte-toda-vida {
  450 + @media (max-width: 992px) {
  451 + padding: 5% 10% 0 10%;
  452 + }
  453 +
  454 + @media (min-width: 992px) {
  455 + padding: 10% 10% 0 10%;
  456 + }
  457 +
  458 + @media (min-width: 1200px) {
  459 + padding: 18% 10% 0 10%;
  460 + }
  461 +}
... ...