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
@@ -314,48 +314,52 @@ @@ -314,48 +314,52 @@
314 <section class="talk-proposal box box-propostas"> 314 <section class="talk-proposal box box-propostas">
315 <div class="container-title box-title">Bate-papo com ministras e ministros</div> 315 <div class="container-title box-title">Bate-papo com ministras e ministros</div>
316 <p class="talk__description">Confira as datas e horários:</p> 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 <div class="row"> 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 </div> 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 </div> 363 </div>
360 </div> 364 </div>
361 </div> 365 </div>
sass/style.sass
@@ -1089,8 +1089,27 @@ td @@ -1089,8 +1089,27 @@ td
1089 text-align: center 1089 text-align: center
1090 1090
1091 // 6.20 - participe 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 // 7 - Modificadores 1115 // 7 - Modificadores