devextreme/less/sources/widgets/material/diagram.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/diagram.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/diagram.less";
@import (once) "./drawer.material.less";
@import (once) "./loadIndicator.material.less";
@import (once) "./tooltip.material.less";
@import (once) "./accordion.material.less";
@import (once) "./scrollView.material.less";
@import (once) "./form.material.less";
@import (once) "./toolbar.material.less";
@import (once) "./contextMenu.material.less";
@import (once) "./overlay.material.less";
@import (once) "./fileUploader.material.less";
@import (once) "./popup.material.less";
@import (once) "./speedDialAction.material.less";

@MATERIAL_DIAGRAM_TOOLBAR_ICON_SIZE: @MATERIAL_BASE_ICON_SIZE;
@DIAGRAM_TOOLBAR_COLORBUTTON_BORDER_WIDTH: 3px;

@DIAGRAM_TOOLBOX_TITLE_SIZE: 18px;

.dx-size-default() {
    @DIAGRAM_TOOLBOX_WIDTH: 156px;
    @DIAGRAM_TOOLBOX_H_PADDING: 12px;
    @DIAGRAM_TOOLBOX_ACCORDION_V_PADDING: 8px;
    @DIAGRAM_TOOLBOX_INPUT_MARGIN: 2px;
    @DIAGRAM_TOOLBOX_INPUT_H_PADDING: 9px;
    @DIAGRAM_TOOLBOX_INPUT_V_PADDING: 12px;
    @DIAGRAM_TOOLBOX_INPUT_IMAGE_SIZE: 18px;
    @DIAGRAM_TOOLBOX_INPUT_IMAGE_PADDING: 6px 4px;
    @DIAGRAM_TOOLBOX_MOBILE_PADDING: 68px;

    @DIAGRAM_PROPERTIES_PANEL_PADDING: 0px;
    @DIAGRAM_PROPERTIES_PANEL_SPACING: 16px;
    @DIAGRAM_PROPERTIES_LAYOUT_ICON_SIZE: 64px;

    @DIAGRAM_TOUCHBAR_ITEM_PADDING: 10px;

    @DIAGRAM_FLOATING_TOOLBAR_ITEMS_HEIGHT: 36px;
    @DIAGRAM_FLOATING_TOOLBAR_EDITOR_PADDING: 8px 6px;
    @DIAGRAM_FLOATING_TOOLBAR_EDITOR_BUTTON_PADDING: 4px;

    @DIAGRAM_SMALL_EDITOR_WIDTH: 100px;
    @DIAGRAM_MEDIUM_EDITOR_WIDTH: 180px;
    @DIAGRAM_LARGE_EDITOR_WIDTH: 280px;
}

.dx-size-compact() {
    @DIAGRAM_TOOLBOX_WIDTH: 130px;
    @DIAGRAM_TOOLBOX_H_PADDING: 10px;
    @DIAGRAM_TOOLBOX_ACCORDION_V_PADDING: 6px;
    @DIAGRAM_TOOLBOX_INPUT_MARGIN: 2px;
    @DIAGRAM_TOOLBOX_INPUT_H_PADDING: 8px;
    @DIAGRAM_TOOLBOX_INPUT_V_PADDING: 8px;
    @DIAGRAM_TOOLBOX_INPUT_IMAGE_SIZE: 14px;
    @DIAGRAM_TOOLBOX_INPUT_IMAGE_PADDING: 3px 4px;
    @DIAGRAM_TOOLBOX_MOBILE_PADDING: 58px;

    @DIAGRAM_PROPERTIES_PANEL_PADDING: 6px;
    @DIAGRAM_PROPERTIES_PANEL_SPACING: 8px;
    @DIAGRAM_PROPERTIES_LAYOUT_ICON_SIZE: 48px;

    @DIAGRAM_TOUCHBAR_ITEM_PADDING: 7px;

    @DIAGRAM_FLOATING_TOOLBAR_ITEMS_HEIGHT: 28px;
    @DIAGRAM_FLOATING_TOOLBAR_EDITOR_PADDING: 6px 4px;
    @DIAGRAM_FLOATING_TOOLBAR_EDITOR_BUTTON_PADDING: 2px;

    @DIAGRAM_SMALL_EDITOR_WIDTH: 80px;
    @DIAGRAM_MEDIUM_EDITOR_WIDTH: 120px;
    @DIAGRAM_LARGE_EDITOR_WIDTH: 220px;
}

