Commit 80fd000fddc0f1dcdd3598bb9bfc86f7bd209f45

Authored by Leonardo Merlin
2 parents f293f0e7 9cdb3794

Merge branch 'proposal-boxes' into merlin

src/app/components/programa/programa.html
... ... @@ -35,6 +35,42 @@
35 35 </div>
36 36 </div>
37 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 74 </section>
39 75 </article>
40 76 </div>
... ...
src/app/components/programa/programa.scss
... ... @@ -216,7 +216,6 @@ $darken: 15%;
216 216 position: relative;
217 217 width: 100%;
218 218 }
219   -
220 219 }
221 220  
222 221 .program-banner--title {
... ... @@ -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 331 .program-content {
249 332 h2 {
... ...
src/app/index.scss
... ... @@ -28,7 +28,7 @@ $categories-descriptions: (saude: &quot;Saúde é direito de todos e dever do Estado.
28 28 // -------------
29 29  
30 30 body {
31   - // font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  31 + font-family: "Open Sans", sans-serif;
32 32 &.contraste {
33 33 color: #fff;
34 34 background-color: #000;
... ...