diff options
author | Eran (ev672n), Vosk <ev672n@att.com> | 2018-08-07 14:15:05 +0300 |
---|---|---|
committer | Eran (ev672n), Vosk <ev672n@att.com> | 2018-08-07 14:15:05 +0300 |
commit | b9708a7c3cfaf5767992a2b15180e7b85c459242 (patch) | |
tree | 076e19ea52232232e9060a9d7e074947a4a49508 /app/comp-fe/composition.css | |
parent | cc32bd38d72e5c1c92048657083952d3e45c1819 (diff) |
adding the dcae dt code
Adding DCAE-dt code
Change-Id: Id6b779db9d24e10825fb97ad5fd46f41e65e6738
Issue-ID: SDC-1614
Signed-off-by: Eran (ev672n), Vosk <ev672n@att.com>
Diffstat (limited to 'app/comp-fe/composition.css')
-rw-r--r-- | app/comp-fe/composition.css | 626 |
1 files changed, 626 insertions, 0 deletions
diff --git a/app/comp-fe/composition.css b/app/comp-fe/composition.css new file mode 100644 index 0000000..2431858 --- /dev/null +++ b/app/comp-fe/composition.css @@ -0,0 +1,626 @@ +body { + overflow: hidden; +} + +#icecat { + width: 100%; + height: 100%; + overflow: hidden; +} + +.product { + padding: 5px; + margin: 5px; + background: rgba(0,0,0,0.05); + border-radius: 10px; +} +#products { + position:absolute; + top:10px; + left:0px; + width:140px; + height:200px; + font-size: 10px; + background: rgba(0,0,0,0); + z-index: 10; +} +#productlist { + position:absolute; + top:0; +} +.part { + padding: 2px; + margin: 3px; + margin-left: 5px; + background: rgba(0,0,0,0.1); + display: table; +} +.part span { + //background: rgba(0,0,0,0.1); +} +.part:hover { + outline: 1px solid black; +} + +.partnode { + padding: 2px; + margin-left: 10px; +} +.partnode span { + padding: 1px; + background: rgba(0,0,0,0.1); +} +.partnode span:hover { + background: rgba(200,100,100,0.3); +} + +.compositionbody { + margin:0; + padding:0; + font-size: 14px; + //font-family: Raleway; + font-family: helvetica; + color: black; + //overflow-x: hidden; + //overflow-y: hidden; + //position:fixed; + //text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); + background: rgba(255, 255, 255, 0); + + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; +} + +#compositioncontainer { + //position:absolute; + overflow:hidden; + width: 100%; height: 100%; + user-select: none; +} +#under { + z-index:-10; + background: rgba(0,0,0,0); + position:absolute; + width: 100%; + height: 100%; + overflow: hidden; + margin: 0; + padding: 0; +} +#overlay { + z-index:1; + background: rgba(0,0,0,0); + position:absolute; + width: 100%; + height: 100%; + overflow: hidden; + margin: 0; padding: 0; + pointer-events: none; +} +svg { + pointer-events: all; + overflow: visible; +} + +.node { + //fill: rgba(190,190,190,0.8); + fill: #ccc; + //fill-opacity: .6; + text-shadow: 1px 1px 3px rgba(0,0,0,0.5); + stroke: rgba(0,0,0,0.2); +} + +.node:hover { + stroke: rgba(0,0,0,0.5); +} +.nodeport { + //visibility:hidden; + text-shadow: none; + //text-color: rgba(0,0,0,0.4); + //fill-opacity: 1; + //transform: scale(1); +} +.nodeport:hover { + //fill: #f00; +} + +.nodeporttext { + transition: .5s; + text-anchor: middle; + //font: 12px Raleway; + //font: 12px helvetica; + font-size: 12px; + font-family:helvetica; + pointer-events: none; + //stroke: rgba(0,0,0,0.3); + fill: rgba(0,0,0,0.6); + text-color: rgba(0,0,0,0.6); + //stroke-opacity: 0.7; + //opacity: 0.8; +} +.nodeporttext:hover { + font-size: 14px; +} + +.hidden { + visibility: hidden; +} +.srcport { +} +.srcport:hover { + //fill: rgba(0,0,255,0.5); +} + +.capabilityport { + fill: #beb; +} +.requirementport { + fill: #ebb; +} + +.targetport { + //visibility: hidden; +} +.targeting:hover .nodeportcircle { + visibility: visible; +} + +.targetcircle { + stroke: rgba(0,0,0,0); + fill: rgba(0,0,0,0); + fill: none; +} +.targeting:hover .targetcircle { + fill: rgba(0,0,0,0.2); + stroke: rgba(0,0,0,0.5); + stroke-width: .5; + visibility: visible; + -webkit-animation: pulsate 1s ease-out 0s infinite alternate; + animation: pulsate 1s ease-out 0s infinite alternatedil; +} +@keyframes pulsate { + 0% {transform: scale(0.9); opacity: 0.0;} + 50% {opacity: 0.8;} + 100% {transform: scale(2); opacity: 0.0;} +} + +#catalogdiv { + position:absolute; + top: 5px; + right: 5px; + transform: scale(0.7); + transform-origin: top right; +} + +.type-select{ + width: 90%; + display: block; + margin: 10px auto; + height: 45px; + line-height: 40px; + padding: 0 5px; + font-size: 22px; + border: 2px solid #68c6e9; +} + +.pendingquery { + font-style: italic; + margin-left: 20px; + -webkit-animation: pending 1s ease-out 0s infinite alternatedil; + animation: pending 1s ease-out 0s infinite alternatedil; +} +@keyframes pending { + 0% { opacity: 1.0;} + 50% {opacity: 0.5;} + 100% {opacity: 1.0;} +} + +.svgtext { + text-anchor: middle; + //font: 12px Raleway; + font: 12px helvetica; + stroke: rgba(0,0,0,0.6); + pointer-events: none; +} +.relation { + fill-opacity: 0; + stroke-width: 10; + stroke-opacity: 0.4; + stroke-linecap: round; + stroke: #777; + //transition: .5s; +} +.relation:hover { + stroke: #555; +} +.pending { + stroke-dasharray: 10,25; +} +.tmprelation { + fill-opacity: 0; + stroke-width: 10; + stroke-opacity: 0.6; + stroke-linecap: round; + stroke: #777; + pointer-events: none; + stroke-dasharray: 10,20; + //transition: .5s; +} +.fixed { +} +#minutiae { + width: 150; + height: 15; + border: 1px solid rgba(50,50,50,0.5); + background: rgba(238,238,238,0.2); + border-radius: 5px; + transition: height 1s, width 2s; + transition-delay: 5s; + transform-origin: bottom right; + padding: 4px; + margin: 4px; + margin-bottom: 10px; + overflow: hidden; + position:absolute; + right: 5; + bottom: 40; +} +#minutiae:hover { + transition-delay: 0s; + width: 200; + height: 300; + transform: scale(1); + background: rgba(238,238,238,0.8); + pointer-events: all; +} +#project { + position:absolute; + bottom: 4; + left: 4; +} +iiinput { + color: black; + border: 1px dotted rgba(50,50,50,0.5); + background-color: rgba(0,0,0,0); +} +iiinput:focus { + outline: 1px solid rgba(50,50,50,0.5); +} +.nodetext { + padding:2px; + font: 13px helvetica; + text-align: center; + display: table-cell; + vertical-align: middle; + /*border-radius: 10px;*/ +} +.nodetypetext { + font-size: 7px; + /*text-shadow: none;*/ +} + +.confignode { + /*visibility: hidden;*/ + pointer-events: all; + font-size: 60%; + background: #8ac6fb; + padding: 0.3rem; + border-radius: 28px; +} +.nodetext:hover .confignode { + visibility: visible; +} +.confignode:hover { + visibility: visible; + background: rgba(255,100,100,0.5); +} +#configeditor { + font-family: helvetica; + font-size: 12px; + padding: 5px; + position:absolute; + z-index:10; + width: 100%; + height: 600px; + visibility: hidden; + border-radius: 5px; + background: rgba(238,238,238,0.9); + box-shadow: 4px 4px 50px rgba(0,0,0,1); + transition: .2s; + pointer-events: all; + transform-origin: top left; + border-radius: 5px; + overflow: hidden; + bottom: 0px; + right: 0px; + top: 0; + left: 0; + margin-left: auto; + margin-right: auto; + +} +#configstuff { + width: 100%; + height: 564px; + overflow: hidden; +} + +.configbutton{ + background: #009fdb; + font-family: Arial; + color: #ffffff; + font-size: 14px; + padding: 5px 15px 5px 15px; + margin: 0.1rem; + float: right; + height: 100%; + cursor: pointer; + border-radius: 5px; +} + +.config-fotter { + position:absolute; + height: 39px; + left: 0px; + bottom: 0px; + width: 100%; +} + +.config-fotter .btn { + float: right; + margin-right: 5px; +} + +.btn.btn-primary { + background-color: #009fdb; + border-color: #009fdb; +} + +.btn.btn-default { + color: #009fdb; + border-color: #009fdb; +} + +.btn.btn-default:hover { + color: #009fdb; + border-color: #009fdb; +} + +.modal-footer { + background-color: #f8f8f8; + border: none !important; +} + +.modal-header .modal-header-info { + border-top: solid 3px #009fdb; + margin-top: 10px; + margin-bottom: 0px; +} + +.modal-header .modal-header-error { + border-top: solid 3px #cf2a2a; + margin-top: 10px; + margin-bottom: 0px; +} + +.modal-header { + border: none !important; +} + +#problem { + padding: 5px; + position:absolute; + width: 100px; + height: 50px; + visibility: hidden; + border-radius: 10px; + background: rgba(238,238,238,0.9); + box-shadow: 4px 4px 50px rgba(0,0,0,1); + transition: .2s; + pointer-events: all; + transform-origin: top left; + font-size: 20px; + vertical-align: middle; + text-align: center; +} + + +#bottombar { + width: 100%; + position:fixed; + bottom:0px; + text-align: center; + transform: scale(.3); + opacity: 0; +} +#viewclasses { + z-index: 2; + display:inline-block; + text-align: center; + background: rgba(0,0,0,0.2); + padding: 4px; + padding-left: 10px; + border-radius: 4px; +} +.viewclass { + margin-right: 20px; + margin-left: 20px; + padding: 2px; + border: 1px solid rgba(50,50,50,0.5); + border-radius: 3px; +} +.viewclass:hover { + outline: 2px solid rgba(50,50,50,0.5); +} +.activeview { + background: rgba(125,125,125,0.9); +} + +.faded { + transition: 1s; + opacity: 0.15; +} + + +.asc_nodes_Router_CPE { + fill: #cbb; +} + +.asc_nodes_Link_CPE_CPE_site2site { + fill: #bcb; +} + +.asc_nodes_Feature_Data_Gamma_Link_Data { + fill: #bbc; +} + + +.asc_nodes_Feature_Firewall { + fill: green; +} + +.asc_nodes_Feature_Switch { + fill: green; +} + +.asc_nodes_Feature_Link { + fill: green; +} + +.asc_nodes_Feature_ { + fill: @asc_nodes_Feature_ +} + +.asc_nodes_Router_Gateway_Internet { + fill: #ccb; +} + +.asc_nodes_Link_CPE_Gateway_mis { + fill: #bcc; +} + +.asc_nodes_NOD { + fill: #bcc; +} +.asc_nodes_VPN { + fill: #cbc; +} +.asc_nodes_Site { + fill: #bcb; +} + +.asc_nodes_VIG { + fill: #cbb; +} +.asc_nodes_AppServer { + fill: #bbc; +} + +.fabulous { + stroke: rgba(0,255,0,0.5); + stroke-width: 10px; +} + +.dragpart { + font-size: 30px; + position: absolute; +} + +.highlight { + fill: #44c8f5; + background-color: #f2f2f2; +} +#editNodeProperties { + padding: 5px; + position:absolute; + z-index:10; + width: 500px; + visibility: hidden; + border-radius: 5px; + background: rgba(238,238,238,0.9); + box-shadow: 4px 4px 50px rgba(0,0,0,1); + transition: .2s; + pointer-events: all; + transform-origin: top left; + transform: scale(.001); + border-radius: 3px; + vertical-align:middle; +} +#editNodePropertiesHeaderBoard { + position:relative; + background-color:FloralWhite; + border-radius:10px; + margin-bottom:5px; +} +#editNodePropertiesHeader { + display:inline-block; + width:90%; + text-align:center; + font-size:125%; + margin-left:15px; +} +.editNodePropertyLabel { + display:inline-block; + width:35%; + text-align:right; + margin-right:0.5em; +} +.editNodePropertyValue { + display:inline-block; + width:60%; + text-align:left; +} +.editNodePolicyLabel { + display:inline-block; + width:50%; + text-align:right; + margin-right:0.5em; +} +.editNodePolicyValue { + display:inline-block; + width:45%; + text-align:left; +} +.rule-editor-btn { + cursor: pointer; + width: auto; + font-size: 16px; + margin-left: 2px; + color: #999999; +} +.rule-editor-btn:hover { + color: #009fdb; +} +.rule-editor-modal .modal-header { + position: absolute; + border-bottom: none; + width: 100%; +} + +@keyframes pulse-info { + 0% { + -moz-box-shadow: 0 0 0 0 rgba(104, 198, 233, 0.9); + box-shadow: 0 0 0 0 rgba(104, 198, 233, 0.9); + } + 70% { + -moz-box-shadow: 0 0 0 10px rgba(104, 198, 233, 0); + box-shadow: 0 0 0 10px rgba(104, 198, 233, 0); + } + 100% { + -moz-box-shadow: 0 0 0 0 rgba(104, 198, 233, 0); + box-shadow: 0 0 0 0 rgba(104, 198, 233, 0); + } +} + +.pulse-info { + animation: pulse-info 1.5s infinite; +} + +.mandatory { + font-size: 34px; + position: absolute; + color: red; +}
\ No newline at end of file |