modules/yangman-resources/src/main/resources/yangman/yangman.less

   1 // general
   2 @fontColor : #505050;
   3 @fontColorLight: #a9a9a9;
   4 @fontHighlight: orange;
   5 @listBackColor: #f8f8f8;
   6 @listActiveColor: #E7E7E7;
   7 @appBackColor: #ffffff;
   8 @unactiveTabFontColor: #a9a9a9;
   9 @colorActive: rgb(64,196,255);
  10 @popupHeaderColor: #ffffff;
  11
  12 // yangman
  13 @leftPanelBackColor: #f3f3f3;
  14 @infoBoxBackColor: rgba(255, 255, 255, 0.25);
  15 @infoBoxBorderColor: #aad1f9;
  16 @dataStoreListHoverColor: #dadada;
  17 @dataStoreListShadowColor: rgba(0,0,0,.14);
  18 @dataStoreListBorderColor: rgba(0,0,0,0.12);
  19 @dashedBorderColor: rgba(0,0,0,0.54);
  20 @inputColor: rgba(0,0,0,0.87);
  21 @reqMethodGet: #63d33b;
  22 @reqMethodPut: #6fbad3;
  23 @reqMethodPost: #ea9c30;
  24 @reqMethodDelete: #eabb2f;
  25 @reqError: #ff0000;
  26 @darkBlueColor: rgb(33,150,243);
  27
  28 // helpers
  29 .pointer{
  30     cursor: pointer;
  31     outline: 0 none;
  32 }
  33
  34 .no-wrap{
  35     white-space: nowrap;
  36 }
  37
  38 .text-center{
  39     text-align: center;
  40 }
  41
  42 .text-left{
  43     text-align: left;
  44 }
  45
  46 .h100{
  47     height: 100%;
  48 }
  49
  50 .mb30{
  51     margin-bottom: 30px;
  52 }
  53
  54 .nrp{
  55     padding-right: 0!important;
  56 }
  57
  58 // general
  59 .md-open-menu-container{
  60     span{
  61         color: @fontColor;
  62     }
  63
  64     h5{
  65         margin: 0 16px;
  66         color: @unactiveTabFontColor;
  67
  68         md-icon{
  69             color: @unactiveTabFontColor;
  70             font-size: 18px;
  71         }
  72     }
  73
  74     md-menu-content{
  75         .info-box{
  76             position: absolute;
  77             left: 100%;
  78             top: 0;
  79             margin-left: 10px;
  80             min-width: 300px;
  81             padding: 0;
  82             z-index: 10;
  83             background: #fff;
  84             -webkit-transition: all 150ms linear;
  85             -moz-transition: all 150ms linear;
  86             -ms-transition: all 150ms linear;
  87             -o-transition: all 150ms linear;
  88             transition: all 150ms linear;
  89             opacity: 1;
  90             max-height: 300px;
  91             overflow-y: auto;
  92             overflow-x: hidden;
  93
  94             &__padding{
  95                 padding: 16px;
  96             }
  97
  98             &.ng-hide{
  99                 opacity: 0;
 100             }
 101         }
 102     }
 103
 104     svg {
 105          border: none;
 106          border-radius: 0px;
 107          background-image: none;
 108     }
 109
 110     .icon-wrapper{
 111         padding: 0 16px;
 112     }
 113 }
 114
 115 .md-select-menu-container{
 116     z-index: 1000;
 117 }
 118
 119 .svg-icon{
 120     width: 24px;
 121     height: 24px;
 122     padding-top: 4px;
 123     padding-bottom: 4px;
 124     color: @dashedBorderColor;
 125 }
 126
 127 md-ink-bar.custom{
 128     width: 100%;
 129     color: @colorActive;
 130     left: 0;
 131     background: @colorActive;
 132 }
 133
 134 button{
 135     label{
 136         font-weight: normal;
 137     }
 138 }
 139
 140 .ui-resizable-e{
 141     cursor: e-resize;
 142     height: 100%;
 143     width: 7px;
 144     top: 0;
 145     position: absolute;
 146     right: 0;
 147 }
 148
 149 md-dialog{
 150     md-autocomplete{
 151         height: 50px !important;
 152     }
 153 }
 154
 155 .info-box-container{
 156     position: relative;
 157
 158     &__hover-wrapper{
 159         display: inline-block;
 160         width: 100%;
 161     }
 162
 163     .info-box{
 164         position: absolute;
 165         left: 90%;
 166         top: 0;
 167         margin-left: 10px;
 168         min-width: 300px;
 169         padding: 0;
 170         z-index: 10;
 171         background: #fff;
 172         -webkit-transition: all 150ms linear;
 173         -moz-transition: all 150ms linear;
 174         -ms-transition: all 150ms linear;
 175         -o-transition: all 150ms linear;
 176         transition: all 150ms linear;
 177         opacity: 1;
 178         max-height: 300px;
 179         overflow-y: auto;
 180         overflow-x: hidden;
 181
 182         &__padding{
 183             padding: 16px;
 184         }
 185
 186         &.ng-hide{
 187             opacity: 0;
 188         }
 189
 190         span{
 191             color: @fontColor;
 192         }
 193     }
 194
 195     md-menu-divider{
 196         margin-top: 4px;
 197         margin-bottom: 4px;
 198         height: 1px;
 199         min-height: 1px;
 200         max-height: 1px;
 201         width: 100%;
 202         background-color: @dataStoreListBorderColor;
 203         display: block;
 204     }
 205 }
 206
 207 // yangman
 208 .yangmanModule{
 209     background-color: @appBackColor;
 210     color: @fontColor;
 211     height: 100%;
 212
 213     .ui-resizable-s{
 214         height: 13px;
 215     }
 216
 217     .box-container{
 218         padding: 16px;
 219         margin: 8px 0;
 220     }
 221
 222     .historyTab{
 223         height: calc(~'100% - 62px');
 224     }
 225
 226     .collectionsTab{
 227         height: calc(~'100% - 62px');
 228     }
 229
 230
 231     p{
 232         margin: 0;
 233     }
 234
 235     h1, h2, h3, h4, h5, h6{
 236         color: @fontColor;
 237     }
 238
 239     .scrollableY{
 240         overflow-y: auto;
 241         height: 100%;
 242     }
 243
 244     .scrollableX{
 245         overflow-x: auto;
 246         //width: 100%;
 247     }
 248
 249     .highlight{
 250         color: @darkBlueColor;
 251     }
 252     md-tabs-content-wrapper{
 253         top: 0!important;
 254     }
 255
 256     // modules switcher -> list && detail
 257     .arrow-switcher{
 258         position: absolute;
 259         top: 2px;
 260         cursor: pointer;
 261         outline: 0 none;
 262         z-index: 10;
 263         font-size: 2.5em;
 264         left: -11px;
 265         -webkit-transition: all 250ms ease-out;
 266         -moz-transition: all 250ms ease-out;
 267         -ms-transition: all 250ms ease-out;
 268         -o-transition: all 250ms ease-out;
 269         transition: all 250ms ease-out;
 270
 271         &__left{
 272             //right: -11px;
 273             left: calc(~'100% - 24px');
 274             -moz-transform: rotate(180deg);
 275             -webkit-transform: rotate(180deg);
 276             -o-transform: rotate(180deg);
 277             -ms-transform: rotate(180deg);
 278             transform: rotate(180deg);
 279         }
 280
 281         &.ng-hide{
 282             opacity: 0;
 283         }
 284     }
 285
 286     md-dialog{
 287         h2{
 288             color: @popupHeaderColor;
 289         }
 290
 291         &-actions{
 292             button{
 293                 span{
 294                     color: @fontColor;
 295                 }
 296             }
 297         }
 298
 299
 300     }
 301     // left panel
 302     &__left-panel{
 303         overflow-x: hidden;
 304         background: @leftPanelBackColor;
 305         position: relative;
 306
 307         &__search{
 308             padding: 10px 13px;
 309             background: @listBackColor;
 310             min-height: 62px;
 311
 312             .md-errors-spacer{
 313                 display: none;
 314             }
 315
 316             md-icon{
 317                 color: @dashedBorderColor;
 318             }
 319
 320             .md-has-icon.modules-list-search{
 321                 padding: 2px 25px;
 322                 margin: 0;
 323
 324                 .md-input{
 325                     width: auto;
 326                     order: 0;
 327                 }
 328
 329                 button{
 330                     margin: 0;
 331                     padding: 0;
 332                     min-width: 0;
 333                     min-height: 0;
 334                     line-height: normal;
 335
 336                     &:hover, &:focus, &:active, &:visited{
 337                         background: transparent;
 338                     }
 339
 340                     .md-ripple-container{
 341                         display: none;
 342                     }
 343                 }
 344             }
 345         }
 346
 347         md-tabs,
 348         md-tab-content > div,
 349         md-content,
 350         .h100{
 351             height: 100%;
 352         }
 353
 354         md-tabs-canvas{
 355             border-bottom: 1px solid #dbdbdb;
 356             padding-top: 30px;
 357             height: 78px;
 358         }
 359
 360         md-ink-bar{
 361             height: 4px;
 362         }
 363
 364         md-content{
 365             background: transparent;
 366         }
 367
 368         .md-tab{
 369             span{
 370                 color: @unactiveTabFontColor;
 371             }
 372
 373             &.md-active{
 374                 span{
 375                     color: @fontColor;
 376                 }
 377             }
 378         }
 379
 380         &__detail-list-tabs-container{
 381             > md-tabs-wrapper{
 382                 display: none;
 383             }
 384
 385             .inline-tabs > md-tabs-wrapper{
 386                 display: inline;
 387             }
 388         }
 389
 390         .searchBox{
 391             height: auto;
 392             padding: 10px 13px;
 393             font-size: 14px;
 394
 395             #importCollection{
 396                 display: none;
 397             }
 398
 399             label{
 400                 margin-bottom: 0;
 401             }
 402
 403             md-icon.clickable{
 404                 cursor: pointer;
 405             }
 406
 407             #importParameters{
 408                 display: none;
 409             }
 410
 411             > button{
 412                 margin: 6px 10px 0 0;
 413                 height: 30px;
 414                 min-width: 30px;
 415                 padding: 0;
 416             }
 417
 418             md-menu{
 419                 margin: 0;
 420                 height: 30px;
 421                 min-width: 30px;
 422                 padding: 0;
 423
 424                 > button{
 425                     min-width: 30px;
 426                 }
 427             }
 428
 429
 430         }
 431
 432         //loading panel
 433         &__loading-container {
 434             display: block;
 435             position: relative;
 436             border: 2px solid @infoBoxBorderColor;
 437             transition: opacity  0.1s linear;
 438             border-top: 0px;
 439             margin: 10px;
 440
 441             .bottom-block {
 442                 display: block;
 443                 position: relative;
 444                 background-color: @infoBoxBackColor;
 445                 height: 85px;
 446
 447                 > span {
 448                     display: inline-block;
 449                     margin-top: 10px;
 450                     padding: 25px;
 451                     font-size: 0.9em;
 452                 }
 453             }
 454         }
 455     }
 456
 457     // right panel
 458     &__right-panel{
 459         height: 100%;
 460
 461         .bottom-content{
 462             height: calc(~'100% - 195px');
 463             overflow-y: auto;
 464             margin-top: 25px;
 465
 466             .codemirror-container{
 467                 height: 100%;
 468             }
 469         }
 470
 471         &__header{
 472             margin-bottom: 30px;
 473
 474             > md-content{
 475                 background: @leftPanelBackColor;
 476
 477                 md-content{
 478                     background: transparent;
 479                 }
 480             }
 481
 482             md-progress-linear{
 483                 margin-top: -5px;
 484             }
 485
 486             md-input-container{
 487                 margin: 0;
 488             }
 489
 490             .md-errors-spacer{
 491                 display: none;
 492             }
 493
 494             .input-span{
 495                 padding-top: 3px;
 496             }
 497
 498             .input-identifier{
 499                 max-width: 80px;
 500                 border-color: @colorActive;
 501                 padding-left: 0;
 502             }
 503
 504             md-divider{
 505                 margin-top: 20px;
 506             }
 507
 508             .status-bar{
 509                 min-height: 60px;
 510
 511                 .status-text{
 512                     span span{
 513                         color: @colorActive;
 514                     }
 515                 }
 516             }
 517         }
 518
 519         &__req-data{
 520
 521             &__header{
 522
 523                 h5{
 524                     padding-top: 10px;
 525                 }
 526
 527                 button{
 528                     margin: 0;
 529                     margin-bottom: 2px;
 530                     min-width: 0!important;
 531                     width: 46px;
 532
 533                     .material-icons{
 534                         margin-bottom: 6px;
 535                         vertical-align: bottom;
 536                     }
 537
 538                     .bigger{
 539                         font-size: 25px;
 540                     }
 541
 542                     .smaller{
 543                         font-size: 18px;
 544                     }
 545
 546                     .additional{
 547                         margin-left: -15px;
 548                         vertical-align: top;
 549                     }
 550                 }
 551
 552             }
 553
 554             > div{
 555                 height: 100%;
 556                 padding-right: 2px;
 557                 padding-bottom: 10px;
 558                 position: relative;
 559
 560
 561                 > div:not(.ui-resizable-handle) {
 562                     height: calc(~'100% - 28px');
 563                     overflow-y: auto;
 564                 }
 565
 566                 h5{
 567                     margin-top: 0;
 568                 }
 569
 570                 &.half-size{
 571                     height: 50%;
 572                 }
 573             }
 574
 575             .paramsBox{
 576                 position: absolute;
 577                 top: 50px;
 578                 right: 26px;
 579                 background-color: rgba(235, 235, 228, 0.62);
 580                 padding: 15px;
 581             }
 582
 583             .CodeMirror { height: 100%; }
 584
 585             md-toast{
 586                 margin-top: 24px;
 587             }
 588         }
 589
 590         &__form{
 591
 592             .box-container.union{
 593                 padding: 0;
 594             }
 595
 596             .union-tabs{
 597                 margin: 8px 0;
 598
 599                 md-content{
 600                     min-width: 250px;
 601                 }
 602
 603                 .md-tab{
 604                     padding: 6px 12px;
 605                 }
 606
 607                 md-pagination-wrapper,
 608                 md-tabs-canvas{
 609                     height: 36px;
 610                 }
 611             }
 612
 613             md-input-container{
 614                 margin: 0;
 615
 616                 > md-icon {
 617                     left: auto;
 618                     right: 2px;
 619                     color: @dashedBorderColor;
 620                 }
 621
 622                 &.md-has-icon{
 623                     padding-right: 36px;
 624                     padding-left: 0px;
 625                 }
 626
 627                 .md-errors-spacer{
 628                     display: none;
 629                 }
 630             }
 631
 632             .md-menu.menu-container{
 633                 position: relative;
 634                 padding: 0;
 635
 636
 637
 638                 .md-button{
 639                     margin: auto 0;
 640                     text-transform: none;
 641                     text-align: start;
 642                     height: 100%;
 643                     padding-left: 16px;
 644                     padding-right: 16px;
 645                     display: inline-block;
 646                     width: 100%;
 647
 648                     &.md-icon-button{
 649                         padding: 0 8px;
 650                     }
 651
 652                 }
 653
 654                 .yang-menu-content{
 655                     box-shadow: 1px 1px 10px #888;
 656                     position: absolute;
 657                     left: 0;
 658                     z-index: 100;
 659                     background: #fff;
 660                     padding: 8px 0;
 661
 662                     md-divider{
 663                         padding: 4px 0 4px 0;
 664                     }
 665
 666                     .title{
 667                         color: #a9a9a9;
 668                         margin: 0 16px;
 669
 670                         md-icon{
 671                             font-size: 18px;
 672                         }
 673                     }
 674
 675                     .yang-menu-item{
 676                         min-height: 48px;
 677                         height: 48px;
 678
 679                         md-icon{
 680                             margin: auto 16px auto 0;
 681                         }
 682                     }
 683
 684                 }
 685
 686                 .info-box{
 687                     position: absolute;
 688                     left: 100%;
 689                     top: 0;
 690                     margin-left: 10px;
 691                     min-width: 300px;
 692                     padding: 0;
 693                     z-index: 10;
 694                     background: #fff;
 695                     transition: all 150ms linear;
 696                     opacity: 1;
 697                     max-height: 300px;
 698                     overflow-y: auto;
 699                     overflow-x: hidden;
 700
 701                     &__padding{
 702                         padding: 16px;
 703                     }
 704
 705                     &.ng-hide{
 706                         opacity: 0;
 707                     }
 708                 }
 709
 710             }
 711
 712             .menu-placeholder{
 713                 padding: 11px 26px;
 714             }
 715
 716             p.top-element{
 717                 margin: 0 10px 0 0;
 718                 min-width: 80px;
 719
 720                 &.list-label{
 721                     color: @colorActive;
 722                 }
 723             }
 724
 725             &__element-container{
 726                 margin: 25px 5px 5px 15px;
 727                 padding: 5px;
 728
 729                 &.expanded{
 730                     border-left: 1px dashed @dashedBorderColor;
 731                 }
 732
 733                 md-input-container{
 734                     &.input-icon-container{
 735                         margin-left: 15px;
 736
 737                         md-icon{
 738                             margin: 0;
 739                         }
 740                     }
 741                 }
 742
 743                 .container-label{
 744                     margin: -20px 0 10px -17px;
 745
 746                     md-icon{
 747                         margin: 0;
 748                     }
 749                 }
 750             }
 751
 752             &__leaf-container{
 753                 padding-left: 10px;
 754
 755                 md-input-container,
 756                 md-switch,
 757                 md-checkbox{
 758                     margin: 5px 0;
 759                 }
 760             }
 761
 762             &__list{
 763                 &__paginator{
 764                     //margin-left: 40px;
 765                     button {
 766                         background: transparent;
 767                         border: 0;
 768                         outline: 0 none;
 769                     }
 770                 }
 771             }
 772
 773             &__list-item{
 774                 margin: 0 5px;
 775
 776                 md-tab-item{
 777                     position: relative;
 778
 779                     &.md-tab{
 780                         padding: 6px 12px;
 781                     }
 782                 }
 783             }
 784         }
 785     }
 786
 787
 788     //modules list
 789     &__modules-list{
 790         padding: 0;
 791         background: @listBackColor;
 792         height: calc(~"100% - 62px")!important;
 793
 794         h4{
 795             margin: 0;
 796             padding: 10px 20px;
 797         }
 798
 799         &__item{
 800             padding: 0!important;
 801
 802             .title{
 803                 -webkit-transition: all 150ms ease;
 804                 -moz-transition: all 150ms ease;
 805                 -ms-transition: all 150ms ease;
 806                 -o-transition: all 150ms ease;
 807                 transition: all 150ms ease;
 808             }
 809
 810             &.expanded{
 811                 background: @listActiveColor;
 812             }
 813
 814             &.selected{
 815                 .title{
 816                     background-color: @colorActive!important;
 817                     color: #fff!important;
 818                 }
 819             }
 820
 821             p.top-element{
 822                 padding: 6px 0;
 823             }
 824
 825             md-icon{
 826                 margin: 12px 16px;
 827
 828                 &.top-element{
 829                     margin: 0;
 830                     padding: 12px 16px;
 831                     width: 56px;
 832                     height: 48px;
 833                 }
 834             }
 835
 836             &:hover{
 837                 .title{
 838                     background: @listActiveColor;
 839                 }
 840             }
 841         }
 842     }
 843
 844     // datastore list
 845     &__datastore-list{
 846         padding: 0;
 847         border-top: 1px solid @dataStoreListBorderColor;
 848         background: @listBackColor;
 849         -webkit-box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
 850         box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
 851
 852         md-list-item {
 853             min-height: 0;
 854             padding: 0;
 855             font-size: .85em;
 856
 857             &:hover{
 858                 background: @dataStoreListHoverColor;
 859             }
 860
 861             md-icon{
 862                 margin: 6px 16px 6px 48px;
 863                 font-size: 20.4px;
 864             }
 865         }
 866     }
 867
 868     // module history collections tabs
 869     &__mhc-tabs{
 870
 871         md-list-item{
 872             .md-no-style{
 873                 padding: 0;
 874             }
 875         }
 876
 877         > md-tabs-content-wrapper{
 878             height: calc(~'100% - 78px');
 879
 880             > md-tab-content{
 881                 height: 100%;
 882             }
 883         }
 884     }
 885
 886     // module detail
 887     &__module-detail{
 888         h4{
 889             padding-top: 30px;
 890             margin: 0 15px;
 891         }
 892
 893         .tabs{
 894             height: calc(~'100% - 49px');
 895
 896             md-tabs-canvas{
 897                 padding-top: 0;
 898                 height: 48px;
 899             }
 900
 901             > md-tabs-content-wrapper{
 902                 height: calc(~'100% - 48px');
 903
 904                 > md-tab-content{
 905                     height: 100%;
 906                 }
 907             }
 908
 909             .md-tab{
 910                 padding: 0;
 911             }
 912
 913             md-tab-item{
 914                 span{
 915                     outline: 0 none;
 916                     padding: 12px 24px;
 917                 }
 918             }
 919         }
 920
 921         > div{
 922             height: 100%;
 923
 924             > md-content{
 925                 overflow-y: hidden;
 926             }
 927         }
 928     }
 929
 930     &__requests-list{
 931         background: @listBackColor;
 932         padding: 0;
 933
 934         .md-subheader{
 935             background: none;
 936
 937         }
 938
 939         md-list{
 940             padding-top: 0;
 941         }
 942
 943         &__item-container{
 944             position: relative;
 945         }
 946
 947         &__group{
 948
 949             padding: 0!important;
 950
 951             &__item{
 952
 953                 &.selected{
 954                     background-color: @colorActive;
 955
 956                     .yangmanModule__requests-list__group__item__path{
 957                         color: #fff;
 958                     }
 959
 960                     .yangmanModule__requests-list__group__item__method{
 961                         .GET, .PUT, .POST, .DELETE, .error{
 962                             color: #fff;
 963                         }
 964                     }
 965                 }
 966
 967                 &__path{
 968                     white-space: -webkit-pre-wrap; /*Chrome & Safari */
 969                     word-break: break-all;
 970                     white-space: normal;
 971                     line-height: 18px;
 972                     color: @fontColor;
 973                     padding: 5px 0;
 974
 975                     p{
 976                         padding: 0 9px;
 977                     }
 978                 }
 979
 980                 &__method{
 981
 982                     padding-left: 17px;
 983
 984                     .GET{
 985                         color: @reqMethodGet;
 986                     }
 987                     .PUT{
 988                         color: @reqMethodPut;
 989                     }
 990                     .POST{
 991                         color: @reqMethodPost;
 992                     }
 993                     .DELETE{
 994                         color: @reqMethodDelete;
 995                     }
 996                     .error{
 997                         color: @reqError;
 998                     }
 999                 }
1000             }
1001
1002             &__itemMenu{
1003                 position: absolute;
1004                 top: 50%;
1005                 margin: -20px 0 0 0;
1006                 right: 5px;
1007                 padding: 0;
1008
1009                 &.selected{
1010                     > button{
1011                         i.material-icons{
1012                             color: #fff;
1013                         }
1014                     }
1015                 }
1016
1017                 > button{
1018                     min-width: 0;
1019                     margin: 2px 5px;
1020
1021                     i.material-icons{
1022                         vertical-align: middle;
1023                         color: @fontColorLight;
1024
1025                     }
1026                 }
1027
1028             }
1029
1030             &__collectionMenu{
1031                 position: relative;
1032                 margin-left: -52px;
1033                 margin-right: 6px;
1034
1035                 > button{
1036                     min-width: 0;
1037                     margin: 2px 5px;
1038
1039                     i.material-icons{
1040                         vertical-align: middle;
1041                         color: @fontColorLight;
1042                     }
1043                 }
1044
1045             }
1046
1047             .selected{
1048                 button{
1049                     background-color: rgba(158,158,158,0.2);
1050                 }
1051             }
1052
1053         }
1054
1055         &__collections-list{
1056             padding: 0;
1057             background: @listBackColor;
1058             height: 100%;
1059
1060             .selected{
1061                 button{
1062                     background-color: rgba(158,158,158,0.2);
1063                 }
1064             }
1065         }
1066
1067         &__collection{
1068             padding: 0;
1069             background: @listBackColor;
1070
1071             &__requests{
1072                 padding: 0;
1073                 border-top: 1px solid @dataStoreListBorderColor;
1074                 background: @listBackColor;
1075                 -webkit-box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
1076                 box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
1077             }
1078
1079             .md-subheader{
1080                 background: none;
1081             }
1082
1083             .md-subheader-inner{
1084                 padding: 0;
1085             }
1086
1087             .material-icons{
1088                 margin: 15px 25px;
1089             }
1090
1091             p{
1092                 line-height: 18px;
1093                 padding: 12px 0;
1094
1095                 .desc{
1096                     color: @fontColorLight;
1097                 }
1098             }
1099
1100         }
1101
1102     }
1103 }
1104 .reqMenu{
1105     button{
1106         span{
1107             color: @fontColor
1108
1109         }
1110         i.material-icons{
1111             vertical-align: middle;
1112             margin-right: 5px;
1113             margin-bottom: 5px;
1114         }
1115     }
1116 }
1117
1118
1119 .md-autocomplete-suggestions{
1120     span{
1121         color: @fontColor;
1122     }
1123 }
1124
1125 md-dialog{
1126
1127     .md-toolbar-tools{
1128         button{
1129             min-width: auto;
1130         }
1131     }
1132
1133     md-dialog-content, md-dialog-actions{
1134         h2, span{
1135             color: @fontColor;
1136         }
1137
1138     }
1139
1140 }
1141
1142 // directives
1143 .directive{
1144     &__abn-tree{
1145         padding: 0;
1146         display:inline-block;
1147         white-space: nowrap;
1148         min-width: 100%;
1149
1150         md-icon{
1151             margin: 6px 16px!important;
1152         }
1153
1154         md-list-item{
1155             min-height: 0;
1156
1157             &.active{
1158                 background: @listActiveColor;
1159             }
1160
1161             .md-no-style{
1162                 padding: 0;
1163
1164                 &.md-button{
1165                     white-space: nowrap;
1166                 }
1167             }
1168
1169             .md-list-item-inner{
1170                 min-height: 0;
1171             }
1172
1173             .empty-box{
1174                 display: inline-block;
1175                 margin-top: -10px;
1176                 margin-left: 27px;
1177                 border-left: 1px dashed @dashedBorderColor;
1178                 height: 36px;
1179                 width: 1px;
1180             }
1181
1182             .md-button{
1183                 overflow: visible;
1184             }
1185
1186             .tree-label{
1187                 padding-right: 15px;
1188             }
1189         }
1190     }
1191 }
1192
1193 .paramsAdminDialog{
1194
1195     .md-dialog-content{
1196
1197         height: 400px;
1198
1199         button{
1200             height: 30px;
1201             min-width: 30px;
1202             margin-top: 15px;
1203             i{
1204                 vertical-align: middle;
1205             }
1206         }
1207
1208
1209     }
1210     &__searchBox{
1211
1212         height: 80px;
1213
1214         > button{
1215             margin-top: 13px!important;
1216             margin-right: 0px!important;
1217         }
1218
1219         #importParameters{
1220             display: none;
1221         }
1222
1223         label{
1224             md-icon{
1225                 color: @fontColor;
1226             }
1227         }
1228
1229         md-menu{
1230             button{
1231                 margin-top: 5px!important;
1232             }
1233         }
1234
1235         input{
1236             border: none;
1237             height: auto;
1238             outline: none;
1239         }
1240     }
1241     &__paramsList{
1242         width: 450px;
1243         padding-top: 35px;
1244
1245         > div{
1246             min-height: 60px;
1247             margin-top: 10px;
1248         }
1249
1250
1251     }
1252 }