Bulma: New feature : Timeline

Created on 25 Dec 2016 · 9Comments · Source: jgthms/bulma

Description

I've created a new Timeline Feature to easily display a timeline like this
Image of Timeline

Can you add it to the repository if you like it and if it fits to Bulma coding rules ?

HTML Structure

<div class="timeline">
     <div class="time-item">
          <div class="item-content">
               <div>5 minutes ago</div>
                    <p><strong><a href="#">John Doe</a></strong> Uploaded a photo <strong>"DSC000586.jpg"</strong></p>
               </div>
          </div>

          <div class="time-item">
               <div class="item-content">
                    <div>30 minutes ago</div>
                         <p><a href="">Lorem</a> commented your post.</p>
                         <p><em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet tellus ut tincidunt euismod. "</em></p>
                    </div>
               </div>
          </div>
     </div>
</div>

New sass rules

Find below the SASS rules I created to manage this timeline

.timeline
  border-left: 2px solid $grey
  position: relative

  .time-item
    border-color: #dee5e7
    padding-bottom: 1px
    position: relative
    flex-grow: 0
    flex-shrink: 0
    &:after
      background-color: #ffffff
      border-color: $grey
      border-radius: 10px
      border-style: solid
      border-width: 2px
      bottom: 0
      content: ''
      height: 14px
      left: 0
      margin-left: -8px
      position: absolute
      top: 5px
      width: 14px
    &:before
      content: " "
      display: table

    .item-content
      margin-bottom: 15px
      margin-left: 15px

Source