@antv/x6/lib/addon/transform/index.css

JavaScript diagramming library that uses SVG and HTML for rendering.

.x6-graph {
  position: relative;
  outline: none;
}
.x6-graph-background,
.x6-graph-grid,
.x6-graph-svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.x6-graph-background-stage,
.x6-graph-grid-stage,
.x6-graph-svg-stage {
  user-select: none;
}
.x6-graph.x6-graph-pannable {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.x6-graph.x6-graph-panning {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  user-select: none;
}
.x6-node {
  cursor: move;
  /* stylelint-disable-next-line */
}
.x6-node.x6-node-immovable {
  cursor: default;
}
.x6-node * {
  -webkit-user-drag: none;
}
.x6-node .scalable * {
  vector-effect: non-scaling-stroke;
}
.x6-node [magnet='true'] {
  cursor: crosshair;
  transition: opacity 0.3s;
}
.x6-node [magnet='true']:hover {
  opacity: 0.7;
}
.x6-node foreignObject {
  display: block;
  overflow: visible;
  background-color: transparent;
}
.x6-node foreignObject > body {
  position: static;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  background-color: transparent;
}
.x6-edge .source-marker,
.x6-edge .target-marker {
  vector-effect: non-scaling-stroke;
}
.x6-edge .connection {
  stroke-linejoin: round;
  fill: none;
}
.x6-edge .connection-wrap {
  cursor: move;
  opacity: 0;
  fill: none;
  stroke: #000;
  stroke-width: 15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.x6-edge .connection-wrap:hover {
  opacity: 0.4;
  stroke-opacity: 0.4;
}
.x6-edge .vertices {
  cursor: move;
  opacity: 0;
}
.x6-edge .vertices .vertex {
  fill: #1abc9c;
}
.x6-edge .vertices .vertex :hover {
  fill: #34495e;
  stroke: none;
}
.x6-edge .vertices .vertex-remove {
  cursor: pointer;
  fill: #fff;
}
.x6-edge .vertices .vertex-remove-area {
  cursor: pointer;
  opacity: 0.1;
}
.x6-edge .vertices .vertex-group:hover .vertex-remove-area {
  opacity: 1;
}
.x6-edge .arrowheads {
  cursor: move;
  opacity: 0;
}
.x6-edge .arrowheads .arrowhead {
  fill: #1abc9c;
}
.x6-edge .arrowheads .arrowhead :hover {
  fill: #f39c12;
  stroke: none;
}
.x6-edge .tools {
  cursor: pointer;
  opacity: 0;
}
.x6-edge .tools .tool-options {
  display: none;
}
.x6-edge .tools .tool-remove circle {
  fill: #f00;
}
.x6-edge .tools .tool-remove path {
  fill: #fff;
}
.x6-edge:hover .vertices,
.x6-edge:hover .arrowheads,
.x6-edge:hover .tools {
  opacity: 1;
}
.x6-highlight-opacity {
  opacity: 0.3;
}
.x6-widget-transform {
  position: absolute;
  box-sizing: content-box !important;
  margin: -5px 0 0 -5px;
  padding: 4px;
  border: 1px dashed #000;
  border-radius: 5px;
  user-select: none;
  pointer-events: none;
}
.x6-widget-transform > div {
  position: absolute;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #000;
  transition: background-color 0.2s;
  pointer-events: auto;
  -webkit-user-drag: none;
  user-drag: none;
  /* stylelint-disable-line */
}
.x6-widget-transform > div:hover {
  background-color: #d3d3d3;
}
.x6-widget-transform-cursor-n {
  cursor: n-resize;
}
.x6-widget-transform-cursor-s {
  cursor: s-resize;
}
.x6-widget-transform-cursor-e {
  cursor: e-resize;
}
.x6-widget-transform-cursor-w {
  cursor: w-resize;
}
.x6-widget-transform-cursor-ne {
  cursor: ne-resize;
}
.x6-widget-transform-cursor-nw {
  cursor: nw-resize;
}
.x6-widget-transform-cursor-se {
  cursor: se-resize;
}
.x6-widget-transform-cursor-sw {
  cursor: sw-resize;
}
.x6-widget-transform-resize {
  width: 10px;
  height: 10px;
  border-radius: 6px;
}
.x6-widget-transform-resize[data-position='top-left'] {
  top: -5px;
  left: -5px;
}
.x6-widget-transform-resize[data-position='top-right'] {
  top: -5px;
  right: -5px;
}
.x6-widget-transform-resize[data-position='bottom-left'] {
  bottom: -5px;
  left: -5px;
}
.x6-widget-transform-resize[data-position='bottom-right'] {
  right: -5px;
  bottom: -5px;
}
.x6-widget-transform-resize[data-position='top'] {
  top: -5px;
  left: 50%;
  margin-left: -5px;
}
.x6-widget-transform-resize[data-position='bottom'] {
  bottom: -5px;
  left: 50%;
  margin-left: -5px;
}
.x6-widget-transform-resize[data-position='left'] {
  top: 50%;
  left: -5px;
  margin-top: -5px;
}
.x6-widget-transform-resize[data-position='right'] {
  top: 50%;
  right: -5px;
  margin-top: -5px;
}
.x6-widget-transform.prevent-aspect-ratio .x6-widget-transform-resize[data-position='top'],
.x6-widget-transform.prevent-aspect-ratio .x6-widget-transform-resize[data-position='bottom'],
.x6-widget-transform.prevent-aspect-ratio .x6-widget-transform-resize[data-position='left'],
.x6-widget-transform.prevent-aspect-ratio .x6-widget-transform-resize[data-position='right'] {
  display: none;
}
.x6-widget-transform.no-orth-resize .x6-widget-transform-resize[data-position='bottom'],
.x6-widget-transform.no-orth-resize .x6-widget-transform-resize[data-position='left'],
.x6-widget-transform.no-orth-resize .x6-widget-transform-resize[data-position='right'],
.x6-widget-transform.no-orth-resize .x6-widget-transform-resize[data-position='top'] {
  display: none;
}
.x6-widget-transform.no-resize .x6-widget-transform-resize {
  display: none;
}
.x6-widget-transform-rotate {
  top: -20px;
  left: -20px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  cursor: crosshair;
}
.x6-widget-transform.no-rotate .x6-widget-transform-rotate {
  display: none;
}
.x6-widget-transform-active {
  border-color: transparent;
  pointer-events: all;
}
.x6-widget-transform-active > div {
  display: none;
}
.x6-widget-transform-active > .x6-widget-transform-active-handle {
  display: block;
  background-color: #808080;
}