1 @mixin highlight($background-color, $color) {
4 background-color: $background-color;
5 border: $color 1px solid;
8 @mixin highlight-toggle-children {
10 .toggle-children-wrapper {
11 span.toggle-children {
12 @include highlight(white, #009FDB);
23 #VNF > node-content-wrapper {
24 border: 1px dashed #D2D2D2 !important;
27 @mixin highlight-tree-node-content {
32 display: inline-block;
40 .icon-browse.isLinked {
41 display: none !important;
44 #RETRY_EDIT drawing-board-tree tree-node-collection > div,
45 #RETRY drawing-board-tree tree-node-collection > div {
47 width: calc(100% - 50px);
55 flex-direction:column;
57 &.col-md-6,&.col-md-5{
62 justify-content: space-between;
65 font-family: OpenSans-SemiBold;
69 text-transform: uppercase;
77 background-color: #9DD9EF;
79 .toggle-children-wrapper.toggle-children-wrapper-expanded {
80 .toggle-children:before {
100 & .tree-node-active {
101 & > tree-node-wrapper {
103 @include highlight-toggle-children;
104 .node-content-wrapper-focused,
105 .node-content-wrapper-active {
106 background: transparent !important;
108 //background-color: #E6F6FB;
110 //border-right: none !important;
111 //border: #009FDB 1px solid;
114 background-color: #E6F6FB;
116 border-right: none !important;
117 border: #009FDB 1px solid !important;
122 border-top: 1px #009FDB dashed !important;
123 border-bottom: 1px #009FDB dashed !important;
125 .model-info.rightBorder {
126 border-right: 1px #009FDB dashed !important ;
130 background-color: #E6F6FB;
132 border-right: none !important;
133 border: #009FDB 1px solid;
136 .model-info.rightBorder {
137 border-right: #009FDB 1px solid !important;
141 background-color: #E6F6FB;
144 border-left: none !important;
145 border: #009FDB 1px solid;
148 @include highlight-toggle-children;
149 .property-name,.instance-type {
150 color: #009FDB !important;
152 background-color: #E6F6FB;
153 color: #009FDB !important;
156 .status-property-value,.status-property-name {
160 .icon-browse:before {
163 @include highlight-tree-node-content;
168 & .tree-node-expanded {
169 > tree-node-wrapper .node-wrapper {
174 .tree-node-active .tree-children {
175 //border: 1px solid #009FDB;
179 .tree-node.tree-node-active.tree-node-expanded {
182 .tree-children .tree-node-leaf .node-wrapper{
186 .tree-node.tree-node-expanded > tree-node-wrapper{
196 .node-content-wrapper:not(.node-content-wrapper-focused) {
202 .icon-browse:before {
205 @include highlight-tree-node-content;
209 font-family: 'icomoon' !important;
214 .toggle-children-wrapper {
218 span.toggle-children {
225 background-image: none;
226 background-color: white;
227 border: 1px solid #D2D2D2;
234 display: inline-block;
240 .toggle-children-wrapper-expanded {
241 span.toggle-children {
248 .toggle-children-placeholder {
252 .node-content-wrapper-active,
253 .node-content-wrapper.node-content-wrapper-active:hover,
254 .node-content-wrapper-active.node-content-wrapper-focused {
255 background: white !important;
258 .node-content-wrapper-active.node-content-wrapper-focused {
259 background: white !important;
261 .node-content-wrapper {
267 border: 1px solid white;
271 border: 1px dashed #D2D2D2 !important;
276 border-style: dashed !important;
280 border: 1px #D2D2CD dashed !important;
281 border-right: none !important;
285 border-style: dashed !important;
286 border-left-style: none !important;
299 text-transform: uppercase;
300 border-right: 1px solid #D2D2D2;
301 word-break: break-all;
304 font-family: OpenSans-SemiBold;
307 flex-direction: column;
309 justify-content: center;
333 .node-content-wrapper-active {
335 background-color: white !important;
340 background-color: white !important;
344 .action-status-type.delete {
345 background: transparent;
346 font-family: OpenSans-SemiBold;
350 border: 1px solid gray;
355 .model-info.rightBorder {
356 border-right: 1px solid #D2D2CD !important;
359 border: 1px solid #D2D2CD;
364 flex-direction: column;
366 justify-content: center;
370 font-family: OpenSans-SemiBold;
373 //text-transform: capitalize; problematic with search
375 display: inline-flex;//required for search more then one sub highlight,
379 text-decoration: line-through;
382 .text_decoration:after {
386 tree-node-header-properties{
394 font-family: OpenSans-SemiBold;
407 background: transparent !important;
411 border: 1px solid #D2D2CD;
445 .model-info span:first-child {
446 //flex: 1.1 !important;
455 .tree-node-level-1.tree-node.tree-node-expanded {
456 .failed-popover-wrap {
457 left: -50px !important;
462 .failed-popover-wrap {
463 left: 45px !important;
468 .tree-node-level-2.tree-node.tree-node-leaf {
469 .failed-popover-wrap {
470 left: 135px !important;
475 .tree-node-level-1.tree-node.tree-node-collapsed {
476 .failed-popover-wrap{
477 left: 0px !important;
486 font-family: OpenSans-SemiBold;
491 .cdk-overlay-pane.ngx-contextmenu {
498 border: 1px solid #D2D2D2;
499 border-top: 3px solid #009FDB;
500 box-shadow: 0 0px 2px rgba(90,90,90,0.24);
505 font-family: OpenSans-Regular;
520 &.icon-trash:before {