webui/src/Components/Timeline/EventNode.scss

@import '../../variables';

.EventNode {
    $container-width: 46%;
    $timeline-width: 100% - $container-width * 2;

    $circle-vertical-distance: 2rem;

    $timeline-icon-border: $line-thickness;
    $timeline-icon-radius: $line-thickness * 2;

    position: relative;
    padding: 0 1rem 1rem 1rem;
    @media screen and (min-width : $tablet-min-width) {
        padding: 0;
    }

    .inner {
        position: relative;
        background-color: white;
        border-radius: .3rem;
        box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.125);
        font-family: 'Roboto', sans-serif;
        color: #333;
        width: 100%;

        @media screen and (min-width : $mobile-min-width) {
            width: $container-width * 2 - 9%;
        }

        @media screen and (min-width : $tablet-min-width) {
            width: $container-width;
        }
    }
    
    @media screen and (min-width : $tablet-min-width) {
        &.right {
            .inner {
                margin-left: $container-width + $timeline-width;
            }
        }
    }

    .header {
        padding: 0;
        border-radius: .25rem .25rem 0 0;
        position: relative;
        //height: 4.2rem;

        .icon {
            position: absolute;
            top: .25rem;
            left: 1rem;
            font-size: 2.75rem;
            color: white;
        }

        div.icon {
            top: 50%;
            margin-top: calc(-15px);
            left: 1.5rem;
        }

        p.title,
        p.subtitle {
            margin: 0;
            font-family: 'Lato', sans-serif;
            color: white;
        }

        p.title {
            position: absolute;
            left: 4.5rem;
            margin: 0;
            font-family: 'Lato', sans-serif;
            color: white;
            top: .5rem;
            text-transform: uppercase;
            font-size: 1.5rem;
            font-weight: 300;
        }

        p.subtitle {
            font-size: 1rem;
            font-weight: 400;
            padding-left: 4.5rem;
            padding-top: 2.2rem;
            padding-bottom: .6rem;
        }
    }

    &.blue {
        .header {
            background-color: $color-blue;
        }
    }

    &.green {
        .header {
            background-color: $color-green;
        }
    }

    &.purple {
        .header {
            background-color: $color-purple;
        }
    }

    .body {
        padding: .75rem 1.5rem;
    }

    $relative-timeline-spacing: $timeline-width / $container-width / 2 * 100%;
    $icon-position: -1 * $relative-timeline-spacing;

    // Vertical line
    .vertical-line {
        position: absolute;
        top: $circle-vertical-distance;
        margin-top: -1 * $line-thickness / 2;
        width: $relative-timeline-spacing;
        height: $line-thickness;
        background-color: $color-blue-gray;
        content: ' ';
    }

    &.right .vertical-line {
        left: -1 * $relative-timeline-spacing;
        right: auto;
    }

    &.left .vertical-line {
        left: auto;
        right: -1 * $relative-timeline-spacing;
    }

    // Horizontal line
    .horizontal-line {
        position: absolute;
        top: 0;
        width: $line-thickness;
        height: 100%;
        background-color: $color-blue-gray;
        content: ' ';
        left: calc(92% - #{$line-thickness / 2});

        display: none;
        @media screen and (min-width : $mobile-min-width) {
            display: block;
        }

        @media screen and (min-width : $tablet-min-width) {
            left: calc(50% - #{$line-thickness / 2});
        }
    }

    // Circular mark
    .timeline-icon {
        position: absolute;
        top: calc(#{$circle-vertical-distance} - #{$timeline-icon-border});
        margin-top: -1 * $timeline-icon-radius;
        width: $timeline-icon-radius * 2;
        height: $timeline-icon-radius * 2;
        border-radius: $timeline-icon-radius * 4;
        background-color: #46cbde;
        border: $timeline-icon-border solid $body-background;
        left: 50%;
        right: auto;
        margin-left: -1 * ($timeline-icon-radius + $line-thickness);
        display: none;
        @media screen and (min-width : $mobile-min-width) {
            display: block;
        }
    }

    &.blue {
        .timeline-icon {
            background-color: $color-blue;
        }
    }

    &.green {
        .timeline-icon {
            background-color: $color-green;
        }
    }

    &.purple {
        .timeline-icon {
            background-color: $color-purple;
        }
    }

    $arrow-width: .7rem;
    $arrow-height: $arrow-width * 3;

    .vertical-arrow {
        position: absolute;
        top: $circle-vertical-distance;
        width: $arrow-width;
        height: $arrow-height;
        margin-top: -1 * $arrow-height / 2;
        display: none;

        @media screen and (min-width : $mobile-min-width) {
            display: block;
        }

    }

    &.blue {
        .vertical-arrow {
            fill: $color-blue;
        }
    }

    &.green {
        .vertical-arrow {
            fill: $color-green;
        }
    }

    &.purple {
        .vertical-arrow {
            fill: $color-purple;
        }
    }
    

    &.left .vertical-arrow,
    &.right .vertical-arrow {
        left: auto;
        right: -1 * $arrow-width;
    }

    @media screen and (min-width : $tablet-min-width) {
        &.right .vertical-arrow{
            left: -1 * $arrow-width;
            right: auto;
            transform: rotate(180deg);
        }
    }

    $datetime-width: 5rem;

    p.datetime {
        position: absolute;
        width: $datetime-width;
        top: calc(#{$circle-vertical-distance} - .5rem);
        margin: 0;
        font-size: .7rem;
        line-height: 1rem;
        color: #999;
    }

    &.left .datetime {
        left: auto;
        right: calc(-1 * #{$relative-timeline-spacing} * 2 - #{$datetime-width});
        text-align: left;
    }

    &.right .datetime {
        left: calc(-1 * #{$relative-timeline-spacing} * 2 - #{$datetime-width});
        right: auto;
        text-align: right;
    }


    /*
    &.left .datetime {
        //left: auto;
        //right: -7rem;
        top: -2.25rem;
        right: 0;

        span {
            text-align: right;
        }
    }

    &.right .datetime {
        left: -7rem;
        right: auto;

        span {
            text-align: right;
        }
    }
    */
/*

    p.datetime .date,
    p.datetime .time {
        display: block;
        font-size: .7rem;
    }

    p.datetime .date {
        display: none;
    }

    p.project {
        font-size: .9rem;
        margin: .25rem 0;
    }

    p.project:before {
        font-size: .9rem;
        margin: .25rem 0;
    }

    p.project button {
        border: none;
        background: none;
        cursor: pointer;
        padding: 0;
        margin: 0 .125rem;
    }

    p.duration {
        font-size: .9rem;
        margin: .25rem 0;
    }

  //  p:last-child {
//        margin-bottom: .5rem;
    //}


    p.type {
        position: relative;
        font-size: .8rem;
        margin: .25rem 0;
        background-color: #f4f4f4;
        background-color: #D7DBE4;
        display: inline-block;
        border-radius: 3px;
        padding: .125rem .5rem .125rem 3.2rem;
    }

    p.type:before {
        content: "Type";
        background-color: #999;
        color: white;
        border-radius: 3px 0 0 3px;
        padding: .125rem .5rem;
        text-transform: uppercase;
        font-size: .7rem;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
    }


    p.address {
        position: relative;
        font-size: .8rem;
        margin: .25rem 0;
        background-color: #D7DBE4;
        display: inline-block;
        border-radius: 3px;
        padding: .125rem .5rem .125rem 4.6rem;
        margin-right: .5rem;
    }

    p.address:before {
        content: "Address";
        background-color: #797;
        color: white;
        border-radius: 3px 0 0 3px;
        padding: .125rem .5rem;
        text-transform: uppercase;
        font-size: .7rem;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
    }

    p.port {
        position: relative;
        font-size: .8rem;
        margin: .25rem 0;
        background-color: #D7DBE4;
        display: inline-block;
        border-radius: 3px;
        padding: .125rem .5rem .125rem 3.3rem;
    }

    p.port:before {
        content: "Port";
        background-color: #797;
        color: white;
        border-radius: 3px 0 0 3px;
        padding: .125rem .5rem;
        text-transform: uppercase;
        font-size: .7rem;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
    }*/





    $spinner-size: 30px;
    $spinner-color: white;

    .spinner {
        width: $spinner-size;
        height: $spinner-size;
        background-color: $spinner-color;

        margin: 100px auto;
        -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
        animation: sk-rotateplane 1.2s infinite ease-in-out;
    }

    @-webkit-keyframes sk-rotateplane {
        0% { -webkit-transform: perspective($spinner-size*3) }
        50% { -webkit-transform: perspective($spinner-size*3) rotateY(180deg) }
        100% { -webkit-transform: perspective($spinner-size*3) rotateY(180deg)  rotateX(180deg) }
    }

    @keyframes sk-rotateplane {
        0% { 
            transform: perspective($spinner-size*3) rotateX(0deg) rotateY(0deg);
            -webkit-transform: perspective($spinner-size*3) rotateX(0deg) rotateY(0deg) 
        } 50% { 
            transform: perspective($spinner-size*3) rotateX(-180.1deg) rotateY(0deg);
            -webkit-transform: perspective($spinner-size*3) rotateX(-180.1deg) rotateY(0deg) 
        } 100% { 
            transform: perspective($spinner-size*3) rotateX(-180deg) rotateY(-179.9deg);
            -webkit-transform: perspective($spinner-size*3) rotateX(-180deg) rotateY(-179.9deg);
        }
    }
}