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
  27 // helpers
  28 .pointer{
  29     cursor: pointer;
  30     outline: 0 none;
  31 }
  32
  33 .no-wrap{
  34     white-space: nowrap;
  35 }
  36
  37 .text-center{
  38     text-align: center;
  39 }
  40
  41 .text-left{
  42     text-align: left;
  43 }
  44
  45 .h100{
  46     height: 100%;
  47 }
  48
  49 .mb30{
  50     margin-bottom: 30px;
  51 }
  52
  53 .nrp{
  54     padding-right: 0!important;
  55 }
  56
  57 // general
  58 .md-open-menu-container{
  59     span{
  60         color: @fontColor;
  61     }
  62
  63     h5{
  64         margin: 0 16px;
  65         color: @unactiveTabFontColor;
  66
  67         md-icon{
  68             color: @unactiveTabFontColor;
  69             font-size: 18px;
  70         }
  71     }
  72
  73     md-menu-content{
  74         .info-box{
  75             position: absolute;
  76             left: 100%;
  77             top: 0;
  78             margin-left: 10px;
  79             min-width: 300px;
  80             padding: 0;
  81             z-index: 10;
  82             background: #fff;
  83             -webkit-transition: all 150ms linear;
  84             -moz-transition: all 150ms linear;
  85             -ms-transition: all 150ms linear;
  86             -o-transition: all 150ms linear;
  87             transition: all 150ms linear;
  88             opacity: 1;
  89             max-height: 300px;
  90             overflow-y: auto;
  91             overflow-x: hidden;
  92
  93             &__padding{
  94                 padding: 16px;
  95             }
  96
  97             &.ng-hide{
  98                 opacity: 0;
  99             }
 100         }
 101     }
 102
 103     svg {
 104          border: none;
 105          border-radius: 0px;
 106          background-image: none;
 107     }
 108
 109     .icon-wrapper{
 110         padding: 0 16px;
 111     }
 112 }
 113
 114 .md-select-menu-container{
 115     z-index: 1000;
 116 }
 117
 118 .svg-icon{
 119     width: 24px;
 120     height: 24px;
 121     padding-top: 4px;
 122     padding-bottom: 4px;
 123     color: @dashedBorderColor;
 124 }
 125
 126 md-ink-bar.custom{
 127     width: 100%;
 128     color: @colorActive;
 129     left: 0;
 130     background: @colorActive;
 131 }
 132
 133 button{
 134     label{
 135         font-weight: normal;
 136     }
 137 }
 138
 139 // yangman
 140 .yangmanModule{
 141     background-color: @appBackColor;
 142     color: @fontColor;
 143     height: 100%;
 144
 145     /*.md-input{
 146         color: @inputColor;
 147         background: transparent;
 148     }*/
 149
 150     .historyTabReqsSelected{
 151         height: calc(~'100% - 90px');
 152     }
 153
 154     .historyTab{
 155         height: calc(~'100% - 45px');
 156     }
 157
 158     .collectionsTab{
 159         height: calc(~'100% - 45px');
 160     }
 161
 162
 163     p{
 164         margin: 0;
 165     }
 166
 167     h1, h2, h3, h4, h5, h6{
 168         color: @fontColor;
 169     }
 170
 171     .scrollableY{
 172         overflow-y: auto;
 173         height: 100%;
 174     }
 175
 176     .scrollableX{
 177         overflow-x: auto;
 178         //width: 100%;
 179     }
 180
 181     .highlight{
 182         color: @fontHighlight;
 183     }
 184     md-tabs-content-wrapper{
 185         top: 0!important;
 186     }
 187
 188     // modules switcher -> list && detail
 189     .arrow-switcher{
 190         position: absolute;
 191         top: 2px;
 192         cursor: pointer;
 193         outline: 0 none;
 194         z-index: 10;
 195         font-size: 2.5em;
 196         left: -11px;
 197         -webkit-transition: all 250ms ease-out;
 198         -moz-transition: all 250ms ease-out;
 199         -ms-transition: all 250ms ease-out;
 200         -o-transition: all 250ms ease-out;
 201         transition: all 250ms ease-out;
 202
 203         &__left{
 204             //right: -11px;
 205             left: calc(~'100% - 24px');
 206             -moz-transform: rotate(180deg);
 207             -webkit-transform: rotate(180deg);
 208             -o-transform: rotate(180deg);
 209             -ms-transform: rotate(180deg);
 210             transform: rotate(180deg);
 211         }
 212
 213         &.ng-hide{
 214             opacity: 0;
 215         }
 216     }
 217
 218     md-dialog{
 219         h2{
 220             color: @popupHeaderColor;
 221         }
 222
 223         &-actions{
 224             button{
 225                 span{
 226                     color: @fontColor;
 227                 }
 228             }
 229         }
 230     }
 231     // left panel
 232     &__left-panel{
 233         overflow-x: hidden;
 234         background: @leftPanelBackColor;
 235         //background: @listBackColor;
 236
 237         md-tabs,
 238         md-tab-content > div,
 239         md-content,
 240         .h100{
 241             height: 100%;
 242         }
 243
 244         md-tabs-canvas{
 245             border-bottom: 1px solid #dbdbdb;
 246             padding-top: 30px;
 247             height: 78px;
 248         }
 249
 250         md-ink-bar{
 251             height: 4px;
 252         }
 253
 254         md-content{
 255             background: transparent;
 256         }
 257
 258         .md-tab{
 259             span{
 260                 color: @unactiveTabFontColor;
 261             }
 262
 263             &.md-active{
 264                 span{
 265                     color: @fontColor;
 266                 }
 267             }
 268         }
 269
 270         /*md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon){
 271             margin-right: 16px;
 272         }*/
 273
 274         /*md-list-item > md-icon:first-child:not(.md-avatar-icon){
 275             margin: 0 16px;
 276         }*/
 277
 278         &__detail-list-tabs-container{
 279             > md-tabs-wrapper{
 280                 display: none;
 281             }
 282
 283             .inline-tabs > md-tabs-wrapper{
 284                 display: inline;
 285             }
 286         }
 287
 288         .searchBox{
 289             height: auto;
 290             padding: 10px 13px;
 291             font-size: 14px;
 292
 293             #importCollection{
 294                 display: none;
 295             }
 296
 297             label{
 298                 margin-bottom: 0;
 299             }
 300
 301             md-icon.clickable{
 302                 cursor: pointer;
 303             }
 304
 305             input{
 306                 background: none;
 307                 border: none;
 308                 color: @fontColor;
 309                 outline: none;
 310             }
 311         }
 312
 313         //loading panel
 314         &__loading-container {
 315             display: block;
 316             position: relative;
 317             border: 2px solid @infoBoxBorderColor;
 318             transition: opacity  0.1s linear;
 319             border-top: 0px;
 320             margin: 10px;
 321
 322             .bottom-block {
 323                 display: block;
 324                 position: relative;
 325                 background-color: @infoBoxBackColor;
 326                 height: 85px;
 327
 328                 > span {
 329                     display: inline-block;
 330                     margin-top: 10px;
 331                     padding: 25px;
 332                     font-size: 0.9em;
 333                 }
 334             }
 335         }
 336     }
 337
 338     // right panel
 339     &__right-panel{
 340         height: 100%;
 341
 342         .bottom-content{
 343             height: calc(~'100% - 195px');
 344             overflow-y: auto;
 345
 346             .codemirror-container{
 347                 height: 100%;
 348             }
 349         }
 350
 351         &__header{
 352             margin-bottom: 30px;
 353
 354             > md-content{
 355                 background: @leftPanelBackColor;
 356
 357                 md-content{
 358                     background: transparent;
 359                 }
 360             }
 361
 362             md-input-container{
 363                 margin: 0;
 364             }
 365
 366             .md-errors-spacer{
 367                 display: none;
 368             }
 369
 370             .input-span{
 371                 padding-top: 3px;
 372             }
 373
 374             .input-identifier{
 375                 max-width: 80px;
 376                 border-color: @colorActive;
 377                 padding-left: 0;
 378             }
 379
 380             md-divider{
 381                 margin-top: 20px;
 382             }
 383
 384             .status-bar{
 385                 min-height: 60px;
 386
 387                 .status-text{
 388                     span span{
 389                         color: @colorActive;
 390                     }
 391                 }
 392             }
 393         }
 394
 395         &__req-data{
 396
 397             > div{
 398                 height: 100%;
 399                 padding-right: 2px;
 400                 padding-bottom: 10px;
 401                 position: relative;
 402
 403
 404                 > div {
 405                     height: calc(~'100% - 25px');
 406                     overflow-y: auto;
 407                 }
 408
 409                 h5{
 410                     margin-top: 0;
 411                 }
 412
 413                 &.half-size{
 414                     height: 50%;
 415                 }
 416             }
 417
 418             .paramsBox{
 419                 position: absolute;
 420                 top: 30px;
 421                 right: 26px;
 422                 background-color: rgba(235, 235, 228, 0.62);
 423                 padding: 15px;
 424             }
 425
 426             .CodeMirror { height: 100%; }
 427         }
 428
 429         &__form{
 430             .union-tabs{
 431                 md-content{
 432                     min-width: 250px;
 433                 }
 434
 435                 .md-tab{
 436                     padding: 6px 12px;
 437                 }
 438
 439                 md-pagination-wrapper,
 440                 md-tabs-canvas{
 441                     height: 36px;
 442                 }
 443             }
 444
 445             md-input-container{
 446                 margin: 0;
 447
 448                 > md-icon {
 449                     left: auto;
 450                     right: 2px;
 451                     color: @dashedBorderColor;
 452                 }
 453
 454                 &.md-has-icon{
 455                     padding-right: 36px;
 456                     padding-left: 0px;
 457                 }
 458
 459                 .md-errors-spacer{
 460                     display: none;
 461                 }
 462             }
 463
 464             .md-menu.menu-container{
 465                 padding: 0;
 466
 467                 .md-button{
 468                     height: 22px;
 469                     min-height: 22px;
 470
 471                     &.md-icon-button{
 472                         padding: 0 8px;
 473                     }
 474                 }
 475             }
 476
 477             .menu-placeholder{
 478                 padding: 11px 26px;
 479             }
 480
 481             p.top-element{
 482                 margin: 0 10px 0 0;
 483                 min-width: 80px;
 484
 485                 &.list-label{
 486                     color: @colorActive;
 487                 }
 488             }
 489
 490             &__element-container{
 491                 margin: 25px 5px 5px 15px;
 492                 padding: 5px;
 493
 494                 &.expanded{
 495                     border-left: 1px dashed @dashedBorderColor;
 496                 }
 497
 498                 md-input-container{
 499                     &.input-icon-container{
 500                         margin-left: 15px;
 501
 502                         md-icon{
 503                             margin: 0;
 504                         }
 505                     }
 506                 }
 507
 508                 .container-label{
 509                     margin: -20px 0 10px -17px;
 510
 511                     md-icon{
 512                         margin: 0;
 513                     }
 514                 }
 515             }
 516
 517             &__leaf-container{
 518                 padding-left: 10px;
 519
 520                 md-input-container,
 521                 md-switch,
 522                 md-checkbox{
 523                     margin: 5px 0;
 524                 }
 525             }
 526
 527             &__list{
 528                 &__paginator{
 529                     //margin-left: 40px;
 530                     button {
 531                         background: transparent;
 532                         border: 0;
 533                         outline: 0 none;
 534                     }
 535                 }
 536             }
 537
 538             &__list-item{
 539                 margin: 0 5px;
 540
 541                 md-tab-item{
 542                     position: relative;
 543
 544                     &.md-tab{
 545                         padding: 6px 12px;
 546                     }
 547                 }
 548             }
 549         }
 550     }
 551
 552
 553     //modules list
 554     &__modules-list{
 555         padding: 0;
 556         background: @listBackColor;
 557
 558         h4{
 559             margin: 0;
 560             padding: 10px 20px;
 561         }
 562
 563         &__item{
 564             padding: 0!important;
 565
 566             .title{
 567                 -webkit-transition: all 150ms ease;
 568                 -moz-transition: all 150ms ease;
 569                 -ms-transition: all 150ms ease;
 570                 -o-transition: all 150ms ease;
 571                 transition: all 150ms ease;
 572             }
 573
 574             &.expanded{
 575                 background: @listActiveColor;
 576             }
 577
 578             md-icon{
 579                 margin: 12px 16px;
 580             }
 581
 582             &:hover{
 583                 .title{
 584                     background: @listActiveColor;
 585                 }
 586             }
 587         }
 588
 589         /*md-list-item{
 590
 591         }*/
 592     }
 593
 594     // datastore list
 595     &__datastore-list{
 596         padding: 0;
 597         border-top: 1px solid @dataStoreListBorderColor;
 598         background: @listBackColor;
 599         -webkit-box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
 600         box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
 601
 602         md-list-item {
 603             min-height: 0;
 604             padding: 0;
 605             font-size: .85em;
 606
 607             &:hover{
 608                 background: @dataStoreListHoverColor;
 609             }
 610
 611             md-icon{
 612                 margin: 6px 16px 6px 48px;
 613                 font-size: 20.4px;
 614             }
 615         }
 616     }
 617
 618     // module history collections tabs
 619     &__mhc-tabs{
 620
 621         md-list-item{
 622             .md-no-style{
 623                 padding: 0;
 624             }
 625         }
 626
 627         > md-tabs-content-wrapper{
 628             height: calc(~'100% - 78px');
 629
 630             > md-tab-content{
 631                 height: 100%;
 632             }
 633         }
 634     }
 635
 636     // module detail
 637     &__module-detail{
 638         h4{
 639             padding-top: 30px;
 640             margin: 0 15px;
 641         }
 642
 643         .tabs{
 644             height: calc(~'100% - 49px');
 645
 646             md-tabs-canvas{
 647                 padding-top: 0;
 648                 height: 48px;
 649             }
 650
 651             > md-tabs-content-wrapper{
 652                 height: calc(~'100% - 48px');
 653
 654                 > md-tab-content{
 655                     height: 100%;
 656                 }
 657             }
 658
 659             .md-tab{
 660                 padding: 0;
 661             }
 662
 663             md-tab-item{
 664                 span{
 665                     outline: 0 none;
 666                     padding: 12px 24px;
 667                 }
 668             }
 669         }
 670
 671         > div{
 672             height: 100%;
 673         }
 674     }
 675
 676     &__requests-list{
 677         background: @listBackColor;
 678         padding: 0;
 679
 680         .md-subheader{
 681             background: none;
 682
 683         }
 684
 685         md-list{
 686             padding-top: 0;
 687         }
 688
 689         &__group{
 690
 691             padding: 0!important;
 692
 693             &__item{
 694
 695                 &__path{
 696                     white-space: -webkit-pre-wrap; /*Chrome & Safari */
 697                     word-break: break-all;
 698                     white-space: normal;
 699                     line-height: 18px;
 700                     color: @fontColor;
 701
 702                     p{
 703                         padding-right: 9px;
 704                     }
 705                 }
 706
 707                 &__method{
 708
 709                     padding-left: 17px;
 710
 711                     .GET{
 712                         color: @reqMethodGet;
 713                     }
 714                     .PUT{
 715                         color: @reqMethodPut;
 716                     }
 717                     .POST{
 718                         color: @reqMethodPost;
 719                     }
 720                     .DELETE{
 721                         color: @reqMethodDelete;
 722                     }
 723                     .error{
 724                         color: @reqError;
 725                     }
 726                 }
 727             }
 728
 729             &__itemMenu{
 730                 position: relative;
 731                 margin-left: -52px;
 732                 padding-top: 0;
 733
 734                 > button{
 735                     min-width: 0;
 736                     margin: 2px 5px;
 737
 738                     i.material-icons{
 739                         vertical-align: middle;
 740                         color: @fontColorLight;
 741
 742                     }
 743                 }
 744
 745             }
 746
 747             &__collectionMenu{
 748                 position: relative;
 749                 margin-left: -52px;
 750                 margin-right: 6px;
 751
 752                 > button{
 753                     min-width: 0;
 754                     margin: 2px 5px;
 755
 756                     i.material-icons{
 757                         vertical-align: middle;
 758                         color: @fontColorLight;
 759                     }
 760                 }
 761
 762             }
 763
 764             .selected{
 765                 button{
 766                     background-color: rgba(158,158,158,0.2);
 767                 }
 768             }
 769
 770         }
 771
 772         &__collections-list{
 773             padding: 0;
 774             background: @listBackColor;
 775             height: 100%;
 776
 777             .selected{
 778                 button{
 779                     background-color: rgba(158,158,158,0.2);
 780                 }
 781             }
 782         }
 783
 784         &__collection{
 785             padding: 0;
 786             background: @listBackColor;
 787
 788             &__requests{
 789                 padding: 0;
 790                 border-top: 1px solid @dataStoreListBorderColor;
 791                 background: @listBackColor;
 792                 -webkit-box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
 793                 box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
 794             }
 795
 796             .md-subheader{
 797                 background: none;
 798             }
 799
 800             .md-subheader-inner{
 801                 padding: 0;
 802             }
 803
 804             .material-icons{
 805                 margin: 15px 25px;
 806             }
 807
 808             p{
 809                 line-height: 18px;
 810                 padding: 12px 0;
 811
 812                 .desc{
 813                     color: @fontColorLight;
 814                 }
 815             }
 816
 817         }
 818
 819     }
 820 }
 821 .reqMenu{
 822     button{
 823         span{
 824             color: @fontColor
 825
 826         }
 827         i.material-icons{
 828             vertical-align: middle;
 829             margin-right: 5px;
 830             margin-bottom: 5px;
 831         }
 832     }
 833 }
 834
 835
 836 .md-autocomplete-suggestions{
 837     span{
 838         color: @fontColor;
 839     }
 840 }
 841
 842 md-dialog{
 843
 844     .md-toolbar-tools{
 845         button{
 846             min-width: auto;
 847         }
 848     }
 849
 850     md-dialog-content, md-dialog-actions{
 851         h2, span{
 852             color: @fontColor;
 853         }
 854
 855     }
 856
 857 }
 858
 859 // directives
 860 .directive{
 861     &__abn-tree{
 862         padding: 0;
 863         display:inline-block;
 864         white-space: nowrap;
 865         min-width: 100%;
 866
 867         md-icon{
 868             margin: 6px 16px!important;
 869         }
 870
 871         md-list-item{
 872             min-height: 0;
 873
 874             &.active{
 875                 background: @listActiveColor;
 876             }
 877
 878             .md-no-style{
 879                 padding: 0;
 880
 881                 &.md-button{
 882                     white-space: nowrap;
 883                 }
 884             }
 885
 886             .md-list-item-inner{
 887                 min-height: 0;
 888             }
 889
 890             .empty-box{
 891                 display: inline-block;
 892                 margin-top: -10px;
 893                 margin-left: 27px;
 894                 border-left: 1px dashed @dashedBorderColor;
 895                 height: 36px;
 896                 width: 1px;
 897             }
 898
 899             .md-button{
 900                 overflow: visible;
 901             }
 902
 903             .tree-label{
 904                 padding-right: 15px;
 905             }
 906         }
 907     }
 908 }
 909
 910 .paramsAdminDialog{
 911
 912     .md-dialog-content{
 913
 914         height: 400px;
 915
 916         button{
 917             height: 30px;
 918             min-width: 30px;
 919             margin-top: 15px;
 920             i{
 921                 vertical-align: middle;
 922             }
 923         }
 924
 925
 926     }
 927     &__searchBox{
 928
 929         height: 80px;
 930
 931         > button{
 932             margin-top: 13px!important;
 933             margin-right: 0px!important;
 934         }
 935
 936         #importParameters{
 937             display: none;
 938         }
 939
 940         label{
 941             md-icon{
 942                 color: @fontColor;
 943             }
 944         }
 945
 946         md-menu{
 947             button{
 948                 margin-top: 5px!important;
 949             }
 950         }
 951
 952         input{
 953             border: none;
 954             height: auto;
 955             outline: none;
 956         }
 957     }
 958     &__paramsList{
 959         width: 450px;
 960         padding-top: 35px;
 961
 962         > div{
 963             min-height: 60px;
 964             margin-top: 10px;
 965         }
 966
 967
 968     }
 969 }