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