timeline.less

@color-grey-light: #cccccc;
@datebox-color: #03A9F4;
@height2: 50px;
.timeline-title {
    padding: 10px 0;
    margin: 0;
    margin-bottom: 20px;
    border-bottom: 1px dotted @color-grey-light;
    border-top: 1px dotted @color-grey-light;
    text-transform: uppercase;
    text-align: center;
}
.timeline {
    margin: auto;
    width: 550px;
    .fa {
        color: #888;
    }
    .date {
        background: @datebox-color;
        border: 1px solid @datebox-color;
        color: #FFF;
        text-align: center;
        width: 230px;
        &:hover {
            background: #FFF;
            color: @datebox-color;
            .back, .next {
                cursor: pointer;
                display: inline-block;
                .fa {
                    color: @datebox-color;
                }
            }
        }
        .currentdate {
            display: inline-block;
            padding: 5px 0;
            vertical-align: middle;
            width: ~"calc(100% - 45px)";
            .day {
                font-size: x-large;
                line-height: 1em;
                text-transform: uppercase;
            }
            .dayofweek {
                font-size: 11px;
                padding-left: 5px;
                text-transform: uppercase;
            }
        }
        .back, .next {
            display: none;
            text-align: center;
            padding: 12px 4px;
            width: 16px;
        }
    }

    @item-height: 145px;
    @border-size: 1px;
    @icon-size: 48px;
    @gap-height: 25px;
    .column {
        position: relative;
        .item {
            margin: 0;
            .location {
                display: inline-block;
                margin: 0px 30px;
                vertical-align: top;
                .timeline-item {
                    margin: 1px 0;
                }
                .line {
                    border-left: 1px solid @color-grey-light;
                    margin: 0 24px;
                }
                .icon {
                    height: @icon-size;
                    width: @icon-size;
                    border: none;
                    border: @border-size solid @color-grey-light;
                    border-radius: 24px !important;
                    padding: 7px;
                    text-align: center;
                    i.fa {
                        font-size: 32px;
                    }
                }
                .no-icon {
                    border-left: @border-size solid @color-grey-light;
                    height: @icon-size;
                    margin: 0 24px;
                }
                .home {
                    width: 32px;
                    content: url('../img/icons-monochrome/home.png');
                }
            }
            .timeline-bar {
                border-left: 1px solid #555;
                display: inline-block;
                height: @item-height;
            }
            .details {
                border-bottom: 1px solid @color-grey-light;
                border-right: 1px solid @color-grey-light;
                display: inline-block;
                height: @item-height;
                overflow: hidden;
                vertical-align: top;
                width: ~"calc(100% - 160px)";
                .timeline-detail {
                    .summary .field {
                        .desc {
                            width: ~"calc(100% - 40px)";
                        }
                    }
                }
            }
        }

        .item.first, .item.last {
            height: @gap-height;
            .location {
                width: 49px;
                text-align: center;
                .fa-exchange {
                    transform: rotate(90deg);
                }
            }
            .location, .timeline-bar, .details {
                border-right: none;
                display: inline-block;
                vertical-align: top;
                height: @gap-height;
            }
        }
        .item.message {
            height: 120px;
            .location {
                width: 49px;
            }
            .details {
                border: 1px solid @datebox-color;
                border-left: none;
                height: 120px;
                .icon {
                    font-size: 3em;
                    text-align: center;
                    .fa {
                        color: @datebox-color;
                    }
                }
                .text {
                    text-align: center;
                    color: @datebox-color;
                }
            }
        }
        .item.last {
            .location {
                .line {
                    height: @gap-height;
                }
            }
            .details {
                border: none;
            }
        }

        .item.calendar {
            display: inline-block !important;
            width: 100%;
        }
    }
}
@media screen and (max-width: 550px) {
    .timeline {
        width: 100%;
        .date {
            width: 100%;
            .back, .next {
                display: inline-block;
                .fa {
                    color: white;
                }
            }
            .back {
                padding-right: 50px;
            }
            .next {
                padding-left: 50px;
            }
            .currentdate {
                width: ~"calc(100% - 130px)";
            }
        }
        .column {
            .item {
                &.first, &.last {
                    .location {
                        width: 33px;
                    }
                    .timeline-bar {
                        display: none;
                    }
                }
                &.message {
                    .location.none {
                        display: none;
                    }
                    .details {
                        border-left: 1px solid @datebox-color;
                        width: 100%;
                    }
                }
                .location {
                    margin: 0px;
                    .icon {
                        height: 32px;
                        width: 32px;
                        border-radius: 16px !important;
                        margin: 0;
                        padding: 3px;
                        i.fa {
                            font-size: 24px;
                        }
                    }
                    .no-icon {
                        height: 32px;
                        margin: 0 16px;
                    }
                    .line {
                        margin: 0 16px;
                    }
                }
                .timeline-bar {
                    display: none;
                }
                .details {
                    width: ~"calc(100% - 40px)";
                    border-right: none;
                    .timeline-info {
                        width: 15%;
                        padding: 0;
                        .type-and-time {
                            padding-top: 3px;
                            .type .icon {
                                font-size: 1em;
                            }
                        }
                    }
                    .timeline-detail {
                        width: 85%;
                        padding-left: 8px;
                        .summary .field {
                            .icon {
                                padding: 2px 0;
                                width: 25px;
                            }
                            .desc {
                                padding: 0 5px;
                                width: ~"calc(100% - 40px)";
                            }
                        }
                    }
                }
            }
        }
    }
}