devextreme/less/sources/widgets/generic/gantt.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/gantt.generic.less)
* Version: 19.2.6
* Build date: Thu Jan 30 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "./scrollView.generic.less";
@import (once) "./treeList.generic.less";
@import (once) "./splitter.generic.less";

@gantt_successor_background_color: white;

.dx-gantt {
    border: 1px solid @base-border-color;

    .dx-treelist .dx-treelist-rowsview .dx-selection.dx-row > td,
    .dx-treelist .dx-treelist-rowsview .dx-selection.dx-row:hover > td,
    .dx-treelist .dx-treelist-rowsview .dx-selection.dx-row > tr > td,
    .dx-treelist .dx-treelist-rowsview .dx-selection.dx-row:hover > tr > td {
        background-color: @gantt-selection-bg;
    }

    .dx-treelist-rowsview .dx-selection.dx-row > td,
    .dx-treelist-rowsview .dx-selection.dx-row:hover > td,
    .dx-treelist-rowsview .dx-selection.dx-row > tr > td,
    .dx-treelist-rowsview .dx-selection.dx-row:hover > tr > td {
        color: @base-text-color;
    }

    .dx-treelist-rowsview .dx-selection.dx-row.dx-row-lines > td,
    .dx-treelist-rowsview .dx-selection.dx-row:hover.dx-row-lines > td,
    .dx-treelist-rowsview .dx-selection.dx-row.dx-row-lines > tr > td,
    .dx-treelist-rowsview .dx-selection.dx-row:hover.dx-row-lines > tr > td {
        border-bottom-color: @base-border-color;
    }

    .dx-treelist-rowsview .dx-selection.dx-row.dx-column-lines > td,
    .dx-treelist-rowsview .dx-selection.dx-row:hover.dx-column-lines > td,
    .dx-treelist-rowsview .dx-selection.dx-row.dx-column-lines > tr > td,
    .dx-treelist-rowsview .dx-selection.dx-row:hover.dx-column-lines > tr > td {
        border-left-color: @base-border-color;
        border-right-color: @base-border-color;
    }

    .dx-treelist-rowsview tr:not(.dx-row-focused).dx-selection .dx-treelist-empty-space {
        color: @base-label-color;
    }

    .dx-gantt-view {
        background-color: @base-bg;
    }

    .dx-header-row {
        height: @GANTT_HEADER_ITEM_HEIGHT;
    }

    .dx-gantt-header {
        color: @treelist-columnchooser-item-color;

        .dx-gantt-tsac,
        .dx-gantt-tsa,
        .dx-gantt-hb,
        .dx-gantt-vb {
            border-color: @base-border-color;
            background-color: @base-bg;
        }
    }

    .dx-gantt-si {
        padding-left: 16px;
        padding-right: 16px;
    }

    .dx-gantt-tsac,
    .dx-gantt-tsa {
        border-bottom: 1px solid @base-border-color;
    }

    .dx-gantt-hb {
        border-top: 1px solid @base-border-color;
    }

    .dx-gantt-vb {
        border-left: 1px solid @base-border-color;
    }

    .dx-gantt-taskWrapper {
        padding-top: @GANTT_TASK_WRAPPER_PADDING_TOP;

        .dx-gantt-task,
        .dx-gantt-titleOut,
        .dx-gantt-taskRes {
            height: @GANTT_TASK_HEIGHT;
        }

        .dx-gantt-task {
            background-color: @base-accent;
            border-radius: @base-border-radius;

            .dx-gantt-tPrg {
                border-radius: @base-border-radius;
                background-color: rgba(0, 0, 0, 0.2);
            }

            &.dx-gantt-smallTask {
                border-radius: @base-border-radius;

                .dx-gantt-titleIn {
                    padding: 0 2px;
                }
            }
        }

        .dx-gantt-taskRes {
            color: #fff;
            background-color: #999;
            border-radius: @base-border-radius;
            margin-left: 21px;
            padding-left: 4px;
            padding-right: 4px;
        }

        .dx-gantt-titleIn {
            color: #fff;
            padding: 0 @GANTT_TASK_WRAPPER_PADDING_TOP;
        }

        .dx-gantt-titleOut {
            padding-right: 20px;
        }
    }

    .dx-gantt-milestone {
        background-image: linear-gradient(135deg, @base-border-color, @base-text-color);
        width: @GANTT_MILESTONE_SIZE;
        height: @GANTT_MILESTONE_SIZE;
    }

    .dx-gantt-task-edit-wrapper {
        padding-top: @GANTT_TASK_WRAPPER_PADDING_TOP;
        padding-left: 1px;

        .dx-gantt-task-edit-frame {
            height: @GANTT_TASK_HEIGHT;
            border: 1px solid darken(@base-accent, 10%);
            border-radius: @base-border-radius;

            .dx-gantt-task-edit-progress {
                border-color: transparent transparent darken(@base-accent, 10%) transparent;
            }

            .dx-gantt-task-edit-progress-status {
                border-radius: @base-border-radius;
            }
        }
    }

    .dx-gantt-task-edit-wrapper-successor {
        padding-top: @GANTT_TASK_WRAPPER_PADDING_TOP;

        .dx-gantt-task-edit-frame-successor {
            height: @GANTT_TASK_HEIGHT;
        }
    }

    .dx-gantt-task-edit-dependency-r,
    .dx-gantt-task-edit-successor-dependency-r,
    .dx-gantt-task-edit-dependency-l,
    .dx-gantt-task-edit-successor-dependency-l {
        background: @gantt_successor_background_color;
        border: 1px solid darken(@base-accent, 10%);
        width: @GANTT_DEPENDENCY_SUCCESSOR_SIZE;
        height: @GANTT_DEPENDENCY_SUCCESSOR_SIZE;
        top: (@GANTT_TASK_HEIGHT - @GANTT_DEPENDENCY_SUCCESSOR_SIZE - 1) / 2;
    }

    .dx-gantt-task-edit-dependency-r,
    .dx-gantt-task-edit-successor-dependency-r {
        left: -@GANTT_DEPENDENCY_SUCCESSOR_SIZE - 1px;
    }

    .dx-gantt-task-edit-dependency-l,
    .dx-gantt-task-edit-successor-dependency-l {
        right: -@GANTT_DEPENDENCY_SUCCESSOR_SIZE - 1px;
    }

    .dx-gantt-task-edit-dependency-line {
        background-color: @base-text-color;
    }

    .dx-gantt-sel {
        background-color: @gantt-selection-bg;
        border-top: 1px solid @treelist-selection-bg;
        border-bottom: 1px solid @treelist-selection-bg;
    }

    .dx-gantt-tac-hb .dx-gantt-sel {
        border: none;
    }

    .dx-gantt-conn-v {
        border-left-color: @base-text-color;
    }

    .dx-gantt-conn-h {
        border-top-color: @base-text-color;
    }

    .dx-gantt-arrow {
        border: 5px solid @base-text-color;
    }

    .dx-gantt-altRow,
    .dx-gantt-collapsable-row {
        background-color: @gantt-collapsable-row-bg;
    }
}