devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
432 lines (356 loc) • 14.2 kB
text/less
/**
* DevExtreme (widgets/generic/diagram.generic.less)
* Version: 20.1.7
* Build date: Tue Aug 25 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.generic.less";
@import (once) "./accordion.generic.less";
@import (once) "./loadIndicator.generic.less";
@import (once) "./tabs.generic.less";
@import (once) "./tooltip.generic.less";
@import (once) "./scrollView.generic.less";
@import (once) "./form.generic.less";
@import (once) "./toolbar.generic.less";
@import (once) "./contextMenu.generic.less";
@import (once) "./overlay.generic.less";
@import (once) "./fileUploader.generic.less";
@import (once) "./popup.generic.less";
@import (once) "./speedDialAction.generic.less";
@GENERIC_DIAGRAM_TOOLBAR_ICON_SIZE: @GENERIC_BASE_ICON_SIZE;
@DIAGRAM_TOOLBAR_COLORBUTTON_BORDER_WIDTH: 3px;
@DIAGRAM_TOUCHBAR_ITEM_PADDING: 5px;
@DIAGRAM_TOOLBOX_TITLE_SIZE: 12px;
.dx-size-default() {
@DIAGRAM_TOOLBOX_WIDTH: 144px;
@DIAGRAM_TOOLBOX_H_PADDING: 12px;
@DIAGRAM_TOOLBOX_ACCORDION_V_PADDING: 6px;
@DIAGRAM_TOOLBOX_INPUT_MARGIN: 2px;
@DIAGRAM_TOOLBOX_INPUT_H_PADDING: 9px;
@DIAGRAM_TOOLBOX_INPUT_V_PADDING: 4px;
@DIAGRAM_TOOLBOX_INPUT_IMAGE_SIZE: 12px;
@DIAGRAM_TOOLBOX_MOBILE_PADDING: 66px;
@DIAGRAM_PROPERTIES_PANEL_PADDING: 8px;
@DIAGRAM_PROPERTIES_PANEL_SPACING: 8px;
@DIAGRAM_PROPERTIES_LAYOUT_ICON_SIZE: 64px;
@DIAGRAM_SMALL_EDITOR_WIDTH: 100px;
@DIAGRAM_MEDIUM_EDITOR_WIDTH: 150px;
@DIAGRAM_LARGE_EDITOR_WIDTH: 240px;
}
.dx-size-compact() {
@DIAGRAM_TOOLBOX_WIDTH: 114px;
@DIAGRAM_TOOLBOX_H_PADDING: 8px;
@DIAGRAM_TOOLBOX_ACCORDION_V_PADDING: 4px;
@DIAGRAM_TOOLBOX_INPUT_MARGIN: 1px;
@DIAGRAM_TOOLBOX_INPUT_H_PADDING: 5px;
@DIAGRAM_TOOLBOX_INPUT_V_PADDING: 3px;
@DIAGRAM_TOOLBOX_INPUT_IMAGE_SIZE: 10px;
@DIAGRAM_TOOLBOX_MOBILE_PADDING: 56px;
@DIAGRAM_PROPERTIES_PANEL_PADDING: 4px;
@DIAGRAM_PROPERTIES_PANEL_SPACING: 4px;
@DIAGRAM_PROPERTIES_LAYOUT_ICON_SIZE: 48px;
@DIAGRAM_SMALL_EDITOR_WIDTH: 70px;
@DIAGRAM_MEDIUM_EDITOR_WIDTH: 120px;
@DIAGRAM_LARGE_EDITOR_WIDTH: 180px;
}
.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.55;
}
}
.dxdi-user .dxdi-background {
fill: @diagram-image-icon-base-color;
opacity: 0.55;
}
.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 {
border: 1px solid @overlay-border-color;
background: @overlay-content-bg;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.175);
border-radius: @popup-border-radius;
padding: 2px;
&.dx-diagram-properties-panel-toolbar-container {
&,
.dx-toolbar,
.dx-toolbar-items-container,
.dx-toolbar-item,
.dx-button {
width: @GENERIC_MAIN_FA_BUTTON_SIZE;
height: @GENERIC_MAIN_FA_BUTTON_SIZE;
.dx-button-content {
padding-top: 0;
padding-bottom: 0;
line-height: @GENERIC_MAIN_FA_BUTTON_SIZE - 4px;
}
}
}
.dx-toolbar-item {
padding: 0 2px 0 0;
}
}
.dx-diagram-toolbox-popup {
& > .dx-overlay-content {
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.175);
}
.dx-popup-title {
&.dx-toolbar {
font-size: 0.5em;
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;
box-shadow: none;
.dx-texteditor-input,
.dx-placeholder:before {
padding: @DIAGRAM_TOOLBOX_INPUT_V_PADDING @DIAGRAM_TOOLBOX_INPUT_H_PADDING;
}
.dx-button .dx-button-content {
padding: 2px;
}
.dx-button .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: 10px;
height: 10px;
padding: 1px;
font-size: 8px;
line-height: 8px;
background-position: 1px 1px;
background-size: 8px 8px;
}
&.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 {
.dx-accordion-item {
border-left: none;
border-right: none;
&:first-of-type {
border-top: none;
}
}
}
.dx-item-content.dx-accordion-item-title {
padding: @DIAGRAM_TOOLBOX_ACCORDION_V_PADDING @DIAGRAM_TOOLBOX_H_PADDING;
.dx-accordion-item-title-caption {
font-size: 0.7em;
font-weight: bold;
}
&::before {
font-size: 0.7em;
line-height: 1.5em;
}
}
.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 {
font-weight: bold;
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-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: 2px 8px 0 0;
}
.dx-tabpanel {
.dx-tab-selected:before {
top: -1px;
}
}
}
}
.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 {
border-left-color: @diagram-toolbar-border-color;
}
.dx-diagram-toolbar-menu-separator {
border-top-color: @diagram-toolbar-border-color;
}
.dx-diagram-toolbar-text {
padding: @GENERIC_FIELD_VALUE_TOP_PADDING 0 @GENERIC_FIELD_VALUE_BOTTOM_PADDING @GENERIC_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: 8px;
margin-right: 7px;
}
.dx-icon {
font-size: @GENERIC_DIAGRAM_TOOLBAR_ICON_SIZE;
color: @base-icon-color;
}
}
}
}
.dx-diagram-touchbar.dx-context-menu {
.dx-menu-item .dx-menu-item-content {
padding: @DIAGRAM_TOUCHBAR_ITEM_PADDING;
}
.dx-menu-separator {
width: 1px;
height: @GENERIC_BASE_ICON_SIZE + @DIAGRAM_TOUCHBAR_ITEM_PADDING + @DIAGRAM_TOUCHBAR_ITEM_PADDING + 2;
margin: 0;
}
}
.diagram-action-icons-mixin(@base-icon-color, @menu-color, @GENERIC_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, @GENERIC_DIAGRAM_TOOLBAR_ICON_SIZE, @GENERIC_DIAGRAM_TOOLBAR_ICON_SIZE);
}