Commit f8893b7e8d01772bff1d8f4e958dd91a8e8bcca2

Authored by Leonardo Merlin
1 parent 31e863ca

Add participate button (html/css only)

Showing 2 changed files with 65 additions and 42 deletions   Show diff stats
index.html
... ... @@ -314,48 +314,52 @@
314 314 <section class="talk-proposal box box-propostas">
315 315 <div class="container-title box-title">Bate-papo com ministras e ministros</div>
316 316 <p class="talk__description">Confira as datas e horários:</p>
317   - <div>
318   - <ul class="calendar saude" data-slick='{"infinite": false, "rows": 2}'>
319   - <li>
320   - <span id='ep0'></span>
321   - <span>Saúde</span>
322   - <div id='ed0' class="date"><i class="fa fa-calendar"></i></div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
323   - </li>
324   - </ul>
325   - <ul class="calendar seguranca-publica" data-slick='{"infinite": false, "rows": 2}'>
326   - <li>
327   - <span id='ep1'></span>
328   - <span id='ed1'>Justiça</span>
329   - <div class="date"><i class="fa fa-calendar"></i></div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
330   - </li>
331   - </ul>
332   - <ul class="calendar educacao" data-slick='{"infinite": false, "rows": 2}'>
333   - <li>
334   - <span id='ep2'></span>
335   - <span>Educação</span>
336   - <div id='ed2' class="date"><i class="fa fa-calendar"></i></div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
337   - </li>
338   - </ul>
339   - <ul class="calendar reducao-da-pobreza" data-slick='{"infinite": false, "rows": 2}'>
340   - <li>
341   - <span id='ep3'></span>
342   - <span>Desenvolvimento Social</span>
343   - <div id='ed3' class="date"><i class="fa fa-calendar"></i></div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
344   - </li>
345   - </ul>
346   - </div>
347   - <div class="talk__participate">
  317 + <div class="col-sm-12">
348 318 <div class="row">
349   - <div class="col-sm-4 col-md-3 col-lg-2">
350   - <div class="row">
351   - <button type="button" class="button button-block">Participar</button>
  319 + <ul class="calendar saude" data-slick='{"infinite": false, "rows": 2}'>
  320 + <li>
  321 + <span id='ep0'></span>
  322 + <span>Saúde</span>
  323 + <div id='ed0' class="date"><i class="fa fa-calendar"></i></div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
  324 + </li>
  325 + </ul>
  326 + <ul class="calendar seguranca-publica" data-slick='{"infinite": false, "rows": 2}'>
  327 + <li>
  328 + <span id='ep1'></span>
  329 + <span id='ed1'>Justiça</span>
  330 + <div class="date"><i class="fa fa-calendar"></i></div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
  331 + </li>
  332 + </ul>
  333 + <ul class="calendar educacao" data-slick='{"infinite": false, "rows": 2}'>
  334 + <li>
  335 + <span id='ep2'></span>
  336 + <span>Educação</span>
  337 + <div id='ed2' class="date"><i class="fa fa-calendar"></i></div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
  338 + </li>
  339 + </ul>
  340 + <ul class="calendar reducao-da-pobreza" data-slick='{"infinite": false, "rows": 2}'>
  341 + <li>
  342 + <span id='ep3'></span>
  343 + <span>Desenvolvimento Social</span>
  344 + <div id='ed3' class="date"><i class="fa fa-calendar"></i></div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
  345 + </li>
  346 + </ul>
  347 + </div>
  348 + </div>
  349 + <div class="col-sm-12">
  350 + <div class="talk__participate">
  351 + <div class="row">
  352 + <div class="col-sm-4 col-md-3 col-lg-2">
  353 + <div class="row">
  354 + <button type="button" class="button button-block">Participar</button>
  355 + </div>
352 356 </div>
353   - </div>
354   - <div class="col-sm-8 col-md-9 col-lg-10">
355   - <div class="row">
356   - <div class="talk__counter">
357   - <span class="talk__value">8.117</span>
358   - <span class="talk__counter-message">se inscreveram para esse hangout</span>
  357 + <div class="col-sm-8 col-md-9 col-lg-10">
  358 + <div class="row">
  359 + <div class="talk__counter">
  360 + <span class="talk__value">8.117</span>
  361 + <span class="talk__counter-message">se inscreveram para esse hangout</span>
  362 + </div>
359 363 </div>
360 364 </div>
361 365 </div>
... ...
sass/style.sass
... ... @@ -1089,8 +1089,27 @@ td
1089 1089 text-align: center
1090 1090  
1091 1091 // 6.20 - participe
1092   -// .talk__participate
1093   -// .talk__participate
  1092 +.talk__participate
  1093 + .button
  1094 + position: relative
  1095 + z-index: 5
  1096 +.talk__counter
  1097 + position: relative
  1098 + display: inline-block
  1099 + // line-height: 3
  1100 + margin-left: -10px
  1101 + padding: 15px 15px 15px 25px
  1102 + height: 52px // equals button size
  1103 + background-color: #eeeff1
  1104 + z-index: 1
  1105 + border-radius: 10px
  1106 +
  1107 + @each $category, $color in $categories
  1108 + .#{$category} &
  1109 + color: $color
  1110 +
  1111 +.talk__value
  1112 + font-weight: bold
1094 1113  
1095 1114 // ------------------------------------
1096 1115 // 7 - Modificadores
... ...