sdc-workflow-designer-ui/src/app/components/node/node.component.css

   1  .node {\r
   2      position:absolute;\r
   3      width: 100px;\r
   4      height: 50px;\r
   5      border: 2px solid black;\r
   6  }\r
   7 \r
   8 \r
   9 /**\r
  10  * Anchors\r
  11  */\r
  12 .anchors {\r
  13     position: absolute;\r
  14     border-radius: 1em;\r
  15     z-index: 20;\r
  16     display: none;\r
  17     background-color: black;\r
  18     width: 0;\r
  19     height: 0;\r
  20     cursor: pointer;\r
  21     -ms-transition: all 0.15s ease-in-out;\r
  22     transition: all 0.15s ease-in-out;\r
  23     -moz-transition: all 0.15s ease-in-out;\r
  24     -webkit-transition: all 0.15s ease-in-out;\r
  25     -o-transition: all 0.15s ease-in-out;\r
  26 }\r
  27 \r
  28 .node:hover .anchors {\r
  29     background-color: black;\r
  30     display: inline-block;\r
  31     width: 12px;\r
  32     height: 12px;\r
  33     z-index: 20;\r
  34 }\r
  35 \r
  36 .anchor-left {\r
  37     left: -5px;\r
  38     top: 40%;\r
  39 }\r
  40 \r
  41 .anchor-right {\r
  42     right: -5px;\r
  43     top: 40%;\r
  44 }\r
  45 \r
  46 .anchor-top {\r
  47     top: -5px;\r
  48     left: 40%;\r
  49 }\r
  50 \r
  51 .anchor-bottom {\r
  52     bottom: -5px;\r
  53     left: 40%;\r
  54 }\r
  55 \r
  56 /*右箭头*/\r
  57 .right {\r
  58     width: 10px;\r
  59     height: 10px;\r
  60     position: absolute;\r
  61     left: 4px;\r
  62     top: 1px;\r
  63 \r
  64 }\r
  65 \r
  66 .right-arrow1, .right-arrow2 {\r
  67     width: 0;\r
  68     height: 0;\r
  69     display: block;\r
  70     position: absolute;\r
  71     left: 0;\r
  72     top: 0;\r
  73     border-top: 5px transparent dashed;\r
  74     border-right: 5px transparent dashed;\r
  75     border-bottom: 5px transparent dashed;\r
  76     border-left: 5px black solid;\r
  77     overflow: hidden;\r
  78 }\r
  79 \r
  80 .right-arrow1 {\r
  81 \r
  82     border-left: 5px white solid;\r
  83 }\r
  84 \r
  85 .right-arrow2 {\r
  86     left: -2px;\r
  87 }\r
  88 \r
  89 /*左箭头*/\r
  90 .left {\r
  91     width: 10px;\r
  92     height: 10px;\r
  93     position: absolute;\r
  94     left: -2px;\r
  95     top: 1px;\r
  96     z-index: 2;\r
  97 }\r
  98 \r
  99 .left-arrow1, .left-arrow2 {\r
 100     width: 0;\r
 101     height: 0;\r
 102     display: block;\r
 103     position: absolute;\r
 104     left: 0;\r
 105     top: 0;\r
 106     z-index: 5; /*兼容ie8-*/\r
 107     border-top: 5px transparent dashed;\r
 108     border-left: 5px transparent dashed;\r
 109     border-bottom: 5px transparent dashed;\r
 110     border-right: 5px black solid;\r
 111     overflow: hidden;\r
 112 }\r
 113 \r
 114 .left-arrow1 {\r
 115     border-right: 5px #fff solid;\r
 116 }\r
 117 \r
 118 .left-arrow2 {\r
 119     left: 2px;\r
 120 }\r
 121 \r
 122 /*上箭头*/\r
 123 .top {\r
 124     width: 9px;\r
 125     height: 9px;\r
 126     position: absolute;\r
 127     left: 1px;\r
 128     z-index: 2;\r
 129 }\r
 130 \r
 131 .top-arrow1, .top-arrow2 {\r
 132     width: 0;\r
 133     height: 0;\r
 134     display: block;\r
 135     position: absolute;\r
 136     left: 0;\r
 137     top: 0;\r
 138     z-index: 5;\r
 139     border-bottom: 5px black solid;\r
 140     border-left: 5px transparent dashed;\r
 141     border-right: 5px transparent dashed;\r
 142     border-top: 5px transparent dashed;\r
 143     overflow: hidden;\r
 144 }\r
 145 \r
 146 .top-arrow1 {\r
 147     z-index: 6;\r
 148 }\r
 149 \r
 150 .top-arrow2 {\r
 151     top: -2px;\r
 152     border-bottom: 4px white solid;\r
 153 }\r
 154 \r
 155 /*下箭头*/\r
 156 .bottom {\r
 157     width: 9px;\r
 158     height: 9px;\r
 159     position: absolute;\r
 160     left: 1px;\r
 161     top: 4px;\r
 162     z-index: 2;\r
 163 }\r
 164 \r
 165 .bottom-arrow1, .bottom-arrow2 {\r
 166     width: 0;\r
 167     height: 0;\r
 168     display: block;\r
 169     position: absolute;\r
 170     left: 0;\r
 171     top: 0;\r
 172     z-index: 5;\r
 173     border-bottom: 4px transparent dashed;\r
 174     border-left: 4px transparent dashed;\r
 175     border-right: 4px transparent dashed;\r
 176     border-top: 4px black solid;\r
 177     overflow: hidden;\r
 178 }\r
 179 \r
 180 .bottom-arrow1 {\r
 181     top: -2px;\r
 182     z-index: 6;\r
 183 }\r
 184 \r
 185 .bottom-arrow2 {\r
 186     border-top: 4px white solid;\r
 187 }\r