.dx-diagram {
    border-color: @diagram-border-color;
    // stylelint-disable selector-class-pattern
    .dxdi-control .dxdi-canvas {
        background-color: darken(@overlay-content-bg, 15%);

        .selection-mark,
        .item-selection-rect,
        .item-multi-selection-rect,
        .items-selection-rect,
        .connector-side-mark,
        .connector-point-mark,
        .connector-selection,
        .connector-multi-selection,
        .extension-line path {
            stroke: @button-default-bg;
        }

        .connector-side-mark,
        .extension-line text {
            fill: @button-default-bg;
        }

        .container-target,
        .connection-target,
        .connection-mark:not(.selector),
        .connection-point:not(.selector) {
            stroke: @button-success-bg;
        }

        .connection-mark:not(.selector),
        .connection-point:not(.selector) {
            &.active {
                fill: @button-success-bg;
            }
        }

        .geometry-mark {
            stroke: @button-danger-bg;
        }

        .dxdi-main .dxdi-image {
            .dxdi-spinner {
                path {
                    stroke: @diagram-image-icon-accent-color;
                    stroke-opacity: 1;
                }

                ellipse {
                    stroke: @diagram-image-icon-base-color;
                    stroke-opacity: 0.5;
                }
            }

            .dxdi-user .dxdi-background {
                fill: @diagram-image-icon-base-color;
                opacity: 0.5;
            }

            .dxdi-warning {
                ellipse {
                    fill: @base-danger;
                }
            }
        }
    }

    .dxdi-text-input-container.connector-text .dxdi-text-input {
        border-color: @button-default-bg;
    }
    // stylelint-enable selector-class-pattern

    .dx-diagram-toolbar-wrapper {
        border-bottom: 1px solid @diagram-toolbar-border-color;
    }


    &.dx-diagram-fullscreen {
        background-color: @base-bg;
    }
}

.dx-diagram-toolbox-panel,
.dx-diagram-properties-panel {
    background: @overlay-content-bg;
}

.dx-diagram-floating-toolbar-container {
    background: @overlay-content-bg;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.175);
    border-radius: @popup-border-radius;
    padding: 4px;

    .dx-toolbar .dx-toolbar-items-container {
        height: @DIAGRAM_FLOATING_TOOLBAR_ITEMS_HEIGHT;

        .dx-texteditor {
            .dx-texteditor-input,
            .dx-placeholder:before {
                color: inherit;
                padding: @DIAGRAM_FLOATING_TOOLBAR_EDITOR_PADDING;
            }

            .dx-button {
                width: auto;
                height: auto;
                min-width: 24px;
                min-height: 24px;
                margin: 2px;

                .dx-button-content {
                    padding: @DIAGRAM_FLOATING_TOOLBAR_EDITOR_BUTTON_PADDING;
                }
            }
        }
    }

    &.dx-diagram-properties-panel-toolbar-container {
        &,
        .dx-toolbar,
        .dx-toolbar-items-container,
        .dx-toolbar-item,
        .dx-button {
            width: @MATERIAL_MAIN_FA_BUTTON_SIZE;
            height: @MATERIAL_MAIN_FA_BUTTON_SIZE;

            .dx-button-content {
                padding-top: 0;
                padding-bottom: 0;
                line-height: @MATERIAL_MAIN_FA_BUTTON_SIZE;
            }
        }
    }

    .dx-toolbar-item {
        padding: 0 4px 0 0;
    }
}

