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% - 25px');
 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             md-icon{
 822                 margin: 12px 16px;
 823             }
 824
 825             &:hover{
 826                 .title{
 827                     background: @listActiveColor;
 828                 }
 829             }
 830         }
 831     }
 832
 833     // datastore list
 834     &__datastore-list{
 835         padding: 0;
 836         border-top: 1px solid @dataStoreListBorderColor;
 837         background: @listBackColor;
 838         -webkit-box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
 839         box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
 840
 841         md-list-item {
 842             min-height: 0;
 843             padding: 0;
 844             font-size: .85em;
 845
 846             &:hover{
 847                 background: @dataStoreListHoverColor;
 848             }
 849
 850             md-icon{
 851                 margin: 6px 16px 6px 48px;
 852                 font-size: 20.4px;
 853             }
 854         }
 855     }
 856
 857     // module history collections tabs
 858     &__mhc-tabs{
 859
 860         md-list-item{
 861             .md-no-style{
 862                 padding: 0;
 863             }
 864         }
 865
 866         > md-tabs-content-wrapper{
 867             height: calc(~'100% - 78px');
 868
 869             > md-tab-content{
 870                 height: 100%;
 871             }
 872         }
 873     }
 874
 875     // module detail
 876     &__module-detail{
 877         h4{
 878             padding-top: 30px;
 879             margin: 0 15px;
 880         }
 881
 882         .tabs{
 883             height: calc(~'100% - 49px');
 884
 885             md-tabs-canvas{
 886                 padding-top: 0;
 887                 height: 48px;
 888             }
 889
 890             > md-tabs-content-wrapper{
 891                 height: calc(~'100% - 48px');
 892
 893                 > md-tab-content{
 894                     height: 100%;
 895                 }
 896             }
 897
 898             .md-tab{
 899                 padding: 0;
 900             }
 901
 902             md-tab-item{
 903                 span{
 904                     outline: 0 none;
 905                     padding: 12px 24px;
 906                 }
 907             }
 908         }
 909
 910         > div{
 911             height: 100%;
 912
 913             > md-content{
 914                 overflow-y: hidden;
 915             }
 916         }
 917     }
 918
 919     &__requests-list{
 920         background: @listBackColor;
 921         padding: 0;
 922
 923         .md-subheader{
 924             background: none;
 925
 926         }
 927
 928         md-list{
 929             padding-top: 0;
 930         }
 931
 932         &__item-container{
 933             position: relative;
 934         }
 935
 936         &__group{
 937
 938             padding: 0!important;
 939
 940             &__item{
 941
 942                 &.selected{
 943                     background-color: @colorActive;
 944
 945                     .yangmanModule__requests-list__group__item__path{
 946                         color: #fff;
 947                     }
 948
 949                     .yangmanModule__requests-list__group__item__method{
 950                         .GET, .PUT, .POST, .DELETE, .error{
 951                             color: #fff;
 952                         }
 953                     }
 954                 }
 955
 956                 &__path{
 957                     white-space: -webkit-pre-wrap; /*Chrome & Safari */
 958                     word-break: break-all;
 959                     white-space: normal;
 960                     line-height: 18px;
 961                     color: @fontColor;
 962                     padding: 5px 0;
 963
 964                     p{
 965                         padding: 0 9px;
 966                     }
 967                 }
 968
 969                 &__method{
 970
 971                     padding-left: 17px;
 972
 973                     .GET{
 974                         color: @reqMethodGet;
 975                     }
 976                     .PUT{
 977                         color: @reqMethodPut;
 978                     }
 979                     .POST{
 980                         color: @reqMethodPost;
 981                     }
 982                     .DELETE{
 983                         color: @reqMethodDelete;
 984                     }
 985                     .error{
 986                         color: @reqError;
 987                     }
 988                 }
 989             }
 990
 991             &__itemMenu{
 992                 position: absolute;
 993                 top: 50%;
 994                 margin: -20px 0 0 0;
 995                 right: 5px;
 996                 padding: 0;
 997
 998                 &.selected{
 999                     > button{
1000                         i.material-icons{
1001                             color: #fff;
1002                         }
1003                     }
1004                 }
1005
1006                 > button{
1007                     min-width: 0;
1008                     margin: 2px 5px;
1009
1010                     i.material-icons{
1011                         vertical-align: middle;
1012                         color: @fontColorLight;
1013
1014                     }
1015                 }
1016
1017             }
1018
1019             &__collectionMenu{
1020                 position: relative;
1021                 margin-left: -52px;
1022                 margin-right: 6px;
1023
1024                 > button{
1025                     min-width: 0;
1026                     margin: 2px 5px;
1027
1028                     i.material-icons{
1029                         vertical-align: middle;
1030                         color: @fontColorLight;
1031                     }
1032                 }
1033
1034             }
1035
1036             .selected{
1037                 button{
1038                     background-color: rgba(158,158,158,0.2);
1039                 }
1040             }
1041
1042         }
1043
1044         &__collections-list{
1045             padding: 0;
1046             background: @listBackColor;
1047             height: 100%;
1048
1049             .selected{
1050                 button{
1051                     background-color: rgba(158,158,158,0.2);
1052                 }
1053             }
1054         }
1055
1056         &__collection{
1057             padding: 0;
1058             background: @listBackColor;
1059
1060             &__requests{
1061                 padding: 0;
1062                 border-top: 1px solid @dataStoreListBorderColor;
1063                 background: @listBackColor;
1064                 -webkit-box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
1065                 box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
1066             }
1067
1068             .md-subheader{
1069                 background: none;
1070             }
1071
1072             .md-subheader-inner{
1073                 padding: 0;
1074             }
1075
1076             .material-icons{
1077                 margin: 15px 25px;
1078             }
1079
1080             p{
1081                 line-height: 18px;
1082                 padding: 12px 0;
1083
1084                 .desc{
1085                     color: @fontColorLight;
1086                 }
1087             }
1088
1089         }
1090
1091     }
1092 }
1093 .reqMenu{
1094     button{
1095         span{
1096             color: @fontColor
1097
1098         }
1099         i.material-icons{
1100             vertical-align: middle;
1101             margin-right: 5px;
1102             margin-bottom: 5px;
1103         }
1104     }
1105 }
1106
1107
1108 .md-autocomplete-suggestions{
1109     span{
1110         color: @fontColor;
1111     }
1112 }
1113
1114 md-dialog{
1115
1116     .md-toolbar-tools{
1117         button{
1118             min-width: auto;
1119         }
1120     }
1121
1122     md-dialog-content, md-dialog-actions{
1123         h2, span{
1124             color: @fontColor;
1125         }
1126
1127     }
1128
1129 }
1130
1131 // directives
1132 .directive{
1133     &__abn-tree{
1134         padding: 0;
1135         display:inline-block;
1136         white-space: nowrap;
1137         min-width: 100%;
1138
1139         md-icon{
1140             margin: 6px 16px!important;
1141         }
1142
1143         md-list-item{
1144             min-height: 0;
1145
1146             &.active{
1147                 background: @listActiveColor;
1148             }
1149
1150             .md-no-style{
1151                 padding: 0;
1152
1153                 &.md-button{
1154                     white-space: nowrap;
1155                 }
1156             }
1157
1158             .md-list-item-inner{
1159                 min-height: 0;
1160             }
1161
1162             .empty-box{
1163                 display: inline-block;
1164                 margin-top: -10px;
1165                 margin-left: 27px;
1166                 border-left: 1px dashed @dashedBorderColor;
1167                 height: 36px;
1168                 width: 1px;
1169             }
1170
1171             .md-button{
1172                 overflow: visible;
1173             }
1174
1175             .tree-label{
1176                 padding-right: 15px;
1177             }
1178         }
1179     }
1180 }
1181
1182 .paramsAdminDialog{
1183
1184     .md-dialog-content{
1185
1186         height: 400px;
1187
1188         button{
1189             height: 30px;
1190             min-width: 30px;
1191             margin-top: 15px;
1192             i{
1193                 vertical-align: middle;
1194             }
1195         }
1196
1197
1198     }
1199     &__searchBox{
1200
1201         height: 80px;
1202
1203         > button{
1204             margin-top: 13px!important;
1205             margin-right: 0px!important;
1206         }
1207
1208         #importParameters{
1209             display: none;
1210         }
1211
1212         label{
1213             md-icon{
1214                 color: @fontColor;
1215             }
1216         }
1217
1218         md-menu{
1219             button{
1220                 margin-top: 5px!important;
1221             }
1222         }
1223
1224         input{
1225             border: none;
1226             height: auto;
1227             outline: none;
1228         }
1229     }
1230     &__paramsList{
1231         width: 450px;
1232         padding-top: 35px;
1233
1234         > div{
1235             min-height: 60px;
1236             margin-top: 10px;
1237         }
1238
1239
1240     }
1241 }