3 background-image: linear-gradient(-45deg, #000 6%, #fff 0) !important;
4 background-size: 6px 6px !important;
11 background-color: #1B3E6F;
12 box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0);
18 background: url(/assets/img/logo-icon.svg) center center #fff no-repeat;
24 background: transparent;
31 .breadcrumb .breadcrumb-item{
35 .breadcrumb .breadcrumb-item:first-child{
38 .breadcrumb-item + .breadcrumb-item::before{
41 .breadcrumb .breadcrumb-item.active p{
50 height: calc(100vh - 60px) !important;
52 /**Topology Actions**/
57 .topology-actions > li{
59 display: inline-block;
62 .topology-actions > li:first-child{
63 border-right: solid 1px #16396A;
65 .topology-actions .btn-group{
69 .btn-topology-action:hover{
74 border: solid .5px #fff;
76 .btn-topology-action:last-child{
79 .btn-topology-action .fa{
84 .topology-actions .dropdown-text,
85 .dropdown-toggle:hover ~ .dropdown-text,
86 .dropdown-toggle:focus ~ .dropdown-text{
97 .topology-actions .dropdown-text::after{
100 border-width: 6px 6px 0 6px;
101 border-color: #fff transparent transparent transparent;
103 .topology-actions .dropdown-toggle:focus ~ .dropdown-text::after{
105 border-width: 0 6px 6px 6px;
106 border-color: transparent transparent #fff transparent
108 .topology-actions .dropdown-content:hover,
109 .topology-actions .dropdown-toggle:focus ~ .dropdown-content{
115 box-shadow: 0 2px 6px rgba(47, 83, 151, .15)
117 .topology-actions .dropdown-content a{
122 .topology-actions .dropdown-content a:hover{
124 text-decoration: none;
149 background: transparent;
153 vertical-align: bottom;
154 /* text-align: center; */
157 display: inline-table !important;
158 -ms-writing-mode: tb-rl;
159 -webkit-writing-mode: vertical-rl;
160 writing-mode: vertical-rl !important;
161 transform: rotate(180deg);
168 /* border-bottom-left-radius: 2px; */
169 border-top-left-radius: 2px;
176 .rotate span:first-child{
180 text-decoration: none;
183 /*ACTIONS & COMPONENTS MENU*/
184 .input-search-controller{
187 background: url(src/assets/img/icon-search-light.svg) #fff 10px center no-repeat;
190 border-bottom: solid 1px #D7E7F9;
194 .input-search-controller::placeholder{
198 .input-search-controller:focus{
200 box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
201 border-color: #DEE8F3;
212 background-position: left center;
213 background-repeat: no-repeat;
216 background-image: url(/assets/img/icon-comType1-sm.svg);
219 background-image: url(/assets/img/icon-comType2-sm.svg);
222 background-image: url(/assets/img/icon-comType3-sm.svg);
225 background-image: url(/assets/img/icon-comType4-sm.svg);
242 border: solid 1px #C1CDDD;
243 box-shadow: 0 2px 6px rgba(47, 83, 151, .10);
245 .controllerSidebar h1{
247 padding: 12px 0 12px 12px;
251 text-transform: uppercase;
254 .controllerSidebar b{
261 border-radius: 2px !important;
265 .actionBtns .btn:first-child{
267 border: solid 1px #1B3E6F;
270 .actionBtns .btn:last-child{
272 background: url(src/assets/img/icon-import-blue.svg) 12px center #fff no-repeat;
273 border: solid 1px #D0DFF1;
278 padding: 0 12px 20px;
283 .actionsList .custom-checkbox,
284 .componentsList .list-group-item{
288 box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
291 .actionsList .custom-control-label{
294 vertical-align: unset;
298 border-top-right-radius: 2px;
299 border-bottom-right-radius: 2px;
301 .actionsList .custom-control-label::before,
302 .actionsList .custom-control-label::after{
305 .actionsList .custom-control-label p{
309 .custom-control-input:checked ~ .custom-control-label{
310 background-color: #1B3E6F !important;
313 .inserActionBtns .btn{
314 border-radius: 15px !important;
321 .inserActionBtns .btn:first-child{
323 border: solid 1px #1273EB;
326 .inserActionBtns .btn:last-child{
328 border: solid 1px #D9E6F2;
332 .componentsList .list-group-item{
336 background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat;
345 border: solid 1px #E8EFF8;
346 box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
350 box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
353 background-color: #fff;
354 background-repeat: no-repeat;
355 background-position: left center;
360 .editBar .btn.active{
361 background-color: #1B3E6F !important;
365 background-position: 10px center;
368 .viewBtns .topologySource{
369 background-image: url(src/assets/img/icon-topologyView-active.svg);
371 .viewBtns .topologyView{
372 background-image: url(src/assets/img/icon-topologySource.svg);
374 .card.actionContainer{
375 margin: 20px 20px 40px 60px;
376 background: transparent;
379 .actionContainer .card-header{
381 background: transparent;
384 .actionContainer .card-header span{
386 border-top-left-radius: 2px;
387 border-top-right-radius: 2px;
394 .actionContainer .card-body{
396 padding: 15px 20px !important;
397 border: solid 1px #C3CDDB;
399 box-shadow: 0 2px 6px rgba(18, 115, 235, .1);
402 display: inline-block;
408 color: #fff !important;
411 border: solid 1px #1B3E6F;
413 .actionContainer a:hover{
415 border: dashed 1px #E9FCC6;
416 }.componentContainer img{
419 .componentContainer h2{
424 .componentContainer p{
428 /*ATTRIBUTES SIDE BAR*/
433 .attributesSideBar .attributesContainer{
435 border: solid 1px #C1CDDD;
436 box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
442 background: url(/assets/img/icon-close.svg) center center #DCE8F4 no-repeat ;
449 .attributesContainer h1{
451 padding: 12px 0 12px 15px;
455 text-transform: uppercase;
461 .attributesContainer label{
463 text-transform: uppercase;
467 .attributesContainer .form-group{
470 .attributesContainer .form-control{
471 border-color: #F0F5FC;
473 box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
477 .attributesContainer .form-control:focus{
478 border-color: #66bfff;
479 box-shadow: 0 0 0 4px rgba(0,149,255,0.15);
481 .attributesContainer .form-control::placeholder{
489 margin-bottom: 0 !important;
492 .accordion > .card .card-header{
495 background-color: #F4F9FE;
499 .accordion > .card .card-body{
500 padding-bottom: 10px !important;
502 .accordion .btn-link{
507 text-transform: uppercase;
510 .accordion .btn-link:hover{
512 text-decoration: unset;
514 .accordion .card-header .btn-link[aria-expanded="true"]:after,
515 .accordion .card-header .btn-link[aria-expanded="false"]:after{
517 font-family: 'FontAwesome';
522 .accordion .card-header .btn-link[aria-expanded="true"]:after{
525 .accordion .card-header .btn-link[aria-expanded="false"]:after{
531 background-image: url(/assets/img/icon-add.svg);
532 background-position: center center;
533 background-repeat: no-repeat;
536 .btn-addAttribute:hover{
537 background-image: url(/assets/img/icon-add-hover.svg);
539 .btn-deleteAttribute{
542 border: solid .5px #FFC9CB;