Merge branch 'rafael' into merlin

Leonardo Merlin
2 parents 4702aeaf 17068521
Showing 1 changed file with 233 additions and 130 deletions Show diff stats
src/app/layout.scss
@@ -25,140 +25,144 @@
 }
 // @media (min-width: 480px) {
-.row-xs-height {
-    display: table;
-    table-layout: fixed;
-    height: 100%;
-    width: 100%;
-}
-.col-xs-height {
-    display: table-cell;
-    float: none;
-    height: 100%;
-}
-.col-xs-top {
-    vertical-align: top;
-}
-.col-xs-middle {
-    vertical-align: middle;
-}
-.col-xs-bottom {
-    vertical-align: bottom;
-}
-// }
-
-@media (min-width: 768px) {
-  .row-sm-height {
+  .row-xs-height {
     display: table;
     table-layout: fixed;
     height: 100%;
     width: 100%;
   }
-  .col-sm-height {
-    display: table-cell;
-    float: none;
-    height: 100%;
-  }
-  .col-sm-top {
-    vertical-align: top;
-  }
-  .col-sm-middle {
-    vertical-align: middle;
-  }
-  .col-sm-bottom {
-    vertical-align: bottom;
-  }
-}
-@media (min-width: 992px) {
-  .row-md-height {
-    display: table;
-    table-layout: fixed;
-    height: 100%;
-    width: 100%;
-  }
-  .col-md-height {
+  .col-xs-height {
     display: table-cell;
     float: none;
     height: 100%;
   }
-  .col-md-top {
+
+  .col-xs-top {
     vertical-align: top;
   }
-  .col-md-middle {
+
+  .col-xs-middle {
     vertical-align: middle;
   }
-  .col-md-bottom {
+
+  .col-xs-bottom {
     vertical-align: bottom;
   }
-}
-@media (min-width: 1200px) {
-  .row-lg-height {
+// }
+@media (min-width: 768px) {
+  .row-sm-height {
     display: table;
     table-layout: fixed;
     height: 100%;
     width: 100%;
   }
-  .col-lg-height {
+  .col-sm-height {
     display: table-cell;
-    float: none;
-    height: 100%;
-  }
-  .col-lg-top {
-    vertical-align: top;
-  }
-  .col-lg-middle {
-    vertical-align: middle;
-  }
-  .col-lg-bottom {
-    vertical-align: bottom;
-  }
-}
+        // float: none;
+        height: 100%;
+      }
+      .col-sm-top {
+        vertical-align: top;
+      }
+      .col-sm-middle {
+        vertical-align: middle;
+      }
+      .col-sm-bottom {
+        vertical-align: bottom;
+      }
+    }
-.vcenter {
-  display: inline-block;
-  vertical-align: middle;
-  float: none;
-  margin-right: -2px;
-  margin-left: -2px;
-}
+    @media (min-width: 992px) {
+      .row-md-height {
+        display: table;
+        table-layout: fixed;
+        height: 100%;
+        width: 100%;
+      }
+      .col-md-height {
+        display: table-cell;
+        // float: none;
+        height: 100%;
+      }
+      .col-md-top {
+        vertical-align: top;
+      }
+      .col-md-middle {
+        vertical-align: middle;
+      }
+      .col-md-bottom {
+        vertical-align: bottom;
+      }
+    }
-.vertical-padding {
-  padding-top: 15px;
-  padding-bottom: 15px;
-}
+    @media (min-width: 1200px) {
+      .row-lg-height {
+        display: table;
+        table-layout: fixed;
+        height: 100%;
+        width: 100%;
+      }
+      .col-lg-height {
+        display: table-cell;
+        // float: none;
+        height: 100%;
+      }
+      .col-lg-top {
+        vertical-align: top;
+      }
+      .col-lg-middle {
+        vertical-align: middle;
+      }
+      .col-lg-bottom {
+        vertical-align: bottom;
+      }
+    }
-.no-space-left {
-  margin-left: 0;
-  padding-left: 0;
-}
+    .vcenter {
+      display: inline-block;
+      vertical-align: middle;
+      float: none;
+      margin-right: -2px;
+      margin-left: -2px;
+    }
-.no-space-right {
-  margin-right: 0;
-  padding-right: 0;
-}
+    .vertical-padding {
+      padding-top: 15px;
+      padding-bottom: 15px;
+    }
-.text-center-sm {
-  @media screen and (max-width: $screen-sm) {
-    text-align: center;
-  }
-}
+    .no-space-left {
+      margin-left: 0;
+      padding-left: 0;
+    }
-.btn-submit {
-  background-color: $defaultblue;
-  color: #fff;
-  font-weight: bold;
-  &:hover,
-  &:focus {
-    color: #fff;
-  }
-}
+    .no-space-right {
+      margin-right: 0;
+      padding-right: 0;
+    }
-.has-error {
-  border-color: #FF0000;
-  border-width: 1px;
-}
+    .text-center-sm {
+      @media screen and (max-width: $screen-sm) {
+        text-align: center;
+      }
+    }
+
+    .btn-submit {
+      background-color: $defaultblue;
+      color: #fff;
+      font-weight: bold;
+      &:hover,
+      &:focus {
+        color: #fff;
+      }
+    }
+
+    .has-error {
+      border-color: #FF0000;
+      border-width: 1px;
+    }
 // Está com o nome do termos de uso. Deixas genérico ou apenas aqui? Ver como vão ficar esses modais
 .modal-termos-uso {
@@ -229,23 +233,21 @@ ul.list-color li:before {
 }
 .page--program {
-    .program-content {
-        ul li {
-          padding-left: 2em;
-          padding-bottom: 15px;
-          text-indent: -0.7em;
-        }
-
-        .col-middle {
-            vertical-align: top;
-        }
-
-        @media screen and (min-width: $screen-lg) {
-            img {
-                width: 100%;
-            }
-        }
+  .program-content {
+    ul li {
+      padding-left: 2em;
+      padding-bottom: 15px;
+      text-indent: -0.7em;
     }
+    .col-middle {
+      vertical-align: top;
+    }
+    @media screen and (min-width: $screen-lg) {
+      img {
+        width: 100%;
+      }
+    }
+  }
 }
 .destaque-bg-cinza {
@@ -258,19 +260,26 @@ ul.list-color li:before {
 }
 .destaque-font {
-  font-size: 130%;
+  font-size: 130%!important;
 }
-.font-140 {
-  font-size: 140%;
-}
+.font {
+  line-height: normal!important;
-.font-115 {
-  font-size: 115%;
-}
+  &-140 {
+    @extend .font;
+    font-size: 140%!important;
+  }
-.font-180 {
-  font-size: 180%;
+  &-115 {
+    @extend .font;
+    font-size: 115%!important;
+  }
+
+  &-180 {
+    @extend .font;
+    font-size: 180%!important;
+  }
 }
 .destaque-bg-lightgray {
@@ -333,7 +342,8 @@ blockquote {
     top: -10px;
     left: -10px;
     font-weight: bolder;
-    @each $category, $color in $categories {
+    @each $category,
+    $color in $categories {
       .#{$category} & {
         color: $color;
       }
@@ -341,6 +351,7 @@ blockquote {
   }
 }
+
 .page--program .program-content blockquote,
 .page--program .program-content blockquote p {
     font-size: 24px;
@@ -356,3 +367,95 @@ blockquote {
   }
   border-top: 20px solid;
 }
+
+.pad-right-0 {
+  padding-right: 0px!important;
+}
+
+.pad-left-0 {
+  padding-left: 0px!important;
+}
+
+.bloco-mais-especialidades {
+  @media (max-width: 480px) {
+    padding: 2% 0 0 5%;
+  }
+
+  @media (min-width: 768px) {
+    padding: 2% 0 0 10%;
+  }
+
+  @media (min-width: 992px) {
+    padding: 12% 0 0 10%;
+  }
+
+  @media (max-width: 1200px) {
+    padding: 10% 0 0 10%;
+  }
+}
+
+ul li:last-child {
+  padding-bottom: 0px!important;
+}
+
+// .destaque-esporte ul li {
+//   padding-bottom: 2px!important;
+// }
+
+.bloco1-preparacao-atletas {
+  @media (max-width: 480px) {
+    padding: 2% 0 0 5%;
+  }
+
+  @media (min-width: 768px) {
+    padding: 2% 0 0 10%;
+  }
+
+  @media (min-width: 992px) {
+    padding: 2% 10% 0 10%;
+  }
+
+  @media (min-width: 1200px) {
+    padding: 17% 10% 0 10%;
+  }
+}
+
+.bloco2-preparacao-atletas {
+  @media (min-width: 1200px) {
+    padding: 15% 0% 0 0%;
+  }
+}
+
+.bloco1-futebol {
+  @media (min-width: 992px) {
+    padding: 3% 5% 0 5%;
+  }
+}
+
+.bloco1-esporte-toda-vida {
+  @media (max-width: 992px) {
+    padding: 5% 10% 0 10%;
+  }
+
+  @media (min-width: 992px) {
+    padding: 10% 10% 0 10%;
+  }
+
+  @media (min-width: 1200px) {
+    padding: 18% 10% 0 10%;
+  }
+}
+
+.bloco2-esporte-toda-vida {
+  @media (max-width: 992px) {
+    padding: 5% 10% 0 10%;
+  }
+
+  @media (min-width: 992px) {
+    padding: 10% 10% 0 10%;
+  }
+
+  @media (min-width: 1200px) {
+    padding: 18% 10% 0 10%;
+  }
+}
	@@ -25,140 +25,144 @@		@@ -25,140 +25,144 @@
25	}	25	}
26		26
27	// @media (min-width: 480px) {	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	display: table;	29	display: table;
53	table-layout: fixed;	30	table-layout: fixed;
54	height: 100%;	31	height: 100%;
55	width: 100%;	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	display: table-cell;	36	display: table-cell;
82	float: none;	37	float: none;
83	height: 100%;	38	height: 100%;
84	}	39	}
85	- .col-md-top {	40	+
		41	+ .col-xs-top {
86	vertical-align: top;	42	vertical-align: top;
87	}	43	}
88	- .col-md-middle {	44	+
		45	+ .col-xs-middle {
89	vertical-align: middle;	46	vertical-align: middle;
90	}	47	}
91	- .col-md-bottom {	48	+
		49	+ .col-xs-bottom {
92	vertical-align: bottom;	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	display: table;	56	display: table;
99	table-layout: fixed;	57	table-layout: fixed;
100	height: 100%;	58	height: 100%;
101	width: 100%;	59	width: 100%;
102	}	60	}
103	- .col-lg-height {	61	+ .col-sm-height {
104	display: table-cell;	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	// Está com o nome do termos de uso. Deixas genérico ou apenas aqui? Ver como vão ficar esses modais	167	// Está com o nome do termos de uso. Deixas genérico ou apenas aqui? Ver como vão ficar esses modais
164	.modal-termos-uso {	168	.modal-termos-uso {
	@@ -229,23 +233,21 @@ ul.list-color li:before {		@@ -229,23 +233,21 @@ ul.list-color li:before {
229	}	233	}
230		234
231	.page--program {	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	.destaque-bg-cinza {	253	.destaque-bg-cinza {
	@@ -258,19 +260,26 @@ ul.list-color li:before {		@@ -258,19 +260,26 @@ ul.list-color li:before {
258	}	260	}
259		261
260	.destaque-font {	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	.destaque-bg-lightgray {	285	.destaque-bg-lightgray {
	@@ -333,7 +342,8 @@ blockquote {		@@ -333,7 +342,8 @@ blockquote {
333	top: -10px;	342	top: -10px;
334	left: -10px;	343	left: -10px;
335	font-weight: bolder;	344	font-weight: bolder;
336	- @each $category, $color in $categories {	345	+ @each $category,
		346	+ $color in $categories {
337	.#{$category} & {	347	.#{$category} & {
338	color: $color;	348	color: $color;
339	}	349	}
	@@ -341,6 +351,7 @@ blockquote {		@@ -341,6 +351,7 @@ blockquote {
341	}	351	}
342		352
343	}	353	}
		354	+
344	.page--program .program-content blockquote,	355	.page--program .program-content blockquote,
345	.page--program .program-content blockquote p {	356	.page--program .program-content blockquote p {
346	font-size: 24px;	357	font-size: 24px;
	@@ -356,3 +367,95 @@ blockquote {		@@ -356,3 +367,95 @@ blockquote {
356	}	367	}
357	border-top: 20px solid;	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	+}