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

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/diagram.material.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) "../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) "./fileUploader.material.less";
@import (once) "./popup.material.less";

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

.dx-size-default() {
    @DIAGRAM_TOUCHBAR_ITEM_PADDING: 10px;
}

.dx-size-compact() {
    @DIAGRAM_TOUCHBAR_ITEM_PADDING: 7px;
}

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

        .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;
                }
            }
        }
    }
    // stylelint-enable selector-class-pattern

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

    .dx-diagram-left-panel,
    .dx-diagram-right-panel {
        background: @overlay-content-bg;

        .dx-accordion {
            .dx-accordion-item {
                border-left: none;
                border-right: none;

                .dx-diagram-right-panel-begin-group {
                    padding-top: 24px;
                }
            }

            .dx-accordion-item:first-of-type {
                border-top: none;
            }

            .dx-state-focused {
                &.dx-accordion-item {
                    border-color: @accordion-item-border-color;
                }

                &.dx-accordion-item-closed:not(:last-of-type) {
                    border-bottom-color: transparent;
                }
            }
        }
    }

    .dx-diagram-left-panel {
        border-right-color: @diagram-toolbar-border-color;

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

    .dx-diagram-right-panel {
        border-left-color: @diagram-toolbar-border-color;
    }

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

.dx-diagram-toolbar {
    background-color: transparent;

    .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-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-format-sm {
        .dx-texteditor {
            width: 110px;
        }
    }

    .dx-diagram-select-sm .dx-texteditor {
        width: 110px;
    }

    .dx-diagram-color-b .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-select-b,
    .dx-diagram-color-b {
        .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-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-icons-mixin(@base-text-color, @base-text-color, @MATERIAL_DIAGRAM_TOOLBAR_ICON_SIZE);