.dx-diagram-toolbox-popup {
    & > .dx-overlay-content {
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.175);
    }

    .dx-popup-title {
        margin-bottom: 0;

        &.dx-toolbar {
            font-size: 0.8em;
            min-height: @DIAGRAM_TOOLBOX_TITLE_SIZE;

            .dx-toolbar-items-container {
                height: @DIAGRAM_TOOLBOX_TITLE_SIZE;
            }
        }

        .dx-button.dx-button-has-icon:not(.dx-button-has-text),
        .dx-button-content {
            width: @DIAGRAM_TOOLBOX_TITLE_SIZE;
            height: @DIAGRAM_TOOLBOX_TITLE_SIZE;
        }
    }

    .dx-accordion {
        width: @DIAGRAM_TOOLBOX_WIDTH;
    }

    .dx-diagram-toolbox-input-container {
        border-bottom: 1px solid @accordion-item-border-color;
    }

    .dx-diagram-toolbox-input {
        width: @DIAGRAM_TOOLBOX_WIDTH - 2 * @DIAGRAM_TOOLBOX_INPUT_MARGIN;
        margin: @DIAGRAM_TOOLBOX_INPUT_MARGIN;

        .dx-texteditor-input,
        .dx-placeholder:before {
            padding: @DIAGRAM_TOOLBOX_INPUT_V_PADDING @DIAGRAM_TOOLBOX_INPUT_H_PADDING;
        }

        &.dx-editor-outlined {
            &:not(.dx-state-focused) {
                box-shadow: none;
            }

            .dx-texteditor-buttons-container:last-child > .dx-button:last-child {
                margin-right: 0;
            }
        }

        .dx-button {
            .dx-button-content {
                padding: @DIAGRAM_TOOLBOX_INPUT_IMAGE_PADDING;
            }

            .dx-icon {
                font-size: @DIAGRAM_TOOLBOX_INPUT_IMAGE_SIZE;
            }
        }
    }

    .dx-popup-title .dx-closebutton {
        width: @DIAGRAM_TOOLBOX_TITLE_SIZE;
        height: @DIAGRAM_TOOLBOX_TITLE_SIZE;
        margin: 1px 0 0;
    }

    .dx-popup-title .dx-closebutton .dx-icon {
        width: 14px;
        height: 14px;
        padding: 2px;
        font-size: 12px;
        line-height: 12px;
        background-position: 2px 2px;
        background-size: 12px 12px;
    }

    &.dx-diagram-mobile-popup {
        .dx-popup-content {
            padding-top: @DIAGRAM_TOOLBOX_MOBILE_PADDING;

            .dx-diagram-toolbox-input-container {
                border-top: 1px solid @accordion-item-border-color;
            }
        }
    }
}

.dx-diagram-toolbox-panel {
    .dx-accordion {
        margin: 0;

        .dx-accordion-item {
            border-left: none;
            border-right: none;
            border-bottom: 1px solid @accordion-item-border-color;
            border-top: none;
            box-shadow: none;
        }

        .dx-accordion-item-opened {
            margin: 0;
        }

        .dx-item-content.dx-accordion-item-title {
            height: 32px;

            .dx-accordion-item-title-caption {
                font-size: 0.8em;
                text-transform: uppercase;
                left: @DIAGRAM_TOOLBOX_H_PADDING;
                top: @DIAGRAM_TOOLBOX_ACCORDION_V_PADDING;
                right: 32px;
            }

            &::before {
                font-size: 1em;
                line-height: 0.8em;
                right: 0;
                top: @DIAGRAM_TOOLBOX_ACCORDION_V_PADDING;
            }
        }

        .dx-item-content.dx-accordion-item-body {
            padding: @DIAGRAM_TOOLBOX_ACCORDION_V_PADDING @DIAGRAM_TOOLBOX_H_PADDING;
        }
    }

    .dxdi-toolbox .dxdi-canvas .dxdi-shape-text { // stylelint-disable-line selector-class-pattern
        opacity: @diagram-toolbox-shape-text-opacity;
    }
}

