@syncfusion/ej2-angular-diagrams/styles/fluent.css

Feature-rich diagram control to create diagrams like flow charts, organizational charts, mind maps, and BPMN diagrams. Its rich feature set includes built-in shapes, editing, serializing, exporting, printing, overview, data binding, and automatic layouts.

.e-icons {
  font-family: "e-icons";
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
}

.e-diagram-menu .e-bringforward::before {
  content: "\e574";
}
.e-diagram-menu .e-bringfront::before {
  content: "\e575";
}
.e-diagram-menu .e-sendback::before {
  content: "\e576";
}
.e-diagram-menu .e-sendbackward::before {
  content: "\e577";
}
.e-diagram-menu .e-delete::before {
  content: "\e578";
}
.e-diagram-menu .e-ungroup::before {
  content: "\e579";
}
.e-diagram-menu .e-group::before {
  content: "\e57a";
}
.e-diagram-menu .e-undo::before {
  content: "\e57c";
}
.e-diagram-menu .e-cut::before {
  content: "\e57d";
}
.e-diagram-menu .e-save::before {
  content: "\e57e";
}
.e-diagram-menu .e-paste::before {
  content: "\e57f";
}
.e-diagram-menu .e-copy::before {
  content: "\e580";
}
.e-diagram-menu .e-redo::before {
  content: "\e581";
}
.e-diagram-menu .e-zoomin::before {
  content: "\e582";
}
.e-diagram-menu .e-italic::before {
  content: "\e583";
}
.e-diagram-menu .e-close::before {
  content: "\e584";
}
.e-diagram-menu .e-pan::before {
  content: "\e585";
}
.e-diagram-menu .e-bold::before {
  content: "\e586";
}
.e-diagram-menu .e-underline::before {
  content: "\e587";
}
.e-diagram-menu .e-zoomout::before {
  content: "\e588";
}
.e-diagram-menu .e-export::before {
  content: "\e589";
}
.e-diagram-menu .e-print::before {
  content: "\e58a";
}
.e-diagram-menu .e-order::before {
  content: "\e58b";
}

.e-symbolpalette .e-clear-searchtext::before {
  content: "\e58c";
}

/* stylelint-disable-line length-zero-no-unit */
.e-icons {
  font-family: "e-icons";
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
}

.e-diagram-menu .e-bringforward::before {
  content: "\e7f2";
}
.e-diagram-menu .e-bringfront::before {
  content: "\e7f0";
}
.e-diagram-menu .e-sendback::before {
  content: "\e7ef";
}
.e-diagram-menu .e-sendbackward::before {
  content: "\e7f1";
}
.e-diagram-menu .e-delete::before {
  content: "\e75b";
}
.e-diagram-menu .e-ungroup::before {
  content: "\e737";
}
.e-diagram-menu .e-group::before {
  content: "\e78b";
}
.e-diagram-menu .e-undo::before {
  content: "\e7b5";
}
.e-diagram-menu .e-redo::before {
  content: "\e7b6";
}
.e-diagram-menu .e-copy::before {
  content: "\e7b3";
}
.e-diagram-menu .e-cut::before {
  content: "\e7b2";
}
.e-diagram-menu .e-save::before {
  content: "\e7bf";
}
.e-diagram-menu .e-paste::before {
  content: "\e7b4";
}
.e-diagram-menu .e-zoomin::before {
  content: "\e7ab";
}
.e-diagram-menu .e-italic::before {
  content: "\e7a6";
}
.e-diagram-menu .e-close::before {
  content: "\e74f";
}
.e-diagram-menu .e-pan::before {
  content: "\e7c6";
}
.e-diagram-menu .e-bold::before {
  content: "\e7a5";
}
.e-diagram-menu .e-underline::before {
  content: "\e7a7";
}
.e-diagram-menu .e-zoomout::before {
  content: "\e7ac";
}
.e-diagram-menu .e-export::before {
  content: "\e711";
}
.e-diagram-menu .e-print::before {
  content: "\e7bd";
}
.e-diagram-menu .e-order::before {
  content: "\e7f3";
}

.e-symbolpalette .e-clear-searchtext::before {
  content: "\e754";
}

.e-diagram {
  background-color: #fff;
  display: block;
}

.e-symbolpalette {
  display: block;
}

.e-overview {
  display: block;
}

.e-content-placeholder.e-diagram.e-placeholder-diagram {
  background-size: 100% 100%;
  max-height: 500px;
  max-width: 500px;
}

.e-content-placeholder.e-symbolpalette.e-placeholder-symbolpalette {
  background-size: 100% 100%;
  max-height: 200px;
  max-width: 200px;
}

