blob: 5d773a19214281c29468231f2084c30bb83a21c9 [file] [log] [blame]
/*
* Copyright 2017-present Open Networking Foundation
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import './../../../style/vars.scss';
@import '../../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';
$svg-size: 600px;
xos-service-graph {
display: block;
// background: $color-accent;
.graph-container {
position: relative;
.loader-container {
position: absolute;
left: 0;
top: 0;
height: $svg-size;
width: 100%;
}
}
svg {
height: $svg-size;
width: 100%;
background-color: $panel-filled-bg;
border-radius: 3px;
}
.close-btn {
display: none;
}
.fullscreen {
svg {
z-index: 1040;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: $background-color;
transition: all .5s;
}
.close-btn {
cursor: pointer;
display: block;
position: fixed;
top: 10px;
right: 10px;
z-index: 1041;
}
}
.node-group {
.node {
cursor: pointer;
fill: $background-color;
}
.node.service {
> rect {
stroke: $color-accent;
}
> .icon {
fill: $color-accent;
}
}
.node.serviceinstance {
> rect {
stroke: $serviceinstances-fg;
}
> .icon {
fill: $serviceinstances-fg;
}
}
.node.instance {
> rect {
stroke: $instances-fg;
}
> .icon {
fill: $instances-fg;
}
}
.node.network {
> rect {
stroke: $networks-fg;
}
> .icon {
fill: $networks-fg;
}
}
.node {
>.label {
>text {
fill: #fff;
}
>rect {
fill: $background-color;
stroke: #fff;
}
}
}
}
.link-group {
line {
stroke: $color-accent;
}
line.ownership {
stroke: $serviceinstances-fg;
stroke-dasharray: 5;
}
line.serviceinstancelink {
stroke: $serviceinstances-fg;
}
line.instance_ownership {
stroke: $instances-fg;
stroke-dasharray: 5;
}
line.port {
stroke: $networks-fg;
}
}
.arrow-marker {
stroke: $color-accent;
fill: $color-accent;
}
}