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