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

   1 /**\r
   2  * Copyright (c) 2017 ZTE Corporation.\r
   3  * All rights reserved. This program and the accompanying materials\r
   4  * are made available under the terms of the Eclipse Public License v1.0\r
   5  * and the Apache License 2.0 which both accompany this distribution,\r
   6  * and are available at http://www.eclipse.org/legal/epl-v10.html\r
   7  * and http://www.apache.org/licenses/LICENSE-2.0\r
   8  *\r
   9  * Contributors:\r
  10  *     ZTE - initial API and implementation and/or initial documentation\r
  11  */\r
  12 \r
  13  .node {\r
  14     border: 1px solid transparent;\r
  15     cursor: pointer;\r
  16     display: inline-block;\r
  17     position: absolute;\r
  18     z-index: 2;\r
  19 }\r
  20 \r
  21 .node:hover {\r
  22     border: 1px solid #123456;\r
  23     box-shadow: 2px 2px 19px #444;\r
  24     -o-box-shadow: 2px 2px 19px #444;\r
  25     -webkit-box-shadow: 2px 2px 19px #444;\r
  26     -moz-box-shadow: 2px 2px 19px #fff;\r
  27     opacity: 0.9;\r
  28 }\r
  29 \r
  30 /**\r
  31  * Anchors\r
  32  */\r
  33 .anchors {\r
  34     position: absolute;\r
  35     border-radius: 1em;\r
  36     z-index: 20;\r
  37     display: none;\r
  38     background-color: black;\r
  39     width: 0;\r
  40     height: 0;\r
  41     cursor: pointer;\r
  42     -ms-transition: all 0.15s ease-in-out;\r
  43     transition: all 0.15s ease-in-out;\r
  44     -moz-transition: all 0.15s ease-in-out;\r
  45     -webkit-transition: all 0.15s ease-in-out;\r
  46     -o-transition: all 0.15s ease-in-out;\r
  47 }\r
  48 \r
  49 .node:hover .anchors {\r
  50     background-color: black;\r
  51     display: inline-block;\r
  52     width: 12px;\r
  53     height: 12px;\r
  54     z-index: 20;\r
  55 }\r
  56 \r
  57 .anchor-left {\r
  58     left: -5px;\r
  59     top: 40%;\r
  60 }\r
  61 \r
  62 .anchor-right {\r
  63     right: -5px;\r
  64     top: 40%;\r
  65 }\r
  66 \r
  67 .anchor-top {\r
  68     top: -5px;\r
  69     left: 40%;\r
  70 }\r
  71 \r
  72 .anchor-bottom {\r
  73     bottom: -5px;\r
  74     left: 40%;\r
  75 }\r
  76 \r
  77 /*right-arrow*/\r
  78 .right {\r
  79     width: 10px;\r
  80     height: 10px;\r
  81     position: absolute;\r
  82     left: 4px;\r
  83     top: 1px;\r
  84 \r
  85 }\r
  86 \r
  87 .right-arrow1, .right-arrow2 {\r
  88     width: 0;\r
  89     height: 0;\r
  90     display: block;\r
  91     position: absolute;\r
  92     left: 0;\r
  93     top: 0;\r
  94     border-top: 5px transparent dashed;\r
  95     border-right: 5px transparent dashed;\r
  96     border-bottom: 5px transparent dashed;\r
  97     border-left: 5px black solid;\r
  98     overflow: hidden;\r
  99 }\r
 100 \r
 101 .right-arrow1 {\r
 102 \r
 103     border-left: 5px white solid;\r
 104 }\r
 105 \r
 106 .right-arrow2 {\r
 107     left: -2px;\r
 108 }\r
 109 \r
 110 /*left-arrow*/\r
 111 .left {\r
 112     width: 10px;\r
 113     height: 10px;\r
 114     position: absolute;\r
 115     left: -2px;\r
 116     top: 1px;\r
 117     z-index: 2;\r
 118 }\r
 119 \r
 120 .left-arrow1, .left-arrow2 {\r
 121     width: 0;\r
 122     height: 0;\r
 123     display: block;\r
 124     position: absolute;\r
 125     left: 0;\r
 126     top: 0;\r
 127     z-index: 5;\r
 128     border-top: 5px transparent dashed;\r
 129     border-left: 5px transparent dashed;\r
 130     border-bottom: 5px transparent dashed;\r
 131     border-right: 5px black solid;\r
 132     overflow: hidden;\r
 133 }\r
 134 \r
 135 .left-arrow1 {\r
 136     border-right: 5px #fff solid;\r
 137 }\r
 138 \r
 139 .left-arrow2 {\r
 140     left: 2px;\r
 141 }\r
 142 \r
 143 /*top-arrow*/\r
 144 .top {\r
 145     width: 9px;\r
 146     height: 9px;\r
 147     position: absolute;\r
 148     left: 1px;\r
 149     z-index: 2;\r
 150 }\r
 151 \r
 152 .top-arrow1, .top-arrow2 {\r
 153     width: 0;\r
 154     height: 0;\r
 155     display: block;\r
 156     position: absolute;\r
 157     left: 0;\r
 158     top: 0;\r
 159     z-index: 5;\r
 160     border-bottom: 5px black solid;\r
 161     border-left: 5px transparent dashed;\r
 162     border-right: 5px transparent dashed;\r
 163     border-top: 5px transparent dashed;\r
 164     overflow: hidden;\r
 165 }\r
 166 \r
 167 .top-arrow1 {\r
 168     z-index: 6;\r
 169 }\r
 170 \r
 171 .top-arrow2 {\r
 172     top: -2px;\r
 173     border-bottom: 4px white solid;\r
 174 }\r
 175 \r
 176 /*bottom-arrow*/\r
 177 .bottom {\r
 178     width: 9px;\r
 179     height: 9px;\r
 180     position: absolute;\r
 181     left: 1px;\r
 182     top: 4px;\r
 183     z-index: 2;\r
 184 }\r
 185 \r
 186 .bottom-arrow1, .bottom-arrow2 {\r
 187     width: 0;\r
 188     height: 0;\r
 189     display: block;\r
 190     position: absolute;\r
 191     left: 0;\r
 192     top: 0;\r
 193     z-index: 5;\r
 194     border-bottom: 4px transparent dashed;\r
 195     border-left: 4px transparent dashed;\r
 196     border-right: 4px transparent dashed;\r
 197     border-top: 4px black solid;\r
 198     overflow: hidden;\r
 199 }\r
 200 \r
 201 .bottom-arrow1 {\r
 202     top: -2px;\r
 203     z-index: 6;\r
 204 }\r
 205 \r
 206 .bottom-arrow2 {\r
 207     border-top: 4px white solid;\r
 208 }\r
 209 \r
 210 \r
 211 .node .startEvent {\r
 212     border-radius: 30px;\r
 213     background-size: cover;\r
 214     border: 1px solid rgb(0, 0, 0);\r
 215     height: 30px;\r
 216     width: 30px;\r
 217 }\r
 218 \r
 219 .node .endEvent {\r
 220     border-radius: 30px;\r
 221     background-size: cover;\r
 222     border: 2px solid rgb(0, 0, 0);\r
 223     height: 30px;\r
 224     width: 30px;\r
 225 }\r
 226 \r
 227 .node .name {\r
 228     padding: 10px 15px;\r
 229 }\r
 230 \r
 231 .node:hover {\r
 232     border: 1px dotted #000;\r
 233 }\r
 234 \r
 235 .node.focus {\r
 236     border: 1px dotted red;\r
 237 }\r