src/lib/cwl-svg/assets/styles/style.scss

   1 @import "variables";
   2 svg.cwl-workflow {
   3
   4   background: $background;
   5   color: $font-color;
   6   font-family: $font-family;
   7
   8   padding: 0;
   9   width: 100%;
  10   display: block;
  11   transform: translateZ(0);
  12
  13   // We will add tabindex to some elements because they should be focusable, but style should not change
  14   [tabindex]:active, [tabindex]:focus {
  15     outline: none;
  16   }
  17
  18   .hidden {
  19     display: none;
  20   }
  21
  22   .workflow {
  23     user-select: none;
  24   }
  25
  26   .pan-handle {
  27     // Cannot be “none” because it wouldn't have a clickable zone
  28     fill: transparent;
  29   }
  30
  31   .label {
  32     fill: $font-color;
  33     stroke: $label-stroke-color;
  34     stroke-width: $label-stroke-width;
  35
  36     text-anchor: middle;
  37     paint-order: stroke;
  38     stroke-linecap: butt;
  39     stroke-linejoin: miter;
  40
  41   }
  42
  43   .node-icon {
  44     fill: $node-icon-fill-color;
  45     stroke: $node-icon-stroke-color;
  46     stroke-width: $node-icon-stroke-width;
  47
  48     stroke-linecap: round;
  49   }
  50
  51   .node {
  52
  53     .outer {
  54       fill: $node-outer-fill-color;
  55       stroke: $node-outer-stroke-color;
  56       stroke-width: $node-outer-stroke-width;
  57     }
  58
  59     .inner {
  60       stroke: 0;
  61     }
  62
  63     &.input .inner {
  64       fill: $node-input-fill-color;
  65     }
  66
  67     &.output .inner {
  68       fill: $node-output-fill-color;
  69     }
  70
  71     &.step .inner {
  72       fill: $node-step-fill-color;
  73     }
  74
  75     // Prevent mouseenter/leave events when hovering over nested elements
  76     // otherwise, cursor would change while moving the mouse through the node
  77     .core {
  78       .inner,
  79       .node-icon {
  80         pointer-events: none;
  81       }
  82     }
  83
  84     &:hover {
  85       .port .label {
  86         transition: $node-hover-port-transition;
  87         opacity: 1;
  88       }
  89     }
  90
  91     .port {
  92       fill: $port-fill-color;
  93
  94       &:hover {
  95         stroke: $port-hover-stroke-color;
  96         stroke-width: $port-hover-stroke-width;
  97       }
  98
  99       &.output-port .label {
 100         text-anchor: start;
 101         transform: translate(10px, 0);
 102       }
 103
 104       &.input-port .label {
 105         text-anchor: end;
 106         transform: translate(-10px, 0);
 107       }
 108
 109       .label {
 110         fill: $port-label-color;
 111
 112         opacity: 0;
 113         font-size: .9em;
 114         user-select: none;
 115         transition: all .1s;
 116         pointer-events: none;
 117         alignment-baseline: middle;
 118       }
 119     }
 120   }
 121
 122   .edge {
 123
 124     &:hover .inner {
 125       stroke: $edge-inner-hover-color;
 126     }
 127
 128     .inner, .outer {
 129       fill: none;
 130       stroke-linecap: round;
 131     }
 132
 133     .inner {
 134       stroke-width: $edge-inner-stroke-width;
 135       stroke: $edge-inner-stroke-color;
 136     }
 137     .outer {
 138       stroke-width: $edge-outer-stroke-width;
 139       stroke: $edge-outer-stroke-color;
 140     }
 141
 142   }
 143
 144   .unselectable {
 145     user-select: none;
 146     cursor: pointer;
 147   }
 148
 149 }