diff options
Diffstat (limited to 'deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.css')
-rw-r--r-- | deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.css | 229 |
1 files changed, 229 insertions, 0 deletions
diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.css b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.css new file mode 100644 index 00000000..f1fead94 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/components/node/node.component.css @@ -0,0 +1,229 @@ +/** + * 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 { + cursor: pointer; + display: inline-block; + position: absolute; + z-index: 2; +} + +.node-icon{ + position: relative; + border-radius: 4px; +} + +.node-icon svg{ + display: block; + fill: #00ABFF; +} + +.active { + outline: 1px solid #00ABFF; +} + +/** + * Anchors + */ +.anchors { + position: absolute; + border-radius: 1em; + display: none; + background-color: #2e6f9a; + width: 12px; + height: 12px; + cursor: pointer; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -webkit-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; +} + +.node-icon:hover > .anchors { + display: inline-block; +} + +.anchor-left { + left: -6px; + top: calc(50% - 6px); +} + +.anchor-right { + right: -6px; + top: calc(50% - 6px); +} + +.anchor-top { + top: -6px; + left: calc(50% - 6px); +} + +.anchor-bottom { + bottom: -6px; + left: calc(50% - 6px); +} + +/*right arrow*/ +.right { + width: 10px; + height: 10px; + position: absolute; + left: 4px; + top: 1px; + +} + +.right-arrow1, .right-arrow2 { + width: 0; + height: 0; + display: block; + position: absolute; + left: 0; + top: 0; + border-top: 5px transparent dashed; + border-right: 5px transparent dashed; + border-bottom: 5px transparent dashed; + border-left: 5px #2e6f9a solid; + overflow: hidden; +} + +.right-arrow1 { + + border-left: 5px white solid; +} + +.right-arrow2 { + left: -2px; +} + +/*left arrow */ +.left { + width: 10px; + height: 10px; + position: absolute; + left: -2px; + top: 1px; + z-index: 2; +} + +.left-arrow1, .left-arrow2 { + width: 0; + height: 0; + display: block; + position: absolute; + left: 0; + top: 0; + z-index: 5; /*ie8-*/ + border-top: 5px transparent dashed; + border-left: 5px transparent dashed; + border-bottom: 5px transparent dashed; + border-right: 5px #2e6f9a solid; + overflow: hidden; +} + +.left-arrow1 { + border-right: 5px #fff solid; +} + +.left-arrow2 { + left: 2px; +} + +/*top arrow*/ +.top { + width: 10px; + height: 10px; + position: absolute; + left: 1px; + z-index: 2; +} + +.top-arrow1, .top-arrow2 { + width: 0; + height: 0; + display: block; + position: absolute; + left: 0; + top: 0; + z-index: 5; + border-bottom: 5px #2e6f9a solid; + border-left: 5px transparent dashed; + border-right: 5px transparent dashed; + border-top: 5px transparent dashed; + overflow: hidden; +} + +.top-arrow1 { + z-index: 6; +} + +.top-arrow2 { + top: -2px; + border-bottom: 5px white solid; +} + +/*bottom arrow*/ +.bottom { + width: 10px; + height: 10px; + position: absolute; + left: 1px; + top: 4px; + z-index: 2; +} + +.bottom-arrow1, .bottom-arrow2 { + width: 0; + height: 0; + display: block; + position: absolute; + left: 0; + top: 0; + z-index: 5; + border-bottom: 5px transparent dashed; + border-left: 5px transparent dashed; + border-right: 5px transparent dashed; + border-top: 5px #2e6f9a solid; + overflow: hidden; +} + +.bottom-arrow1 { + top: -2px; + z-index: 6; +} + +.bottom-arrow2 { + border-top: 5px white solid; +} +/** + * Anchors End + */ + +.node .name { + width: 55px; + height: 12px; + text-align: center; + white-space: nowrap; + color: #5c6d90; + line-height: 12px; + cursor: pointer; + font-family: Arial; + font-size: 12px; +} + +.resizeable { + background-color: darkolivegreen; + border:1px solid blue; + margin: 10px; +} + |