devextreme/less/sources/widgets/material/gantt.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/gantt.material.less)
* Version: 20.1.4
* Build date: Tue Jun 02 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "../base/gantt.less";
@import (once) "./scrollView.material.less";
@import (once) "./treeList.material.less";
@import (once) "./splitter.material.less";

@gantt_successor_background_color: white;

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

    .dx-gantt-toolbar-wrapper {
        padding: 5px;
        border-bottom: 1px solid @base-border-color;

        .dx-gantt-toolbar-separator {
            border-left-color: @base-border-color;
        }

        .dx-toolbar .dx-toolbar-items-container {
            height: 42px;
        }
    }

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

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

    .dx-gantt-header {
        color: @datagrid-columnchooser-item-color;
        font-size: @MATERIAL_FORM_LABEL_FONT_SIZE;

        .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 {
            height: @GANTT_TASK_HEIGHT;
            line-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-parent {
                height: @GANTT_TASK_HEIGHT - 2px;
                line-height: @GANTT_TASK_HEIGHT - 2px;
                background-color: @gantt_parent_task_background_color;
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;

                &:not(.dx-gantt-noPrg) .dx-gantt-tPrg {
                    background-color: rgba(255, 255, 255, 0.2);
                }

                &:not(.dx-gantt-smallTask)::before,
                &:not(.dx-gantt-smallTask)::after,
                &:not(.dx-gantt-smallTask):not(.dx-gantt-noPrg) .dx-gantt-tPrg::before,
                &:not(.dx-gantt-smallTask).dx-gantt-cmpl .dx-gantt-tPrg::after {
                    content: '';
                    position: absolute;
                    bottom: -8px;
                    border-width: 4px;
                    border-style: solid;
                }

                &::before,
                &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before {
                    left: 0;
                    border-right-color: transparent;
                    border-bottom-color: transparent;
                }

                &::before {
                    border-left-color: @gantt_parent_task_background_color;
                    border-top-color: @gantt_parent_task_background_color;
                }

                &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before {
                    border-left-color: rgba(255, 255, 255, 0.2);
                    border-top-color: rgba(255, 255, 255, 0.2);
                }

                &::after,
                &.dx-gantt-cmpl .dx-gantt-tPrg::after {
                    right: 0;
                    border-left-color: transparent;
                    border-bottom-color: transparent;
                }

                &::after {
                    border-right-color: @gantt_parent_task_background_color;
                    border-top-color: @gantt_parent_task_background_color;
                }

                &.dx-gantt-cmpl::after {
                    border-right-color: rgba(255, 255, 255, 0.2);
                    border-top-color: rgba(255, 255, 255, 0.2);
                }

                &.dx-gantt-cmpl .dx-gantt-tPrg::after {
                    border-right-color: @gantt_parent_task_background_color;
                    border-top-color: @gantt_parent_task_background_color;
                }

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

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

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

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

    .dx-gantt-milestone {
        background-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;

                &:before {
                    width: 12px;
                    height: 6px;
                    bottom: -14px;
                    border: 1px solid darken(@base-accent, 10%);
                }
            }

            .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: @datagrid-selection-bg;
    }

    .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-tm {
        border-left: 1px dashed @base-accent;
    }

    .dx-gantt-ti {
        border-left: 1px dashed @base-accent;
        border-right: 1px dashed @base-accent;
        background-color: fade(@base-accent, 15%);
    }

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

.gantt-icons-mixin(@gantt-icon-color);