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