_layout.scss

@include exports("gantt/layout") {

    $row-height: #{$line-height-em} + #{2 * $cell-padding} + #{$grid-cell-horizontal-border-width};

    .k-gantt {
        position: relative;
        white-space: nowrap;


        // other
        td {
            overflow: hidden;
            white-space: nowrap;
            vertical-align: top;
        }
        .k-grid-header tr {
            height: add-three( $line-height-em, 2 * $grid-header-padding-y, 1px );
        }
        .k-grid-content tr {
            height: add-three( $line-height-em, 2 * $grid-cell-padding-y, $grid-cell-horizontal-border-width );
        }


        // Layout
        .k-gantt-layout {
            white-space: normal;
            vertical-align: top;
            display: inline-block;
        }


        // Splitbar
        .k-splitbar {
            position: relative;
            display: inline-flex;
        }

    }


    // Toolbar
    .k-gantt-toolbar {
        padding: $toolbar-padding-y $toolbar-padding-x;
        border-width: 0 0 1px;
        border-style: solid;
        border-color: inherit;
        line-height: $toolbar-line-height;

        .k-gantt-layout + & {
            border-width: 1px 0 0;
        }
    }
    .k-gantt-actions {
        float: left;

        .k-button + .k-button {
            margin-left: $toolbar-padding-x;
        }
    }
    .k-gantt-views {
        float: right;
        display: inline-flex;
    }
    .k-gantt-toggle {
        margin-right: .5em;
        display: none;
        float: left;
    }
    @media only screen and (max-width: 480px) {
        .k-gantt-toggle {
            display: inline-flex;
        }
        .k-gantt-pdf,
        .k-gantt-create {
            padding: $button-padding-y;
            width: button-size();
            height: button-size();

            .k-icon {
                margin: 0;
            }
            span + span {
                display: none;
            }
        }
    }


    // View switcher
    .k-gantt-views {
        @extend %ul-button-group !optional;

        .k-current-view { display: none; }
        .k-current-view .k-link::after {
            content: "";
            margin: 0 0 0 1ex;
            border: .25em solid transparent;
            border-top: .5em solid currentColor;
            border-bottom-width: 0;
            display: inline-block;
        }
    }
    @media (max-width: 1024px) {
        ul.k-gantt-views {
            flex-direction: column;
            align-items: stretch;
            position: absolute;
            top: $toolbar-padding-y;
            right: $toolbar-padding-x;
            z-index: 1000;

            li { display: none; }
            .k-current-view { display: block; }


            &.k-state-expanded {
                li { display: block; }
            }
        }
    }


    // Treelist
    .k-gantt-treelist {

        .k-treelist {
            height: 100%;
            border-width: 0;
        }
        .k-grid-header {
            padding: 0 !important; // sass-lint:disable-line no-important
        }
        .k-grid-header tr {
            height: add-three( 2 * $line-height-em, 4 * $grid-header-padding-y, 2px );
            vertical-align: bottom;
        }
        .k-grid-content {
            overflow: hidden;
            overflow-x: scroll;
        }
        .k-grid-content td {
            vertical-align: middle;
        }
    }


    // Timeline
    .k-gantt-timeline {

        .k-timeline {
            height: 100%;
            border-width: 0;
        }
        .k-grid-header {}
        .k-grid-content {
            overflow-x: scroll;
        }
    }


    // Tables
    .k-gantt-tables {
        position: relative;
        border-color: inherit;
    }
    .k-gantt-rows,
    .k-gantt-columns {
        border-color: inherit;
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
    }
    .k-gantt-rows {}


    // Deps,
    .k-gantt-dependencies {
        opacity: .7;
        position: absolute;
        top: 0;
        left: 0;
    }


    // Tasks
    .k-gantt-tasks {
        position: relative;

        td {
            padding: 0;
            border-width: 0;
            position: relative;
            vertical-align: middle;
        }
        td::after { content: "\a0"; }
    }
    .k-task-wrap {
        margin: 0 -21px;
        padding: 5px 21px;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        z-index: 2;
    }
    .k-task-wrap.k-drag-hint {
        position: absolute;
    }
    .k-task {
        position: relative;
        flex: 1 1 auto;
    }
    .k-task-dot {
        width: 16px;
        height: 16px;
        line-height: 1;
        cursor: pointer;
        display: none;
        position: absolute;
    }
    .k-task-wrap:hover .k-task-dot,
    .k-task-wrap.k-origin .k-task-dot {
        display: block;
    }
    .k-task-dot::before {
        content: "";
        margin: -4px 0 0 -4px;
        width: 8px;
        height: 8px;
        border-width: 0;
        border-style: solid;
        border-radius: 100%;
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
    }
    .k-task-dot:hover::before,
    .k-task-dot.k-state-hover::before {
        border-width: 1px;
    }
    .k-task-start { left: 0; }
    .k-task-end { right: 0; }
    .k-task-draghandle {
        margin-left: 16px;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-top-width: 0;
        border-bottom-color: inherit;
        position: absolute;
        bottom: 0;
        // display: none;
        cursor: e-resize;
        visibility: hidden;
    }
    .k-task-wrap:hover .k-task-draghandle {
        visibility: visible;
    }


    // Milestone
    .k-milestone-wrap {
        margin: 0 -2em;
    }
    .k-task-milestone {
        width: 1em;
        height: 1em;
        border-width: 1px;
        border-style: solid;
        transform: rotate(45deg);
    }


    // Summary
    .k-summary-wrap {}
    .k-task-summary {
        height: 10px;
        display: inline-block;
        vertical-align: top;
    }
    .k-task-summary,
    .k-task-summary-complete {
        background-color: currentColor;

        &::before,
        &::after {
            content: "";
            width: 0;
            height: 0;
            border: 8px solid transparent;
            position: absolute;
            top: 0;
        }

        &::before {
            border-left-color: currentColor;
            left: 0;
        }
        &::after {
            border-right-color: currentColor;
            right: 0;
        }
    }
    .k-task-summary-complete {
        height: 10px;
        position: relative;
        z-index: 2;
    }
    .k-task-summary-progress {
        height: 15px;
        overflow: hidden;
    }


    // Single task
    .k-single-wrap {}
    .k-task-single {
        @include border-radius();
        border-width: 1px;
        border-style: solid;
        cursor: default;

        .k-resize-handle {
            opacity: .5;
            z-index: 2;
            visibility: hidden;
        }
        .k-resize-handle::before {
            position: absolute;
            top: 2px;
            bottom: 2px;
        }
        .k-resize-w { left: 0; }
        .k-resize-w::before {
            left: 2px;
            border-left-width: 1px;
        }
        .k-resize-e { right: 0; }
        .k-resize-e::before {
            right: 2px;
            border-left-width: 1px;
        }

        &:hover .k-resize-handle,
        &:hover .k-task-actions {
            visibility: visible;
        }
    }
    .k-task-complete {
        @include border-radius();
        width: 20%;
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        left: 0;
    }
    .k-task-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .k-task-template {
        padding: $padding-y-sm $padding-x-sm;
        line-height: normal;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .k-task-actions {
        padding: $padding-y-sm;
        white-space: nowrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        visibility: hidden;
    }
    .k-task-actions > .k-link {
        display: inline-flex;
    }

    .k-resources-wrap {
        position: absolute;
        display: inline-block;
        z-index: 2;
        margin-left: 20px;
        margin-top: -2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .k-resource {
            margin: 0 5px;
        }
    }


    // Task tooltip
    .k-task-details {
        padding: $padding-y $padding-x;

        strong {
            font-size: $font-size-lg;
            font-weight: normal;
            display: block;
        }
        .k-task-pct {
            font-size: $icon-size-lg;
        }
        ul {
            line-height: normal;
        }
    }

}




@include exports("gantt-edit-form/layout") {


    .k-gantt-edit-form {}

    .k-gantt-edit-form .k-edit-buttons {}
    .k-gantt-edit-form .k-gantt-update {}
    .k-gantt-edit-form .k-gantt-cancel {}
    .k-gantt-edit-form .k-gantt-delete {
        float: left;
    }

}


@include exports("gantt/rtl") {

    .k-rtl {

        .k-gantt-views {
            float: left;
        }

        .k-gantt-actions {
            float: right;

            .k-button + .k-button {
                margin-left: 0;
                margin-right: $toolbar-padding-x;
            }
        }

        .k-gantt-rows,
        .k-gantt-columns {
            left: auto;
            right: 0;
        }

        .k-task-wrap:not(.k-milestone-wrap) {
            margin: 0 -26px;
        }
        .k-timeline .k-gantt-tasks tbody {
            text-align: left;
        }

        .k-task-content {
            text-align: right;
        }

        .k-task-complete {
            left: auto;
            right: 0;
        }

        .k-task-draghandle {
            margin-left: 0;
            margin-right: 16px;
        }

        .k-gantt-dependencies {
            left: auto;
            right: 0;
        }


        .k-grid-header .k-header {
            position: static;
        }

        .k-gantt-delete {
            float: right;
        }
    }
}