index.less 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @graph-stroke-color: @primary-3;
  4. @graph-focused-color: @primary-color;
  5. @graph-stroke-width-base: 1px;
  6. @graph-node-background-color: @primary-1;
  7. @graph-prefix-cls: ~'nz-graph';
  8. .@{graph-prefix-cls} {
  9. position: relative;
  10. display: block;
  11. width: 100%;
  12. height: 100%;
  13. background-color: @component-background;
  14. &-nodes {
  15. .@{graph-prefix-cls}-node {
  16. &-rect {
  17. fill: transparent;
  18. stroke: @graph-stroke-color;
  19. stroke-width: @graph-stroke-width-base;
  20. &:hover {
  21. stroke: @graph-focused-color;
  22. }
  23. }
  24. }
  25. }
  26. &-edges {
  27. .@{graph-prefix-cls}-edge {
  28. path {
  29. fill: none;
  30. stroke: @graph-stroke-color;
  31. stroke-linecap: butt;
  32. stroke-width: @graph-stroke-width-base;
  33. &:hover {
  34. stroke: @graph-focused-color;
  35. }
  36. }
  37. &-text {
  38. font-size: @font-size-sm;
  39. fill: fade(@text-color, 85%);
  40. }
  41. }
  42. }
  43. &-edge-marker {
  44. color: @graph-stroke-color;
  45. fill: @graph-stroke-color;
  46. }
  47. &-minimap {
  48. position: absolute;
  49. right: 0;
  50. bottom: 0;
  51. z-index: 99;
  52. background-color: @component-background;
  53. border: @border-width-base @border-style-base @border-color-base;
  54. transition: opacity 0.3s linear;
  55. pointer-events: auto;
  56. &.hidden {
  57. opacity: 0;
  58. pointer-events: none;
  59. }
  60. canvas {
  61. border: 1px solid #999;
  62. }
  63. rect {
  64. cursor: move;
  65. filter: url('#minimapDropShadow');
  66. fill: @component-background;
  67. stroke: @text-color-secondary;
  68. stroke-width: @border-width-base;
  69. fill-opacity: 0;
  70. }
  71. svg {
  72. position: absolute;
  73. width: 100%;
  74. height: 100%;
  75. }
  76. .buffer,
  77. .viewport {
  78. display: block;
  79. height: 100%;
  80. }
  81. }
  82. }