.dx-diagram-properties-popup {
    .dx-multiview-item,
    &.dx-diagram-properties-popup-notabs .dx-popup-content {
        padding: @DIAGRAM_PROPERTIES_PANEL_PADDING;
    }

    .dx-diagram-properties-panel-group-title {
        text-transform: uppercase;
        padding: @DIAGRAM_PROPERTIES_PANEL_SPACING;
    }

    .dx-diagram-properties-panel-group-toolbar {
        padding: 0 @DIAGRAM_PROPERTIES_PANEL_SPACING @DIAGRAM_PROPERTIES_PANEL_SPACING;

        .dx-toolbar-item {
            margin-bottom: @DIAGRAM_PROPERTIES_PANEL_SPACING / 2;

            .dx-button {
                height: auto;
            }

            &.dx-diagram-lg-icon-item .dx-diagram-i {
                background-size: @DIAGRAM_PROPERTIES_LAYOUT_ICON_SIZE @DIAGRAM_PROPERTIES_LAYOUT_ICON_SIZE;
                width: @DIAGRAM_PROPERTIES_LAYOUT_ICON_SIZE;
                height: @DIAGRAM_PROPERTIES_LAYOUT_ICON_SIZE;
            }
        }
    }

    .dx-diagram-properties-panel-group-toolbar:first-child {
        padding-top: @DIAGRAM_PROPERTIES_PANEL_SPACING;
    }

    &.dx-diagram-mobile-popup {
        .dx-popup-title {
            padding: 8px 8px 0 0;
        }

        .dx-tabpanel {
            .dx-tab-selected:before {
                top: 0;
                bottom: initial;
            }
        }
    }
}

.dx-diagram-toolbar {
    .dx-format-active:not(.dx-color-format):not(.dx-background-format) {
        background-color: @diagram-normal-format-active-bg;

        &.dx-button-success {
            background-color: @diagram-success-format-active-bg;
        }

        &.dx-button-default {
            background-color: @diagram-default-format-active-bg;
        }

        &.dx-button-danger {
            background-color: @diagram-danger-format-active-bg;
        }
    }

    .dx-texteditor.dx-editor-filled,
    .dx-dropdowneditor.dx-editor-filled {
        background-color: transparent;
    }

    .dx-diagram-toolbar-separator {
        height: 50%;
        border-left-color: @diagram-toolbar-border-color;
    }

    .dx-diagram-toolbar-menu-separator {
        border-top-color: @diagram-toolbar-border-color;
    }

    .dx-diagram-toolbar-text {
        padding: @MATERIAL_FIELD_VALUE_TOP_PADDING 0 @MATERIAL_FIELD_VALUE_BOTTOM_PADDING @MATERIAL_FIELD_LABELVALUE_SPACING;
    }

    .dx-diagram-lg-edit-item .dx-texteditor {
        width: @DIAGRAM_LARGE_EDITOR_WIDTH;
    }

    .dx-diagram-md-edit-item .dx-texteditor {
        width: @DIAGRAM_MEDIUM_EDITOR_WIDTH;
    }

    .dx-diagram-sm-edit-item .dx-texteditor {
        width: @DIAGRAM_SMALL_EDITOR_WIDTH;
    }

    .dx-diagram-color-edit-item .dx-dropdowneditor-field-template-wrapper {
        .dx-diagram-i,
        .dx-icon {
            border-bottom-width: @DIAGRAM_TOOLBAR_COLORBUTTON_BORDER_WIDTH;
            border-bottom-style: solid;
        }
    }
}

.dx-diagram-toolbar,
.dx-dropdownmenu-popup {
    .dx-diagram-image-dropdown-item,
    .dx-diagram-color-edit-item {
        .dx-dropdowneditor-field-template-wrapper {
            .dx-diagram-i,
            .dx-icon {
                margin-left: 12px;
                margin-right: 12px;
            }

            .dx-icon {
                font-size: @MATERIAL_DIAGRAM_TOOLBAR_ICON_SIZE;
                color: @base-text-color;
            }
        }
    }
}

