groupbasedpolicy-ui/module/src/main/resources/gbp/gbp.less

   1 /*GBP*/\r
   2 .pl0{padding-left: 0!important};\r
   3 .pr0{padding-right: 0!important};\r
   4 \r
   5 .mt10{margin-top: 10px};\r
   6 .mt20{margin-top: 20px};\r
   7 .mt30{margin-top: 30px};\r
   8 .mt40{margin-top: 40px};\r
   9 \r
  10 .mb50{margin-bottom: 50px};\r
  11 .mb0{margin-bottom: 0px!important};\r
  12 \r
  13 .ml10{margin-left: 10px!important};\r
  14 .ml20{margin-left: 20px!important};\r
  15 .ml30{margin-left: 30px!important};\r
  16 \r
  17 .maxHeight500{\r
  18   max-height: 500px;\r
  19   overflow-y: scroll;\r
  20 }\r
  21 \r
  22 .gbpGlobalWrapper{\r
  23   background: #f5f5f5;\r
  24   margin-bottom: 0!important;\r
  25   min-height: 100%;\r
  26   padding-bottom: 60px;\r
  27   \r
  28   span, label {\r
  29     color: #393939;\r
  30   }\r
  31 \r
  32   h2{\r
  33     color: #666;\r
  34   }\r
  35 \r
  36   .form-control, .main input[type="text"]{\r
  37     background: #fff;\r
  38     color: #858585;\r
  39 \r
  40     &[disabled]{\r
  41       background: #eeeeee;\r
  42     }\r
  43   }\r
  44     \r
  45 \r
  46   .form-control{\r
  47     &.narrow-input-left{\r
  48       width: 45%;\r
  49       float: left;\r
  50     }\r
  51     &.narrow-input-right{\r
  52       width: 45%;\r
  53       float: right;\r
  54     }\r
  55   }\r
  56 \r
  57   .row-param{\r
  58     margin-bottom: 15px;\r
  59     float: left;\r
  60   }\r
  61 \r
  62   .param-label{\r
  63     width:100%;\r
  64     float: left;\r
  65   }\r
  66 \r
  67   .ep-filter{\r
  68     margin-bottom: 20px;\r
  69     DIV{\r
  70       width: 48%;\r
  71     }\r
  72   }\r
  73 \r
  74   .float-left{\r
  75     float: left;\r
  76   }\r
  77 \r
  78   .float-right{\r
  79     float: right;\r
  80   }\r
  81 \r
  82   .full-width{\r
  83     width: 100%;\r
  84 \r
  85     .btn{\r
  86       width: 50px;\r
  87     }\r
  88 \r
  89     label{\r
  90       margin-top: 10px;\r
  91     }\r
  92   }\r
  93 }\r
  94 \r
  95 .gbpWrapper{\r
  96 \r
  97   .btn-primary{\r
  98     color: #ffffff;\r
  99     background-color: #428bca;\r
 100     border-color: #357ebd;\r
 101     font-weight: normal;\r
 102 \r
 103     &:hover {\r
 104       background-color: #1BAAFD;\r
 105       border-color: #1BAAFD;\r
 106     }\r
 107 \r
 108     &.bottom-buttons {\r
 109       bottom: 0;\r
 110       position: absolute;\r
 111       margin-bottom: 0 !important;\r
 112       background-color: #FF7300;\r
 113       border-color: #FF7300;\r
 114       width: 45%;\r
 115 \r
 116       &.back {\r
 117         right:0;\r
 118         margin-right: 15px;\r
 119       }\r
 120 \r
 121       &.home {\r
 122         left:0;\r
 123         margin-left: 15px;\r
 124       }\r
 125 \r
 126       &:hover {\r
 127         background-color: #FF8f33;\r
 128         border-color: #FF8f33;\r
 129       }      \r
 130 \r
 131       &.full-width{\r
 132         width: calc(~'100% - 30px');\r
 133         left: 0;\r
 134         margin-left: 15px;\r
 135       }\r
 136 \r
 137       &.wizard-button{\r
 138         bottom: 40px;\r
 139       }\r
 140     }\r
 141 \r
 142     &.btn-big{\r
 143       padding: 20px;\r
 144       font-size: 1.5em;\r
 145       white-space: normal;\r
 146     }\r
 147   }\r
 148 \r
 149   .noPadding{\r
 150     padding: 0!important;\r
 151   }\r
 152 \r
 153   .basicLabel{\r
 154     padding: 0;\r
 155     font-weight: normal;\r
 156   }\r
 157 \r
 158   .rowWrapper{\r
 159     margin-bottom: 5px;\r
 160   }\r
 161 \r
 162   .inline-block{\r
 163     display: inline-block;\r
 164   }\r
 165 \r
 166   #graph{\r
 167     overflow: auto;\r
 168     width: 100%;\r
 169     height: 100%;\r
 170   }\r
 171 \r
 172   .graphWrapper{\r
 173     position: relative;\r
 174 \r
 175     .controlPanelButtons{\r
 176       position: absolute;\r
 177       top: 50px;\r
 178       right: 0px;\r
 179 \r
 180       .line{\r
 181         margin: 5px 0;\r
 182       }\r
 183     }\r
 184 \r
 185     .btn{\r
 186         min-width: 22px;\r
 187         line-height: 22px;\r
 188         text-align: center;\r
 189         padding: 0!important;\r
 190     }\r
 191   }\r
 192 \r
 193   //SIMPLE BOX\r
 194   .simpleBox{\r
 195     .roundedCorners(5px);\r
 196     border: 1px solid #e5e5e5;\r
 197     background: #fff;\r
 198     padding: 20px;\r
 199 \r
 200     h2{\r
 201       margin-top: 0;\r
 202     }\r
 203   }\r
 204 \r
 205   .sectionTitle{\r
 206     padding: 20px;\r
 207     label{\r
 208       font-size: 25px;\r
 209     }\r
 210   }\r
 211 \r
 212   //LEGEND BOX\r
 213   .legendBox{\r
 214     position: absolute;\r
 215     top: 50px;\r
 216     right: 50px;\r
 217     z-index: 10;\r
 218     ul{\r
 219       padding: 0;\r
 220       list-style: none;\r
 221 \r
 222       .item{\r
 223         padding-top: 5px;\r
 224         margin-bottom: 10px;\r
 225       }\r
 226 \r
 227       .line{\r
 228         .inlineBlock;\r
 229         margin: 9px 5px 0 0;\r
 230         width: 50px;\r
 231 \r
 232         &.blue{\r
 233           border-top: 2px solid blue;\r
 234         }\r
 235 \r
 236         &.green{\r
 237           border-top: 2px solid green;\r
 238         }\r
 239       }\r
 240     }\r
 241   }\r
 242 \r
 243   //MAIN NAVIGATION\r
 244   .mainNavigationWrapper{\r
 245     padding-bottom: 50px;\r
 246     overflow-x: scroll;\r
 247   }\r
 248   .mainNavigation{\r
 249     padding-top: 5%;\r
 250     min-width: 1450px;\r
 251     .topButtonsWrapper, .bottomButtonsWrapper{\r
 252       text-align: center;\r
 253       width: 400px;\r
 254       margin: 0 auto 15px;\r
 255       padding: 0 0 20px;\r
 256       border-bottom: 5px solid #393939;\r
 257     }\r
 258 \r
 259     .bottomButtonsWrapper{\r
 260       border-bottom: 0;\r
 261       border-top: 5px solid #393939;\r
 262       padding: 20px 0 0;\r
 263       margin: 15px auto 0;\r
 264     }\r
 265 \r
 266     .middleButtonsWrapper{\r
 267       text-align: center;\r
 268 \r
 269       .buttonWrapper{\r
 270         margin-top: 25px;\r
 271         \r
 272       }\r
 273 \r
 274       .iconWrapper{\r
 275         .inlineBlock;\r
 276         padding-top: 10px;\r
 277       }\r
 278     }\r
 279 \r
 280     .middleBox{\r
 281       .inlineBlock;\r
 282       width: 500px;\r
 283       height: 150px;\r
 284       border-left: 5px solid #393939;\r
 285       border-right: 5px solid #393939;\r
 286 \r
 287       .infinityIcon{\r
 288         background: transparent url('../../src/app/gbp/images/infinity-loop.tpl.html') no-repeat center center;\r
 289         width: 128px;\r
 290         height: 128px;\r
 291         margin: 11px auto 0;\r
 292         cursor: pointer;\r
 293       }\r
 294     }\r
 295 \r
 296     .buttonWrapper{\r
 297       text-align: center;\r
 298       // width: 300px;\r
 299       // margin: 0 auto;\r
 300       .inlineBlock;\r
 301 \r
 302       .btn-primary{\r
 303         font-size: 2em;\r
 304         padding: 25px 0;\r
 305         width: 350px;\r
 306         .inlineBlock;\r
 307       }\r
 308 \r
 309       .icon-large{\r
 310         &:before{\r
 311           font-size: 5em;\r
 312         }\r
 313       }\r
 314     }\r
 315   }\r
 316 \r
 317   //RIGHT PANEL\r
 318   aside{\r
 319     &.col-md-3{\r
 320       min-height: 800px;\r
 321 \r
 322       .inWrapper{\r
 323         height: 100%;\r
 324       }\r
 325     }\r
 326   }\r
 327 \r
 328   .panelWrapper{\r
 329     padding: 20px 0 50px; \r
 330     height: calc(~'100% - 109px');\r
 331     &.no-padd-top{\r
 332       padding-top: 0px;\r
 333     }\r
 334     button{\r
 335       &.btn{\r
 336         margin-bottom: 5px;\r
 337       }\r
 338       &.btn-list{\r
 339         margin-top: 25px;\r
 340       }\r
 341       &.btn-default:hover {\r
 342         background-color: #e6e6e6 !important;\r
 343       }\r
 344       &.btn-default:focus {\r
 345         background-color: #fff;\r
 346       }\r
 347       &.activated, &.activated:focus {\r
 348         background-color: #e6e6e6 !important;\r
 349       }\r
 350     }\r
 351   }\r
 352 \r
 353   .breadcrumbs{\r
 354     padding: 10px 0px; \r
 355     font-weight: bold;\r
 356     border: 0;\r
 357     line-height: initial;\r
 358   }\r
 359 \r
 360   section.sigmaWrapper {\r
 361     div.legend{\r
 362       margin-bottom: 25px;\r
 363       \r
 364       span, .text{\r
 365         color: #fff;\r
 366       }\r
 367 \r
 368       ul{\r
 369         padding: 0;\r
 370         margin: 0;\r
 371         list-style: none;\r
 372       }\r
 373       li{\r
 374         margin-bottom: 5px;\r
 375         .textHidden{\r
 376           display: none;\r
 377         }\r
 378         .text{\r
 379           margin-left: 10px;\r
 380           line-height: 18px;\r
 381         }\r
 382         .showChckbx{\r
 383           position: relative;\r
 384           top: 2px;\r
 385           left: 5px;\r
 386           }\r
 387         .itemWrapper{\r
 388           &:hover{\r
 389             .text{\r
 390               display: block !important;\r
 391             }\r
 392           }\r
 393         }\r
 394         \r
 395       }\r
 396       div.color{\r
 397         /*margin-right: 15px;*/\r
 398         width: 18px;\r
 399         height: 18px;\r
 400         -webkit-border-radius: 9px;\r
 401         border-radius: 9px;\r
 402         cursor: pointer;\r
 403       }\r
 404     }\r
 405   }\r
 406 \r
 407   #graph-container{\r
 408     // background: transparent;\r
 409     padding: 0;\r
 410     height: 800px;\r
 411   }\r
 412 \r
 413   .selectWrapper{\r
 414     padding-left: 0;\r
 415     &.col-md-12{\r
 416       padding: 0;\r
 417       margin-bottom: 5px;\r
 418     }\r
 419   }\r
 420 \r
 421   .inputWrapper{\r
 422     &.leftInput{\r
 423       padding-left: 0;\r
 424     }\r
 425 \r
 426     &.rightInput{\r
 427       padding-right: 0;\r
 428     }\r
 429   }\r
 430 \r
 431   .separator{\r
 432     padding-bottom: 10px;\r
 433     margin-top: 15px;\r
 434     height: 1px;\r
 435     padding-left: 0px;\r
 436     padding-right: 15px;\r
 437   }\r
 438 \r
 439   .inner-separator{\r
 440     border-bottom: 1px solid #858585;\r
 441     width: 100%;\r
 442     float: left;\r
 443   }\r
 444 \r
 445   .btn-group{\r
 446     padding: 0;\r
 447   }\r
 448 \r
 449   .formWrapper{\r
 450     margin: 20px 0;\r
 451   }\r
 452 \r
 453   .icon-remove {\r
 454     &.align-right {\r
 455       float: right;\r
 456 \r
 457       &.padding {\r
 458         margin: 5px 5px 0 0;\r
 459       }\r
 460     }\r
 461   }\r
 462 \r
 463   .icon-exclamation-sign{\r
 464     &.red {\r
 465       color: red;\r
 466     }\r
 467   }\r
 468 \r
 469   .sigmaWrapper{\r
 470     position: relative;\r
 471 \r
 472     .sigmaModalWrapper{\r
 473       position: absolute;\r
 474       top: 30px;\r
 475       left: 45px;\r
 476       z-index: 1;\r
 477 \r
 478       .icon-remove{\r
 479         position: absolute;\r
 480         top: 5px;\r
 481         right: 5px;\r
 482       }\r
 483 \r
 484       .tableWrapper{\r
 485         position: relative;\r
 486         background: #f5f5f5;\r
 487         .roundedCorners(5px);\r
 488         min-width: 400px;\r
 489         min-height: 100px;\r
 490         margin-top: 20px;\r
 491         padding: 20px;\r
 492 \r
 493         .dataWrapper{\r
 494           overflow-y: scroll;\r
 495           max-height: 350px;\r
 496         }\r
 497 \r
 498         .rowWrapper{\r
 499           padding: 10px;\r
 500           margin-bottom: 10px;\r
 501           .roundedCorners(5px);\r
 502           border: 1px solid #d5d5d5;\r
 503         }\r
 504       }\r
 505     }\r
 506   }\r
 507 }\r
 508 \r
 509 .modal-dialog {\r
 510   z-index: 100;\r
 511   height: 700px;\r
 512   width: 700px;\r
 513   background-color: white;\r
 514   position: fixed;\r
 515   opacity: 1;\r
 516   top:50%;\r
 517   left:50%;\r
 518   margin:-350px 0 0 -400px;\r
 519 \r
 520   .modal-header {\r
 521     height: 70px;\r
 522     padding: 10px 15px;\r
 523   }\r
 524 \r
 525   .modal-navigation {\r
 526     float:left;\r
 527     width: 150px;\r
 528     height: 630px;\r
 529     border-right: 1px solid #e5e5e5;\r
 530     background-color: #eeeeee;\r
 531 \r
 532     ul {\r
 533       -webkit-padding-start: 0;\r
 534       list-style-type: none;\r
 535 \r
 536       li.navigation-item {\r
 537          height: 54px;\r
 538          width: 100%;\r
 539          background-color: #eeeeee;\r
 540          color: #666;\r
 541          font-weight: bold;\r
 542          padding: 20px;\r
 543 \r
 544          &.selected {\r
 545           background-color: #428bca;\r
 546           border-color: #357ebd;\r
 547           color: #ffffff;\r
 548          }\r
 549       }\r
 550     }\r
 551   }\r
 552 \r
 553   .modal-content-container {\r
 554     float: right;\r
 555     width: 550px;\r
 556     height: 630px;\r
 557 \r
 558     .content {\r
 559       overflow-y: scroll;\r
 560       padding: 0 50px 0 20px;\r
 561       height: 580px;\r
 562     }\r
 563     .bottom-navigation {\r
 564       height: 50px;\r
 565       bottom: 0;\r
 566       float: right;\r
 567       margin: 8px 30px\r
 568     } \r
 569   }\r
 570 \r
 571 \r
 572 \r
 573   \r
 574 }\r
 575 \r
 576 .modal-canvas {\r
 577   position: fixed;\r
 578   top: 0;\r
 579   right: 0;\r
 580   bottom: 0;\r
 581   left: 0;\r
 582   z-index: 10;\r
 583   background-color: #000;\r
 584   opacity: .15;\r
 585 }\r
 586 \r
 587 .link-tools .tool-remove { display: none }\r
 588 .link-tools .tool-options { display: none }\r
 589 .connection-wrap, .marker-arrowheads { display: none }\r
 590 \r
 591 /*-------------------YangUI import START-------------------*/\r
 592 \r
 593 @iconsRootPath : 'images/yang-ui-icons/';\r
 594 .gbpWrapper{\r
 595   .customContainer{\r
 596     border-left: 1px solid #7a7a7a;\r
 597     margin: 35px 5px 5px 15px;\r
 598     padding: 5px;\r
 599     /*z-index: 10;*/\r
 600     width:auto;\r
 601     position: relative;\r
 602     &.withoutBorder{\r
 603       border-left: 0;\r
 604       padding-bottom: 0;\r
 605       .treeBullet.containerBullet{\r
 606         left: -25px;\r
 607         top: -25px;\r
 608       }\r
 609     }\r
 610   }\r
 611 \r
 612   .topContainerPart{\r
 613     margin-left: -19px;\r
 614     margin-top: -28px;\r
 615     margin-bottom: 10px;\r
 616   }\r
 617 \r
 618   .treeBullet{\r
 619     font-size: 25px;\r
 620     color: #7a7a7a;\r
 621     position: absolute;\r
 622     left: -15px;\r
 623     top: 0;\r
 624     &.containerBullet{\r
 625       top: -25px; \r
 626       left: -25px;\r
 627     }\r
 628   }\r
 629 \r
 630   .btn-name{\r
 631     -webkit-border-radius: 5px;\r
 632     border-radius: 5px;\r
 633     background: transparent;\r
 634     font-weight: bold;\r
 635     color: @text-color;\r
 636     border: 2px solid @text-color;\r
 637     cursor: auto;\r
 638   }\r
 639 \r
 640   button, div{\r
 641     &.yangButton{\r
 642       cursor: pointer;\r
 643       position: relative;\r
 644       width: 24px;\r
 645       height: 24px;\r
 646       border: 0;\r
 647       margin: 2px;\r
 648       .inlineBlock;\r
 649       &.iconArrowDown{\r
 650         background: transparent url('@{iconsRootPath}icon-arrow-down.png') no-repeat center top;\r
 651       }\r
 652       &.iconArrowRight{\r
 653         background: transparent url('@{iconsRootPath}icon-arrow-right.png') no-repeat center top;\r
 654       }\r
 655       &.iconNext{\r
 656         background: transparent url('@{iconsRootPath}icon-next.png') no-repeat center top;\r
 657       }\r
 658       &.iconPrev{\r
 659         background: transparent url('@{iconsRootPath}icon-prev.png') no-repeat center top;\r
 660       }\r
 661       &:hover{\r
 662         background-position: center -24px;\r
 663       }\r
 664       &.disabled{\r
 665         .opacityDeph(0.4)!important;\r
 666         &:hover{\r
 667           background-position: center top;\r
 668         }\r
 669       }\r
 670     }\r
 671   }\r
 672 \r
 673   .btn-slim {\r
 674       padding-top: 2px;\r
 675       padding-bottom: 2px;\r
 676   }\r
 677 \r
 678   .inlineBlock {\r
 679       display: -moz-inline-stack;\r
 680       display: inline-block;\r
 681       vertical-align: top;\r
 682       zoom: 1;\r
 683       *display: inline;\r
 684   }\r
 685 \r
 686   .leaf {\r
 687       margin: 5px;\r
 688       padding-left: 5px;\r
 689       position: relative;\r
 690   }\r
 691 \r
 692   .leaf-label {\r
 693       margin-right: 10px;\r
 694       font-weight: bold;\r
 695       .inlineBlock;\r
 696       /*width: 170px;*/\r
 697       padding-top: 6px;\r
 698       button.iconQuestion{\r
 699         margin-top: -2px;\r
 700       }\r
 701 \r
 702       i.icon-key {\r
 703         font-size: 1.3em;\r
 704         padding-left:  5px;\r
 705       }\r
 706   }\r
 707 \r
 708   .clear{\r
 709       clear: both;\r
 710   }\r
 711 \r
 712   .borderArrow{\r
 713     color: @text-color;\r
 714     position: absolute;\r
 715     bottom: -6px;\r
 716     left: -6px;\r
 717     font-size: 1.3em;\r
 718   }\r
 719 \r
 720   .tooltip-inner{\r
 721     color: #fff;\r
 722     white-space: pre-wrap;      /* CSS3 */   \r
 723     white-space: -moz-pre-wrap; /* Firefox */    \r
 724     white-space: -pre-wrap;     /* Opera <7 */   \r
 725     white-space: -o-pre-wrap;   /* Opera 7 */    \r
 726     word-wrap: break-word;      /* IE */\r
 727   }\r
 728 }\r
 729 /*-------------------YangUI import END-------------------*/\r
 730 \r
 731 /*\r
 732 -------------------JointJS Graph START-------------------\r
 733 .html-element {\r
 734   position: absolute;\r
 735   background: #3498DB;\r
 736   pointer-events: none;\r
 737   -webkit-user-select: none;\r
 738   border-radius: 4px;\r
 739   border: 2px solid #2980B9;\r
 740   box-shadow: inset 0 0 5px black, 2px 2px 1px gray;\r
 741   padding: 5px;\r
 742   box-sizing: border-box;\r
 743   z-index: 2;\r
 744   pointer-events: auto;\r
 745   bottom: 0;\r
 746   left: 0;\r
 747   right: 0;\r
 748   color: #333;\r
 749   height: 16px;\r
 750   margin-top: 107px;\r
 751   margin-left: 16px;\r
 752   width: 50px !important;\r
 753   height: 20px !important;\r
 754 }\r
 755 -------------------JointJS Graph END-------------------\r
 756 */\r
 757 \r
 758 /*GBP END*/