source: pro-violet-viettel/www/deploy/20150304/assets/css/less/page.timeline.less @ 896

.timeline-container {
 position:relative;
 padding-top:4px;
 margin-bottom:32px;

 &:last-child {
        margin-bottom:0;
 } 

 &:before {
        /* the vertical line running through icons */
        content:"";
        display:block;
        position:absolute;
        left:28px;
        top:0;
        bottom:0;
        border:1px solid #E2E3E7;
        background-color:#E7EAEF;
        width:4px;
        border-width:0 1px;
 }
 &:first-child:before {
        border-top-width:1px;
 }
 &:last-child:before {
        border-bottom-width:1px;
 }
}


.timeline-item {
  position:relative;
  margin-bottom:8px;

 .widget-box {
        background-color:#F2F6F9;
        color:#595C66;
 }

 .transparent.widget-box {
        border-left:3px solid #DAE1E5;
 }
 .transparent {
        .widget-header {
                background-color:#ECF1F4;
                border-bottom:none;

                > :first-child {
                        margin-left:8px;
                }
        }
 }


 &:nth-child(even) .widget-box {
        background-color:#F3F3F3;
        color:#616161;

        &.transparent {
                border-left-color:#DBDBDB !important;
                .widget-header {
                        background-color:#EEE !important;
                }
        }
 }

}




.timeline-item {
        .widget-box     {
                margin:0;
                position:relative;
                max-width:none;
                border-bottom:none;
                margin-left:60px;
        }
        .widget-main {
                margin:0;
                position:relative;
                max-width:none;
                border-bottom:none;
        }
        .widget-body {
                background-color:transparent;
        }

        .widget-toolbox {
                padding:4px 8px 0 !important;
                background-color:transparent !important;
                border:0 solid #CCC !important;
                border-top:none !important;
                margin:0 0px !important;
        }
}







.timeline-info {
        float:left;
        width:60px;
        text-align:center;
        position:relative;
        
        img {
                border-radius:100%;
                max-width:42px;
        }
        .label , .badge {
                font-size:12px;
        }
}



.timeline-container:not(.timeline-style2) .timeline-indicator {
        opacity:1;
    border-radius: 100%;
    display: inline-block;
    font-size: 16px;
    height: 36px;
    line-height: 30px;    
    width: 36px;
        text-align: center;
        text-shadow: none !important;
        padding:0;
        cursor:default;

        border:3px solid #FFF !important;

}


.timeline-label {
        display:block;
        clear:both;
        margin:0 0 18px;
        margin-left:34px;
}

.timeline-item img {
        border:1px solid #AAA;
        padding:2px;
        background-color:#FFF;
}









.timeline-style2 {

 &:before {
        display:none;
 }

 .timeline-item {

        padding-bottom:22px;
        margin-bottom:0;
        &:last-child {
                padding-bottom:0;
        }

        
   &:before {
                content:"";
                display:block;
                position:absolute;
                left:90px; top:5px;     bottom:-5px;

                border-width:0;

                background-color:#DDD;
                width:2px;
                max-width:2px;
   }
  
   &:last-child:before {
                display:none;
   }
   &:first-child:before {
                display:block;
   }

 }

}






.timeline-style2 {
        .timeline-item .transparent .widget-header {
                background-color:transparent !important;
        }
        .timeline-item .transparent.widget-box {
                background-color:transparent !important;
                border-left:none !important;
        }

        .timeline-info {
                width:100px;
        }

        .timeline-indicator {
                font-size: 0;
                height: 12px;
                line-height: 12px;
                width: 12px;
                
                border-width: 1px !important;
                background-color: #FFFFFF !important;
                
                position:absolute;
                left:85px; top:3px;
                
                opacity:1;
                border-radius: 100%;
                display: inline-block;
                padding:0;
        }

        .timeline-date {
                display:inline-block;
                width:72px;
                text-align:right;
                margin-right:25px;
                color:#777;
        }

        .timeline-item .widget-box {
                margin-left:112px;
        }

        .timeline-label {
                width:75px;
                text-align:center;
                margin-left:0; margin-bottom:10px;
                text-align:right;
                color:#666;
                font-size:14px;
        }

}





.timeline-time {
        text-align:center;
        position:static;
}