1 files changed, 60 insertions, 10 deletions
diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.css b/sdc-workflow-designer-ui/src/app/components/node/node.component.css
index 24e657ca..08b7322d 100644
--- a/sdc-workflow-designer-ui/src/app/components/node/node.component.css
+++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.css
@@ -1,10 +1,31 @@
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+
  .node {
-     position:absolute;
-     width: 100px;
-     height: 50px;
-     border: 2px solid black;
- }
+    border: 1px solid transparent;
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+    z-index: 2;
+}
 
+.node:hover {
+    border: 1px solid #123456;
+    box-shadow: 2px 2px 19px #444;
+    -o-box-shadow: 2px 2px 19px #444;
+    -webkit-box-shadow: 2px 2px 19px #444;
+    -moz-box-shadow: 2px 2px 19px #fff;
+    opacity: 0.9;
+}
 
 /**
  * Anchors
@@ -53,7 +74,7 @@
     left: 40%;
 }
 
-/*右箭头*/
+/*right-arrow*/
 .right {
     width: 10px;
     height: 10px;
@@ -86,7 +107,7 @@
     left: -2px;
 }
 
-/*左箭头*/
+/*left-arrow*/
 .left {
     width: 10px;
     height: 10px;
@@ -103,7 +124,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    z-index: 5; /*兼容ie8-*/
+    z-index: 5;
     border-top: 5px transparent dashed;
     border-left: 5px transparent dashed;
     border-bottom: 5px transparent dashed;
@@ -119,7 +140,7 @@
     left: 2px;
 }
 
-/*上箭头*/
+/*top-arrow*/
 .top {
     width: 9px;
     height: 9px;
@@ -152,7 +173,7 @@
     border-bottom: 4px white solid;
 }
 
-/*下箭头*/
+/*bottom-arrow*/
 .bottom {
     width: 9px;
     height: 9px;
@@ -185,3 +206,32 @@
 .bottom-arrow2 {
     border-top: 4px white solid;
 }
+
+
+.node .startEvent {
+    border-radius: 30px;
+    background-size: cover;
+    border: 1px solid rgb(0, 0, 0);
+    height: 30px;
+    width: 30px;
+}
+
+.node .endEvent {
+    border-radius: 30px;
+    background-size: cover;
+    border: 2px solid rgb(0, 0, 0);
+    height: 30px;
+    width: 30px;
+}
+
+.node .name {
+    padding: 10px 15px;
+}
+
+.node:hover {
+    border: 1px dotted #000;
+}
+
+.node.focus {
+    border: 1px dotted red;
+}