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