src/lib/cwl-svg/plugins/selection/style.scss

   1 @import "variables";
   2
   3 .cwl-workflow.__plugin-selection {
   4
   5   .node,
   6   .edge {
   7     cursor: pointer;
   8   }
   9
  10   // When something is selected on canvas, everything should fade.
  11   // Then, selected and highlighted elements should override that.
  12   &.__selection-plugin-fade {
  13
  14     // This is how nodes fade out
  15     .node:not(.__selection-plugin-highlight) {
  16
  17       .outer {
  18         stroke: $node-faded-outer-stroke-color;
  19       }
  20
  21       .inner {
  22         fill: $node-faded-step-fill-color;
  23       }
  24
  25       &.input .inner {
  26         fill: $node-faded-input-fill-color;
  27       }
  28
  29       &.output .inner {
  30         fill: $node-faded-output-fill-color;
  31       }
  32
  33       // Their labels fade away a bit less
  34       .label {
  35         fill: $label-faded-color;
  36       }
  37       // Ports are darker
  38       .port {
  39         fill: $port-faded-fill-color;;
  40       }
  41
  42     }
  43
  44     .edge:not(.__selection-plugin-highlight) {
  45       .inner {
  46         stroke: $edge-faded-inner-stroke-color;
  47       }
  48     }
  49
  50   }
  51
  52   .port.__selection-plugin-highlight .label {
  53     opacity: 1;
  54   }
  55
  56   .__selection-plugin-selected {
  57
  58     &.edge .inner {
  59       stroke: $edge-selected-inner-stroke;
  60     }
  61
  62     &.node .outer {
  63       stroke: $node-selected-outer-stroke;
  64     }
  65
  66   }
  67 }