cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css

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