blob: 40b6f11cdef862225eabc0d4b77a209979df1b0e [file] [log] [blame]
Matteo Scandoloa9401012017-11-14 15:52:29 -08001/*
2 * Copyright 2017-present Open Networking Foundation
3
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7
8 * http://www.apache.org/licenses/LICENSE-2.0
9
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17
18@import './../../../style/vars.scss';
19@import '../../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';
20
21$svg-size: 600px;
22
23xos-service-graph {
24 display: block;
25 // background: $color-accent;
26
27 .graph-container {
28 position: relative;
29
30 .loader-container {
31 position: absolute;
32 left: 0;
33 top: 0;
34 height: $svg-size;
35 width: 100%;
36 }
37 }
38
39 svg {
40 height: $svg-size;
41 width: 100%;
42 background-color: $panel-filled-bg;
43 border-radius: 3px;
44 }
45
46 .close-btn {
47 display: none;
48 }
49
50 .fullscreen {
51 svg {
52 z-index: 1040;
53 width: 100%;
54 height: 100%;
55 position: fixed;
56 top: 0;
57 left: 0;
58 background-color: $background-color;
59 transition: all .5s;
60 }
61
62 .close-btn {
63 cursor: pointer;
64 display: block;
65 position: fixed;
66 top: 10px;
67 right: 10px;
68 z-index: 1041;
69 }
70 }
71
72 .node-group {
73
74 .node {
75 cursor: pointer;
76 }
77
78 .node.service {
79 > rect {
80 stroke: $color-accent;
81 fill: $background-color;
82 }
83 > .icon {
84 fill: $color-accent;
85 }
86 }
87
88 .node.serviceinstance {
89 > rect {
90 stroke: green;
91 fill: $background-color;
92 }
93 > .icon {
94 fill: green;
95 }
96 }
97
98 .node {
99 >.label {
100 >text {
101 fill: #fff;
102 }
103 >rect {
104 fill: $background-color;
105 stroke: #fff;
106 }
107 }
108 }
109 }
110
111 .link-group {
112 line {
113 stroke: $color-accent;
114 }
115
116 line.ownership {
117 stroke: green;
118 stroke-dasharray: 5;
119 }
120
121 line.serviceinstancelink {
122 stroke: green;
123 }
124 }
125 .arrow-marker {
126 stroke: $color-accent;
127 fill: $color-accent;
128 }
129}