Merge branch 'proposal-boxes' into merlin

Leonardo Merlin
2 parents f293f0e7 9cdb3794
Showing 3 changed files with 121 additions and 2 deletions Show diff stats
src/app/components/programa/programa.html
src/app/components/programa/programa.scss
src/app/index.scss
@@ -35,6 +35,42 @@
           </div>
         </div>
       </div>
+      <div class="row proposal-row">
+        <div class="row-height">
+          <div class="col-md-6 col-height">
+            <div class="inside-full-height">
+              <div class="proposal-box make-proposal">
+                <h2 class="proposal-box--title">Faça uma proposta</h2>
+                <p class="proposal-box--text">Qual a sua sugestão para melhorar este programa?</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6 col-height">
+            <div class="inside-full-height">
+              <div class="proposal-box support-proposal">
+                <h2 class="proposal-box--title">Apoie outras propostas</h2>
+                <p class="proposal-box--text">
+                  Lorem qual a sua sugestão para melhorar este programa
+                  Lorem qual a sua sugestão para melhorar este programa
+                  Lorem qual a sua sugestão para melhorar este programa
+                  Lorem qual a sua sugestão para melhorar este programa
+                  Lorem qual a sua sugestão para melhorar este programa
+                  Lorem qual a sua sugestão para melhorar este programa?
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="talk-proposal row proposal-row">
+        <div class="row-height">
+          <div class="col-md-12 col-height">
+            <div class="">
+              <h2>Bate-papo virtual com ministr@s</h2>
+            </div>
+          </div>
+        </div>
+      </div>
     </section>
   </article>
 </div>
@@ -216,7 +216,6 @@ $darken: 15%;
             position: relative;
             width: 100%;
         }
-
     }
     .program-banner--title {
@@ -244,6 +243,90 @@ $darken: 15%;
     }
 }
