timeline.scss

/**
 * Timeline
 */

$timeline-line-width:            .15em;
$timeline-line-color:            #ddd;

$timeline-circle-size:           .5em;
$timeline-circle-color:          #999;
$timeline-circle-color-hover:    navy;

$timeline-gutter:                .75em;

$timeline-circle-border-width:   .15em;
$timeline-circle-border-color:   #eee;

$timeline-circle-totalsize:      $timeline-circle-size + ($timeline-circle-border-width * 2);

$timeline-date-background:       #666;
$timeline-date-background-hover: navy;
$timeline-date-color:            #fff;
$timeline-date-color-hover:      #fff;


.timeline {
    list-style:     none;
    margin-left:    1em;
    padding-bottom: 1em;

    /**
     * Line
     */
    &::before {
        content:    '';
        position:   absolute;
        top:        $timeline-circle-totalsize;
        left:       0;
        bottom:     0;
        width:      $timeline-line-width;
        background: $timeline-line-color;
    }
}
    .timeline-event {
        padding-left: $timeline-gutter;

        &:not(:last-child) {
            margin-bottom: .25em;
        }

        &:hover {
            .timeline-event-date {
                background: $timeline-date-background-hover;
                color:      $timeline-date-color-hover;

                &::before {
                    border-right-color: $timeline-date-background-hover;
                }
            }

            &::before {
                background: $timeline-circle-color-hover;
            }
        }

        /**
         * Circle
         */
        &::before {
            content:       '';
            position:      absolute;
            top:           0;
            left:          0;
            border-radius: 100%;

            width:         $timeline-circle-size;
            height:        $timeline-circle-size;
            background:    $timeline-circle-color;
            border:        $timeline-circle-border-width solid $timeline-circle-border-color;

            margin-left:   $timeline-circle-totalsize / -2.8;
            margin-top:    $timeline-circle-totalsize / 2;
        }

        &::after {
            content: '';
            display: table;
            clear: both;
        }
    }
        .timeline-event-date {
            float:         left;
            background:    $timeline-date-background;
            color:         $timeline-date-color;
            border-radius: 2px;
            padding:       0 .35em;
            margin-right:  1em;
            margin-left:   .3em;

            &::before {
                content:       '';
                position:      absolute;
                width:         0;
                height:        0;
                top:           50%;
                left:          -.3em;
                margin-top:    -.3em;
                border-right:  .3em solid $timeline-date-background;
                border-top:    .3em solid transparent;
                border-bottom: .3em solid transparent;
            }
        }
        .timeline-event-title {
            float: left;
        }