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