gerrit.onap Code Review - ccsdk/cds.git/blob

   1 .dsl-editor {
   2     height: 500px;
   3 }
   4
   5 body{
   6   background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important;
   7   background-size: 6px 6px !important;
   8 }
   9 /*Header*/
  10 header{
  11   height: 60px;
  12   background-color: #1B3E6F;
  13   box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0);
  14 }
  15 .logo{
  16   float: left;
  17   width: 50px;
  18   height: 60px;
  19   background: url(/assets/img/logo-icon.svg) center center #fff no-repeat;
  20 }
  21
  22 /**Bread Crumb**/
  23 .breadcrumb{
  24   padding: 9px 20px;
  25   background: transparent;
  26   line-height: 40px;
  27 }
  28 .breadcrumb a,
  29 .breadcrumb a:hover{
  30   color: #fff;
  31 }
  32 .breadcrumb .breadcrumb-item{
  33   font-size: 12px;
  34   font-weight: bold;
  35 }
  36 .breadcrumb .breadcrumb-item:first-child{
  37   font-size: 16px;
  38 }
  39 .breadcrumb-item + .breadcrumb-item::before{
  40   color: #fff;
  41 }
  42 .breadcrumb .breadcrumb-item.active p{
  43   display: inline;
  44   padding: 4px 10px;
  45   background: #F4F9FE;
  46   border-radius: 10px;
  47   color: #C3CDDB;
  48   font-size: 10px;
  49 }
  50 .designer-breadcrumb .fa-angle-right::before{
  51   color: #fff;
  52 }
  53 .sidebar-container{
  54   height: calc(100vh - 60px) !important;
  55 }
  56 /**Topology Actions**/
  57 .topology-actions{
  58   margin: 0;
  59   height: 60px;
  60 }
  61 .topology-actions > li{
  62   height: 59px;
  63   display: inline-block;
  64   padding: 0 20px;
  65 }
  66 .topology-actions > li:first-child{
  67   border-right: solid 1px #16396A;
  68 }
  69 .topology-actions .btn-group{
  70   margin-top: 11px;
  71 }
  72 .btn-topology-action,
  73 .btn-topology-action:hover{
  74   margin: 0 6px;
  75   padding: 6px 10px;
  76   color: #fff;
  77   border-radius: 50%;
  78   border: solid .5px #fff;
  79 }
  80 .btn-topology-action:last-child{
  81   margin-right: 0;
  82 }
  83 .btn-topology-action .fa{
  84   width: 16px;
  85   height: 16px;
  86   text-align: center;
  87 }
  88 .topology-actions .dropdown-text,
  89 .dropdown-toggle:hover ~ .dropdown-text,
  90 .dropdown-toggle:focus ~ .dropdown-text{
  91   top: 7px;
  92   text-indent: 15px;
  93   background: #1273EB;
  94   border-radius: 15px;
  95   border: 0;
  96   box-shadow: none;
  97   color: #fff;
  98   font-weight: bold;
  99   font-size: 13px;
 100 }
 101 .topology-actions .dropdown-text::after{
 102   right: 15px;
 103   top: 13px;
 104   border-width: 6px 6px 0 6px;
 105   border-color: #fff transparent transparent transparent;
 106 }
 107 .topology-actions .dropdown-toggle:focus ~ .dropdown-text::after{
 108   top: 13px;
 109   border-width: 0 6px 6px 6px;
 110   border-color: transparent transparent #fff transparent
 111 }
 112 .topology-actions .dropdown-content:hover,
 113 .topology-actions .dropdown-toggle:focus ~ .dropdown-content{
 114   padding: 12px 0;
 115   text-indent: 0;
 116   background: #fff;
 117   border: 0;
 118   border-radius: 2px;
 119   box-shadow: 0 2px 6px rgba(47, 83, 151, .15)
 120 }
 121 .topology-actions .dropdown-content a{
 122   padding: 0 20px;
 123   color: #1B3E6F;
 124   font-size: 13px;
 125 }
 126 .topology-actions .dropdown-content a:hover{
 127   background: #F4F9FE;
 128   text-decoration: none;
 129 }
 130
 131
 132
 133
 134
 135
 136
 137
 138
 139
 140
 141
 142
 143
 144
 145
 146
 147
 148 /*Rotated Text*/
 149 button.rotate{
 150   position: absolute;
 151   margin-top: 1px;
 152   padding: 0;
 153   background: transparent;
 154   border: 0;
 155 }
 156 .rotate{
 157   vertical-align: bottom;
 158   /* text-align: center; */
 159 }
 160 .rotate span{
 161   display: inline-table !important;
 162   -ms-writing-mode: tb-rl;
 163   -webkit-writing-mode: vertical-rl;
 164   writing-mode: vertical-rl !important;
 165   transform: rotate(180deg);
 166   white-space: nowrap;
 167   background: #1B3E6F;
 168   padding: 15px 12px;
 169   font-weight: bold;
 170   font-size: 12px;
 171   color:#fff;
 172   /* border-bottom-left-radius: 2px; */
 173   border-top-left-radius: 2px;
 174 }
 175 .rotate i{
 176   margin-right: 3px;
 177   margin-top: 9px;
 178   font-size: 15px;
 179 }
 180 .rotate span:first-child{
 181   margin-bottom: 0;
 182 }
 183 .rotate a:hover{
 184   text-decoration: none;
 185 }
 186
 187 /*ACTIONS & COMPONENTS MENU*/
 188 .input-search-controller{
 189   height: 50px;
 190   padding-left: 30px;
 191   background: url(src/assets/img/icon-search-light.svg) #fff 10px center no-repeat;
 192   border-radius: 0;
 193   border: 0;
 194   border-bottom: solid 1px #D7E7F9;
 195   color: #1B3E6F;
 196   font-size: 13px;
 197 }
 198 .input-search-controller::placeholder{
 199   color: #D0D7E4;
 200   font-size: 11px;
 201 }
 202 .input-search-controller:focus{
 203
 204   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
 205   border-color: #DEE8F3;
 206 }
 207 .actions-scroll{
 208   max-height: 29vh;
 209   overflow-y: auto;
 210   margin-top: 12px;
 211   margin-bottom: 20px;
 212 }
 213 .componentsList p{
 214   margin-bottom: 0;
 215   padding-left: 30px;
 216   background-position: left center;
 217   background-repeat: no-repeat;
 218 }
 219 p.compType-1{
 220   background-image: url(/assets/img/icon-comType1-sm.svg);
 221 }
 222 p.compType-2{
 223   background-image: url(/assets/img/icon-comType2-sm.svg);
 224 }
 225 p.compType-3{
 226   background-image: url(/assets/img/icon-comType3-sm.svg);
 227 }
 228 p.compType-4{
 229   background-image: url(/assets/img/icon-comType4-sm.svg);
 230 }
 231 /*Actions Wrapper*/
 232 .actions-wrapper{
 233   position: absolute;
 234   width: 100%;
 235   top: 0;
 236 }
 237 .actions-container{
 238   width: 92%;
 239   margin: 0 auto;
 240   background: red;
 241 }
 242
 243 .controllerSidebar{
 244   width: 320px;
 245   background: #F4F9FE;
 246   border: solid 1px #C1CDDD;
 247   box-shadow: 0 2px 6px rgba(47, 83, 151, .10);
 248 }
 249 .controllerSidebar h1{
 250   margin-bottom: 15px;
 251   padding: 12px 0 12px 12px;
 252   background: #fff;
 253   font-size: 12px;
 254   font-weight: bold;
 255   text-transform: uppercase;
 256   color: #C3CDDB;
 257 }
 258 .controllerSidebar b{
 259   margin-left: 12px;
 260   font-size: 12px;
 261   color: #C3CDDB;
 262 }
 263 .actionBtns .btn{
 264   margin: 0 15px 12px;
 265   padding: 9px 20px;
 266   border-radius: 2px !important;
 267   font-size: 12px;
 268   font-weight: bold;
 269 }
 270 .actionBtns .btn:first-child{
 271   background: #1B3E6F;
 272   border: solid 1px #1B3E6F;
 273   color: #fff;
 274 }
 275 .actionBtns .btn:last-child{
 276   padding-left: 34px !important;
 277   border: solid 1px #D0DFF1;
 278   color: #1B3E6F;
 279   outline: 0 !important;
 280 }
 281 .actionsList,
 282 .componentsList{
 283   padding: 0 12px 20px;
 284 }
 285 .componentsList{
 286   padding-bottom: 0;
 287 }
 288 .custom-control.custom-checkbox:hover,
 289 .custom-control-label:hover{
 290   cursor: pointer;
 291 }
 292 .actionsList .custom-checkbox,
 293 .componentsList .list-group-item{
 294   margin-bottom: 10px;
 295   padding-left: 40px;
 296   background: #fff;
 297   box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
 298   border-radius: 2px;
 299 }
 300 .actionsList .custom-control-label{
 301   width: 100%;
 302   padding: 6px;
 303   vertical-align: unset;
 304   color: #1B3E6F;
 305   font-size: 14px;
 306   line-height: 20px;
 307   border-top-right-radius: 2px;
 308   border-bottom-right-radius: 2px;
 309 }
 310 .actionsList .custom-control-label::before,
 311 .actionsList .custom-control-label::after{
 312   top: 1.25rem;
 313 }
 314 .actionsList .custom-control-label p{
 315   color: #C7D0DD;
 316   font-size: 12px;
 317 }
 318 .custom-control-input:checked ~ .custom-control-label{
 319   background-color: #1B3E6F !important;
 320   color: #fff;
 321 }
 322 .inserActionBtns .btn{
 323   border-radius: 15px !important;
 324   padding: 6px 20px;
 325   font-size: 12px;
 326   font-weight: bold;
 327   border: 0;
 328
 329 }
 330 .inserActionBtns .btn:first-child{
 331   background: #1273EB;
 332   border: solid 1px #1273EB;
 333   color: #fff;
 334 }
 335 .inserActionBtns .btn:last-child{
 336   background: #fff;
 337   border: solid 1px #D9E6F2;
 338   color: #C3CDDB;
 339 }
 340 /*Components List*/
 341 .componentsList .list-group-item{
 342   padding-left: 36px;
 343   border: 0;
 344   font-size: 14px;
 345   background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat;
 346 }
 347
 348 /*CANVAS*/
 349 .editBar{
 350   width: 200px;
 351   margin: 0 auto 0;
 352   padding: 6px 10px;
 353   background:#F4F9FE;
 354   /* border: solid 1px #E8EFF8; */
 355   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 356 }
 357 .editBar .btn-group{
 358   box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
 359 }
 360 .editBar .btn{
 361   background-color: #fff;
 362   background-repeat: no-repeat;
 363   background-position: left center;
 364   border: 0;
 365   color: #1B3E6F;
 366   font-size: 10px;
 367 }
 368 .editBar .btn.active{
 369   background-color: #1B3E6F !important;
 370   color: #fff;
 371 }
 372 .viewBtns .btn{
 373   background-position: 10px center;
 374   padding-left: 30px!important;
 375 }
 376 .viewBtns .topologySource{
 377   background-image: url(src/assets/img/icon-topologyView-active.svg);
 378 }
 379 .viewBtns .topologyView{
 380   background-image: url(src/assets/img/icon-topologySource.svg);
 381 }
 382 .card.actionContainer{
 383   margin: 20px 20px 40px 60px;
 384   background: transparent;
 385   border: 0;
 386 }
 387 .actionContainer .card-header{
 388   padding: 0;
 389   background: transparent;
 390   border: 0;
 391 }
 392 .actionContainer .card-header span{
 393   padding: 12px 20px;
 394   border-top-left-radius: 2px;
 395   border-top-right-radius: 2px;
 396   font-size: 12px;
 397   line-height: 38px;
 398   font-weight: bold;
 399   color: #1B3E6F;
 400   background: #C3CDDB;
 401 }
 402 .actionContainer .card-body{
 403   min-height: 170px;
 404   padding: 15px 20px !important;
 405   border: solid 1px #C3CDDB;
 406   background: #fff;
 407   box-shadow: 0 2px 6px rgba(18, 115, 235, .1);
 408 }
 409 .actionContainer a{
 410   display: inline-block;
 411   width: 230px;
 412   height: 130px;
 413   margin: 20px;
 414   padding: 24px;
 415   background: #1B3E6F;
 416   color: #fff !important;
 417   text-align: center;
 418   border-radius: 2px;
 419   border: solid 1px #1B3E6F;
 420 }
 421 .actionContainer a:hover{
 422   cursor: pointer;
 423   border: dashed 1px #E9FCC6;
 424 }.componentContainer img{
 425   height: 38px;
 426 }
 427 .componentContainer h2{
 428   margin-top: 9px;
 429   font-size: 14px;
 430   font-weight: bold;
 431 }
 432 .componentContainer p{
 433   font-size: 12px;
 434 }
 435
 436 /*ATTRIBUTES SIDE BAR*/
 437 .attributesSideBar{
 438   width: 396px;
 439   padding: 0;
 440 }
 441 .attributesSideBar .attributesContainer{
 442   background: #fff;
 443   border: solid 1px #C1CDDD;
 444   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 445 }
 446 .closeBar{
 447   float: right;
 448   width: 90%;
 449   height: 40px;
 450   background: url(/assets/img/icon-close.svg) center center #DCE8F4 no-repeat ;
 451   border: 0;
 452   outline: 0;
 453 }
 454 .closeBar:focus{
 455   outline: none;
 456 }
 457 .attributesContainer h1{
 458   margin-bottom: 10px;
 459   padding: 12px 0 12px 15px;
 460   background: #DEE8F3;
 461   font-size: 12px;
 462   font-weight: bold;
 463   text-transform: uppercase;
 464   color: #1B3E6F;
 465 }
 466 .actionName{
 467   margin-bottom: 21px;
 468 }
 469 .attributesContainer label{
 470   color: #1B3E6F;
 471   text-transform: uppercase;
 472   font-size: 11px;
 473   font-weight: bold;
 474 }
 475 .attributesContainer .form-group{
 476   margin-bottom: 9px;
 477 }
 478 .attributesContainer .form-control{
 479   border-color: #F0F5FC;
 480   border-radius: 2px;
 481   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 482   color: #103D73;
 483   font-size: 13px;
 484 }
 485 .attributesContainer .form-control:focus{
 486   border-color: #66bfff;
 487   box-shadow: 0 0 0 4px rgba(0,149,255,0.15);
 488 }
 489 .attributesContainer .form-control::placeholder{
 490   color: #CFD7E5;
 491 }
 492 .scrolll{
 493   max-height: 88.75vh;
 494   overflow-y: auto;
 495 }
 496 .accordion > .card{
 497   margin-bottom: 0 !important;
 498   border: 0;
 499 }
 500 .accordion > .card .card-header{
 501   margin: 0;
 502   padding: 0;
 503   background-color: #F4F9FE;
 504   border: 0;
 505   border-radius: 0;
 506 }
 507 .accordion > .card .card-body{
 508   padding-bottom: 10px !important;
 509 }
 510 .accordion .btn-link{
 511   padding: 0;
 512   color: #C3CDDB;
 513   font-weight: bold;
 514   font-size: 13px;
 515   text-transform: uppercase;
 516   line-height: 38px;
 517 }
 518 .accordion .btn-link:hover{
 519   color: #103D73;
 520   text-decoration: unset;
 521 }
 522 .accordion .card-header .btn-link[aria-expanded="true"]:after,
 523 .accordion .card-header .btn-link[aria-expanded="false"]:after{
 524   margin-right: 9px;
 525   font-family: 'FontAwesome';
 526   float: left;
 527   font-weight: normal;
 528   font-size: 12px;
 529 }
 530 .accordion .card-header .btn-link[aria-expanded="true"]:after{
 531   content: "\f078";
 532 }
 533 .accordion .card-header .btn-link[aria-expanded="false"]:after{
 534   content: "\f054";
 535 }
 536 .btn-addAttribute{
 537   width: 20px;
 538   height: 20px;
 539   background-image: url(/assets/img/icon-add.svg);
 540   background-position: center center;
 541   background-repeat: no-repeat;
 542   vertical-align: sub;
 543 }
 544 .btn-addAttribute:hover{
 545   background-image: url(/assets/img/icon-add-hover.svg);
 546 }
 547 .btn-deleteAttribute{
 548   padding: 5px 10px;
 549   background: #FFE6E7;
 550   border: solid .5px #FFC9CB;
 551   border-radius: 2px;
 552   color: #FF6469;
 553   font-size: 10px;
 554
 555 }
 556 .source-button{
 557   position: absolute;
 558     z-index: 9999999;
 559     top: 69px;
 560     left: 50%;
 561 }
 562 /*jointjs paper*/
 563 /* #board-paper {
 564     position: relative;
 565     border: 1px solid gray;
 566     display: inline-block;
 567     background: transparent;
 568     overflow: hidden;
 569 }
 570 #board-paper svg {
 571     background: transparent;
 572 }
 573 #board-paper svg .link {
 574     z-index: 2;
 575 }
 576 .html-element {
 577     position: absolute;
 578     background: #F4F9FE;
 579     pointer-events: none;
 580     -webkit-user-select: none;
 581     z-index: 2;
 582 } */