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

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