.e-diagram-endpoint-handle {
  fill: #fff;
  stroke: #0078d4;
}

.e-diagram-endpoint-handle.e-connected {
  fill: #0078d4;
  stroke: #fff;
}

.e-diagram-endpoint-handle.e-disabled {
  fill: #d2d0ce;
  opacity: 1;
  stroke: #fff;
}

.e-diagram-bezier-control-handle.e-disabled {
  fill: #d2d0ce;
  opacity: 1;
  stroke: #fff;
}

/* stylelint-disable */
.e-diagram-bezier-handle.e-source.e-disabled {
  opacity: 1 !important;
}

.e-diagram-bezier-handle.e-target.e-disabled {
  opacity: 1 !important;
}

.e-diagram-bezier-control-handle {
  fill: #fff;
  stroke: #0078d4;
}

.e-diagram-bezier-segment-handle {
  fill: #fff;
  stroke: #0078d4;
}

.e-symbolpalette .e-acrdn-content {
  background-color: #fff !important;
}

/* stylelint-enable */
.e-diagram-bezier-control-line {
  stroke: #0078d4;
}

.e-diagram-resize-handle {
  fill: #0078d4;
  stroke: #fff;
  stroke: #fff;
}

.e-diagram-helper {
  stroke: #0078d4;
}

.e-diagram-resize-handle.e-disabled {
  fill: #d2d0ce;
  opacity: 1;
  stroke: #fff;
}

.e-diagram-rotate-handle {
  fill: #0078d4;
  stroke: #0078d4;
}

.e-diagram-selector {
  stroke: #0078d4;
}

.e-diagram-selector.e-disabled {
  opacity: 1;
  stroke: #d2d0ce;
}

.e-diagram-selector.e-thick-border {
  stroke: #0078d4;
  stroke-width: 2;
}

.e-diagram-selector.e-thick-border.e-diagram-lane {
  stroke: #0078d4;
  stroke-width: 2;
}

.e-diagram-highlighter {
  stroke: #0078d4;
  stroke-width: 2;
}

.e-diagram-selected-region {
  stroke: #0078d4;
}

.e-diagram-pivot-line {
  stroke: #0078d4;
}

.e-symbolpalette .e-symbol-hover:hover {
  background: #f3f2f1;
  border-radius: 0px;
}

.e-symbolpalette .e-symbol-selected {
  background: #f3f2f1;
  border-radius: 0px;
}

.e-diagram-tooltip {
  pointer-events: none;
}

.e-diagram .e-ruler {
  background-color: #faf9f8;
  color: #3b3a39;
  font-size: 10px;
}

.e-diagram .e-ruler-overlap {
  background-color: #faf9f8;
}

.e-diagram .e-d-ruler-marker {
  stroke: #0078d4;
}

.e-diagram .e-diagram-text-edit {
  background: #fff;
  border-color: #0078d4;
  border-style: dashed;
  border-width: 1px;
  box-sizing: content-box;
  color: #000;
  min-width: 50px;
}

.e-diagram-text-edit::selection {
  background: #0078d4;
  color: #fff;
}

.e-ruler-tick-label {
  fill: #605e5c;
}

.e-ruler-tick {
  stroke: #c8c6c4;
}

.e-menu-item e-blankicon {
  padding-left: 28px;
}

.e-diagram-selection-indicator {
  stroke: #0078d4;
}

.e-diagram-selection-line {
  stroke: #0078d4;
}

/* stylelint-disable */
.e-diagram-rotate {
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsSAAALEgHS3X78AAAA60lEQVQ4jZ1SwQ2DMBAzlfLJI2KEjJAVukG7ARsxQkfoKHQDugHdgOoqh14oCaGWIpSTudzZRg2MdYOxrq0il2Csm411o7Eu5GinTN0D6AGMAGZVux9p1LGBrHIF0LD+4l3ql70thDABSFZYaeTJ6UqNWhL3ELhyyhUR98TcwI06Lk1aNonO1NocqGWy/6zOcGCq6OjiSCw22/wUfEzL8ND2P9duFXBmHMDvWVN7CliFkkGe69VM5RmVLDqG7ZMPOroWP5BTle5WjR6dkQayutyLqU6gsiU/ypHMiI41yf+CE01qov+R0egXAN5x6jng51I3yAAAAABJRU5ErkJggg==), auto !important;
}

.e-symbolpalette-hidden {
  display: none !important;
}

.e-symbolpalette-search-hidden {
  display: none !important;
}

.e-diagramTooltip-content {
  width: auto !important;
  height: auto !important;
}

/* stylelint-enable */