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

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