.dx-diagram-contextmenu.dx-context-menu {
    .dx-menu-item .dx-menu-item-content .dx-menu-item-popout-container {
        right: 0;
    }

    .dx-menu-no-icons > .dx-menu-item-wrapper > .dx-menu-item > .dx-menu-item-content .dx-menu-item-text {
        padding-left: 4px;
    }
}

.dx-diagram-touchbar {
    .dx-menu-item .dx-menu-item-content {
        padding: @DIAGRAM_TOUCHBAR_ITEM_PADDING;
    }

    .dx-menu-separator {
        width: 1px;
        height: @MATERIAL_DIAGRAM_TOOLBAR_ICON_SIZE + @DIAGRAM_TOUCHBAR_ITEM_PADDING + @DIAGRAM_TOUCHBAR_ITEM_PADDING + 2;
        margin: 0;
    }
}

.diagram-action-icons-mixin(@base-text-color, @base-text-color, @MATERIAL_DIAGRAM_TOOLBAR_ICON_SIZE, @DIAGRAM_TOOLBAR_COLORBUTTON_BORDER_WIDTH);

.dx-diagram-toolbox-popup .dx-button-has-icon .dx-icon.dx-icon-diagram-toolbox-drag {
    .diagram-icon-colored(url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22_x31_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2012%2012%22%20style%3D%22enable-background%3Anew%200%200%2012%2012%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%20%7D%0A%3C%2Fstyle%3E%0A%3Cg%20id%3D%22_x32_%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2C8h1V3H0V8z%20M2%2C8h1V3H2V8z%20M4%2C8h1V3H4V8z%20M6%2C8h1V3H6V8z%20M8%2C8h1V3H8V8z%20M10%2C3v5h1V3H10z%22%20fill%3D%22currentColor%22%20%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), @popup-title-color, @DIAGRAM_TOOLBOX_TITLE_SIZE, @DIAGRAM_TOOLBOX_TITLE_SIZE);

    line-height: @DIAGRAM_TOOLBOX_TITLE_SIZE;
    background-size: @DIAGRAM_TOOLBOX_TITLE_SIZE @DIAGRAM_TOOLBOX_TITLE_SIZE;
}

.dx-diagram-i-button-properties-panel-open {
    .diagram-icon-colored(url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22_x31_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2018%2018%22%20style%3D%22enable-background%3Anew%200%200%2018%2018%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%7D%0A%09.st1%7Bopacity%3A0.35%3Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Benable-background%3Anew%20%20%20%20%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20id%3D%22_x33_%22%20class%3D%22st0%22%20d%3D%22M17.8%2C10.3l-1%2C1l-2.1-2.1l1-1C15.8%2C8.1%2C15.9%2C8%2C16.1%2C8c0.1%2C0%2C0.3%2C0.1%2C0.4%2C0.2l1.3%2C1.3%0A%09C18%2C9.7%2C18%2C10.1%2C17.8%2C10.3z%20M14%2C2H4v13h2v2H4c-1.1%2C0-2-0.9-2-2V2c0-1.1%2C0.9-2%2C2-2h10c1.1%2C0%2C2%2C0.9%2C2%2C2v3l-2%2C2V2z%20M16.1%2C11.9l-6%2C6.1H8%0A%09v-2.1l6.1-6.1L16.1%2C11.9z%22%20fill%3D%22currentColor%22%2F%3E%0A%3Cpath%20id%3D%22_x32_%22%20class%3D%22st1%22%20d%3D%22M5%2C3h8v5l-6%2C6H5V3z%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E%0A"), @button-default-color, @MATERIAL_DIAGRAM_TOOLBAR_ICON_SIZE, @MATERIAL_DIAGRAM_TOOLBAR_ICON_SIZE);
}