+// .flexbox {
+//     .proposal-row {
+//         display: flex;
+//         flex-flow: row nowrap;
+//         // flex-direction: row;
+//         // flex-wrap: wrap;
+//     }
+
+//     .proposal-box {
+//         // flex: 1 100%;
+//         flex: 1 0 auto;
+//         // align-items: stretch;
+//     }
+// }
+// .flexboxlegacy {}
+
+.row-height {
+  display: table;
+  table-layout: fixed;
+  height: 100%;
+  width: 100%;
+  border-spacing: 20px;
+}
+
+.col-height {
+    display: table-cell;
+    float: none;
+    height: 100%;
+    vertical-align: top;
+
+    border: 1px solid #000;
+    border-radius: 3px;
+
+    @each $category, $color in $categories {
+        .#{$category} & {
+            border-color: $color;
+        }
+    }
+}
+
+.inside {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.inside-full-height {
+    height: 100%;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.talk-proposal {
+    margin-top: -20px;
+}
+
+.proposal-box {
+
+    // padding: 10px 20px;
+
+    .proposal-box--title {
+        font-size: 38px;
+        font-weight: 400;
+        text-align: center;
+
+        margin-bottom: 20px;
+    }
+
+    .proposal-box--text {
+        font-size: 24px;
+        font-weight: 700;
+        line-height: 1.2;
+        margin-bottom: 20px;
+    }
+
+    @each $category, $color in $categories {
+        .#{$category} & {
+            border-color: $color;
+
+            .proposal-box--title {
+                color: $color;
+            }
+        }
+    }
+}
 .program-content {
     h2 {
@@ -28,7 +28,7 @@ $categories-descriptions: (saude: &quot;Saúde é direito de todos e dever do Estado.
 // -------------
 body {
-    // font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: "Open Sans", sans-serif;
     &.contraste {
         color: #fff;
         background-color: #000;
	@@ -35,6 +35,42 @@		@@ -35,6 +35,42 @@
35	</div>	35	</div>
36	</div>	36	</div>
37	</div>	37	</div>
		38	+ <div class="row proposal-row">
		39	+ <div class="row-height">
		40	+ <div class="col-md-6 col-height">
		41	+ <div class="inside-full-height">
		42	+ <div class="proposal-box make-proposal">
		43	+ <h2 class="proposal-box--title">Faça uma proposta</h2>
		44	+ <p class="proposal-box--text">Qual a sua sugestão para melhorar este programa?</p>
		45	+ </div>
		46	+ </div>
		47	+ </div>
		48	+ <div class="col-md-6 col-height">
		49	+ <div class="inside-full-height">
		50	+ <div class="proposal-box support-proposal">
		51	+ <h2 class="proposal-box--title">Apoie outras propostas</h2>
		52	+ <p class="proposal-box--text">
		53	+ Lorem qual a sua sugestão para melhorar este programa
		54	+ Lorem qual a sua sugestão para melhorar este programa
		55	+ Lorem qual a sua sugestão para melhorar este programa
		56	+ Lorem qual a sua sugestão para melhorar este programa
		57	+ Lorem qual a sua sugestão para melhorar este programa
		58	+ Lorem qual a sua sugestão para melhorar este programa?
		59	+ </p>
		60	+ </div>
		61	+ </div>
		62	+ </div>
		63	+ </div>
		64	+ </div>
		65	+ <div class="talk-proposal row proposal-row">
		66	+ <div class="row-height">
		67	+ <div class="col-md-12 col-height">
		68	+ <div class="">
		69	+ <h2>Bate-papo virtual com ministr@s</h2>
		70	+ </div>
		71	+ </div>
		72	+ </div>
		73	+ </div>
38	</section>	74	</section>
39	</article>	75	</article>
40	</div>	76	</div>
	@@ -216,7 +216,6 @@ $darken: 15%;		@@ -216,7 +216,6 @@ $darken: 15%;
216	position: relative;	216	position: relative;
217	width: 100%;	217	width: 100%;
218	}	218	}
219	-
220	}	219	}
221		220
222	.program-banner--title {	221	.program-banner--title {
	@@ -244,6 +243,90 @@ $darken: 15%;		@@ -244,6 +243,90 @@ $darken: 15%;
244	}	243	}
245	}	244	}
246		245
		246	+// .flexbox {
		247	+// .proposal-row {
		248	+// display: flex;
		249	+// flex-flow: row nowrap;
		250	+// // flex-direction: row;
		251	+// // flex-wrap: wrap;
		252	+// }
		253	+
		254	+// .proposal-box {
		255	+// // flex: 1 100%;
		256	+// flex: 1 0 auto;
		257	+// // align-items: stretch;
		258	+// }
		259	+// }
		260	+// .flexboxlegacy {}
		261	+
		262	+.row-height {
		263	+ display: table;
		264	+ table-layout: fixed;
		265	+ height: 100%;
		266	+ width: 100%;
		267	+ border-spacing: 20px;
		268	+}
		269	+
		270	+.col-height {
		271	+ display: table-cell;
		272	+ float: none;
		273	+ height: 100%;
		274	+ vertical-align: top;
		275	+
		276	+ border: 1px solid #000;
		277	+ border-radius: 3px;
		278	+
		279	+ @each $category, $color in $categories {
		280	+ .#{$category} & {
		281	+ border-color: $color;
		282	+ }
		283	+ }
		284	+}
		285	+
		286	+.inside {
		287	+ margin-top: 20px;
		288	+ margin-bottom: 20px;
		289	+}
		290	+
		291	+.inside-full-height {
		292	+ height: 100%;
		293	+ margin-top: 0;
		294	+ margin-bottom: 0;
		295	+}
		296	+
		297	+.talk-proposal {
		298	+ margin-top: -20px;
		299	+}
		300	+
		301	+.proposal-box {
		302	+
		303	+ // padding: 10px 20px;
		304	+
		305	+ .proposal-box--title {
		306	+ font-size: 38px;
		307	+ font-weight: 400;
		308	+ text-align: center;
		309	+
		310	+ margin-bottom: 20px;
		311	+ }
		312	+
		313	+ .proposal-box--text {
		314	+ font-size: 24px;
		315	+ font-weight: 700;
		316	+ line-height: 1.2;
		317	+ margin-bottom: 20px;
		318	+ }
		319	+
		320	+ @each $category, $color in $categories {
		321	+ .#{$category} & {
		322	+ border-color: $color;
		323	+
		324	+ .proposal-box--title {
		325	+ color: $color;
		326	+ }
		327	+ }
		328	+ }
		329	+}
247		330
248	.program-content {	331	.program-content {
249	h2 {	332	h2 {
	@@ -28,7 +28,7 @@ $categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado.		@@ -28,7 +28,7 @@ $categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado.
28	// -------------	28	// -------------
29		29
30	body {	30	body {
31	- // font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;	31	+ font-family: "Open Sans", sans-serif;
32	&.contraste {	32	&.contraste {
33	color: #fff;	33	color: #fff;
34	background-color: #000;	34	background-color: #000;